Skip to main content

How to Create a featured block for category page?

Template Shortcode allows you to show a featured block on the category page. For example this page.

The featured area of the Travel category on the Default demo, outlined in orange: one large post on the left and two stacked on the right, under the category header.

To create a featured block for the category page, follow the steps below:​

What you set in these steps is the featured block for every category. Any one category can use its own instead: the Top Section tab of its Foxiz Category Settings box has a Template Shortcode field of its own, and that one wins. Left empty, the category follows the one you set here. So set the template for all categories first, then give its own template only to a category that should look different, as One category with its own template shows.

  1. Navigate to Dashboard > Ruby Templates > Add New Template.

  2. Add the title of the page, for example Category Template.

  3. Click on the “Edit With Elementor” button to switch to the builder.

    Ruby Templates > Add New Template with Category Template typed in the title field and the Edit with Elementor button below it, outlined in orange.

  4. Elementor opens with its panel on the left.

    The Elementor editor on a new, empty Ruby Template: the widget panel on the left listing its block groups, Foxiz - Flex, Foxiz - Standard and Foxiz - Element among them, and the empty page on the right with its + button outlined in orange.

  5. Click the + button in the middle of the page to add a container, then drag blocks from the panel into it.

    To build a layout like the picture above, one large post on the left and two on the right:

    • Open the container's Layout tab and set Direction to Row - horizontal.
    • On the left, drop Foxiz - Highlight Overlay, the large post. Set Slider to Enable if you want it to rotate through several posts, as the dots in the picture show.
    • On the right, drop Foxiz - Overlay, set Number of Posts to 2 and Columns on Desktop to 1 Column, so the two posts stack.
    • In both blocks, you will set Category Filter to Dynamic Query in step 7, so each category features its own posts.

    The Category Featured template in Elementor: on the canvas one row with Foxiz - Highlight Overlay on the left and Foxiz - Overlay with two stacked posts on the right, both outlined in orange, and the panel on the left open on the Foxiz - Overlay block's settings.

    The Elementor widget panel scrolled down the open Foxiz - Standard group, the Foxiz - Element heading below it, with Foxiz - Highlight Overlay and Foxiz - Overlay outlined in orange.

    Foxiz's blocks are grouped into six categories in the Elementor panel: Foxiz - Flex, Foxiz - Standard, Foxiz - Element, Foxiz Header, Foxiz Podcast and Foxiz Single. A featured area is built from the post listing blocks in the first two.

  6. Click on the Content area to open the panel.

    That means the listing block itself, on the canvas. Clicking it opens its settings in the left hand panel, where the Content tab is the first of the three.

  7. Select the Content tab, then find the Category Filter option then select "Dynamic Query".

    The Query Settings section of the block in Elementor, with Category Filter set to Dynamic Query, outlined in orange.

    Category Filter is in the block's Query Settings section and its default is - All -. Dynamic Query is the entry directly below it, above the list of category names, so it is easy to scroll past.

    That entry is added to the dropdown only while you are editing a Ruby Template, which is why the same block dropped on an ordinary Elementor page offers category names and nothing else.

    On a category page the theme swaps Dynamic Query for the category being viewed, so one template covers all of them. On any other page, and in the Elementor editor, it is cleared instead and the block lists posts from everywhere: the editor cannot show you the filtered result, and the front end is where you check it.

  8. After you create a Category Template, you can copy the shortcode.

    The Ruby Templates list, with each template's shortcode in the Template Shortcode column

    It is in the Template Shortcode box in the right hand sidebar of the editor, and in the Template Shortcode column of Ruby Templates > All Templates. It reads [Ruby_E_Template id="1"], where the number is this template's post ID.

  9. Navigate to Foxiz > Theme Options > Category, open the Top Template Builder section, and paste the shortcode into Template Shortcode.

    Theme Options with Category highlighted in the section list, beside the Top Template Builder group: Template Shortcode holding [Ruby_E_Template id="3081"] and, below it, Display Conditional on Show on the first page, both outlined in orange.

    Save your changes once the shortcode is in.

The template is printed after the category header and above the post listing, which is what makes it the featured area of the page. It shows on a category with no posts too, with the theme's empty message below it.

Display Conditional appears under the shortcode once the field has something in it, and its default is Show on the first page. Left there, your featured block is on the first screen of the category and gone from page 2 onward; Show on all pages keeps it everywhere.

One category with its own template​

A category that should look different gets its own template, which wins over the one in Theme Options:

  1. Navigate to Dashboard > Posts > Categories.

  2. Hover the category you want to change, then click its Edit link.

  3. In the Foxiz Category Settings box, open the Top Section tab. Under its Top Featured Section heading, paste the shortcode into the Template Shortcode field.

    Below it, Display Condition starts on - Default -, which follows Display Conditional in Theme Options. Leave it there for most categories; pick Show in the first page or Show in all pages only when this category should differ.

    The Foxiz Category Settings box on the Business category, with the Top Section tab selected and outlined in orange, and [Ruby_E_Template id="3081"] pasted into its Template Shortcode field, also outlined.

  4. Click Update to save.

Clear the field again, and the category goes back to the template set in Theme Options.

A heading that names the category​

A dynamic template can carry a heading that changes with the category, such as Top Fashion News on Fashion and Top Technology News on Technology:

  1. Open the template with Edit with Elementor, and click a Foxiz - Heading block.

  2. Type your heading in its Heading field, with {category} where the category name should go: Top {category} News.

    The Foxiz - Heading panel with a category tag in the Heading field

The heading Top Business News on the Business category, outlined in orange: the template's heading block holds Top archive News and the category name is filled in.

The same block accepts three more tags, all replaced with the name of whatever archive it is displayed on: {archive}, {tag} and {taxonomy}. On a category page {archive} and {category} give the same result; the template in the picture above uses {archive}. How to Create Dynamic Title Heading Blocks has more.

Related Articles