FSCI (Simple Category Index) Block

This tutorial features the Feast Plugin, which contains enhances and extends your theme.

The Simple Category Index Block lets you create a simple visual index of your categories, by leveraging the new Category Featured Images.

This allows us to build a more user-friendly Modern Recipe Index.

Just insert the FSCI block (feast-simple-category-index) wherever you want to display a list of categories, like on the homepage and posts.

Calling the block with no additional parameters will output all eligible categories.

Jump to:

• Examples
• Block settings
• Shortcode settings
• Categories missing images
• Add featured images to categories
• Conversion video
• Tips for building category images
• Grouping categories
• Image alt text
• Toggle title off
• Live examples
• Where can I use this?
• Eligible categories
• Randomizing categories
• Troubleshooting
• Separate mobile and desktop displays
• Seasoned Pro and Cravings Pro
• Related posts

Examples

If you've embedded the category name into the image, you can disable the title output by adding toggling off the "show title" setting. Here, we've also added the new feast-image-round class to the images, which display the images as a circle.

By combining different styles, we can create entirely new and unique displays. The images for the pastries categories below are uploaded at full color, but displayed in a classical parisian monochrome-style and frame.

Block settings

The block settings let you customize the layout of the FSCI shortcode visually:

Note that the categories you enter must be the category slug.

Using the FSCI block without any parameters will display all your eligible category images and the category name, but this is not a good user experience and is not how it should be displayed.

We recommend customizing the display by specifying category slugs:

We recommend separating these with proper use of headings, as recommended in the Modern Recipe Index.

Shortcode settings

The shortcode is outdated, and we recommend skipping this section and instead, use the FSCI block, in the block editor:

Old shortcode settings:

• categories="" - specify exactly which categories to display, using your category slugs - recommended
• show_title="no" - to disable the title output (for example, if the category name is in the image)
• list_class="feast-grid-third" - to change from the default one-fourth display. This controls both the mobile and desktop layout. Available displays are:
  • feast-grid-half
  • feast-grid-third
  • feast-grid-fourth
  • feast-grid fifth
  • You can over-ride the desktop display by adding the desktop-specific classes. These classes need to go after the feast-grid-X class, and only affect the desktop output:
    • feast-desktop-grid-half
    • feast-desktop-grid-third
    • feast-desktop-grid-fourth
    • feast-desktop-grid-fifth
    • feast-desktop-grid-sixth
    • eg. list_class="feast-grid-third feast-desktop-grid-sixth"
• container_class="" - to add your own custom styling to the container with custom classes that you define in "Additional CSS"
• image_class="feast-image-round" - to add classes to the images, for styling. New image classes we have built in include:
  • feast-image-round for round images
  • feast-image-border for a single border
  • feast-image-double-border for a double border
  • feast-image-casablanca for monochrome
• image_size="" - this is not yet implemented but will come in a future update. Currently, all images display at the dimensions you upload at, so upload all squares that are 1200x1200 (1000x1000) minimum

Note: in all themes later than 4.0.8, anything larger than "full" is displayed as one-half on mobile for readability.

Categories missing images

Any categories without featured images set will have generic placeholder styling:

You'll need to add featured images to the categories, per below:

Add featured images to categories

You'll need to upload brand new images (JPG) to categories at 1200x1200 dimensions:

1. Upload your Category Featured Images

Then upload the new category featured images in Media > Add New

Due to a weird bug in WordPress, you'll need to upload new images (JPGs), because old images may not have the appropriate meta-data.

We recommend intentionally building new category images so that they have a consistent look.

Square images (1200x1200 px) with centered text that takes up around 70% of the width provide the best clarity:

2. Set the Featured Category Image

You can then add them to your categories in Admin > Post > Categories

Conversion video

If you've already set up the Modern Recipe Index with shortcodes instead of blocks, converting it over is very straight forward:

Note: ignore the part about enabling the category featured images - this has been automatically enabled for all sites and is no longer something that needs to be activated.

Tips for building category images

• Images should be JPGs, and 1200x1200 or larger (minimum 1000x1000, maximum 2000x2000)
  • Following a convention established by larger sites, we recommend using square images with rounded corners for categories, to visually distinguish them from posts
• Image names should follow good SEO practices: they should match the page content (be named after the category + word "recipes") eg. keto-breakfast-recipes.jpg
• Including the category name in the center of the image allows for flexibility in how it gets displayed, and allows for circle-styling
• Due to a weird bug in WordPress, all images for the category featured image must be new uploads
• Do not bother building the Modern Recipe Index on a staging site - create it as a brand new page, set it to live, and don't link to it. When you're ready to go live, just link to it.

We're tracking this bug down, but it's likely due to a change in how WordPress handled image uploads in the past.

Grouping categories

We aren't big fans of nested categories, and with the Simple Category Index you can create a visual hierarchy by grouping categories under (h2) headings without actually requiring categories to be nested.

For example, you can have categories for seasonal recipes including "Winter", "Spring", "Summer"  and "Fall", without having a useless "Seasonal" parent category by simply displaying these categories with a "Seasonal" h2 header.

Image alt text

The image's alt text is generated from the category's name for accessibility and screen readers.

Alt text is intentionally left empty if the category title is displayed below the image, to avoid duplication of content for screen readers.

Toggle title off

If you have text embedded into the image, you can toggle the title off in the block settings:

Live examples

These are some sites that have category images.

Where can I use this?

All the places!

• The block can be inserted into the Modern Homepage
• The block can be inserted into the Modern Sidebar
• The block can be inserted directly into posts to link to all the categories the current recipe is a part of

Eligible categories

To be eligible for display, all the following criteria must be met:

1. the category must have a category featured image assigned to it
2. the category must have at least 1 post in it
3. the slugs you specify must match an existing category

For more troubleshooting, see "Troubleshooting" below.

Randomizing categories

At this time we don't have any plans to support randomizing the categories displayed using the FSCI block.

Search engines won't rank or pass authority to content that isn't static. This is possibly because they can't reliable associate the content that users are searching for, with that page.

Our understanding is that Google keeps multiple caches of a page (once per crawl, up to 10 copies) and dismisses (or de-emphasizes) content that isn't present in each of the caches.

From a user standpoint, it would be a poor experience to click on one recipe, go back to the homepage to find another recipe you also want to see, and find that it has disappeared. You expect a reasonable level of consistency from sites you visit.

Much like sliders, if the content isn't important enough to be static on the homepage, it's not important enough to be on the homepage, period.

The purpose of the homepage is to display the top categories - between 4 and 8 FSCI category images. If you want to display more than that, use the Modern Recipe Index instead.

Troubleshooting

One of my categories isn't showing

1. If the shortcode doesn't find an exact match for your category slug, it will not show
2. If the shortcode doesn't find a category featured image for the category, it will not show
3. If your category has no posts in it, it will not show
4. If you haven't uploaded a new image, it won't show (WP bug)
   • This typically displays as "failed to get attachment ID from URL"
5. If the image you uploaded is too small for the thumbnail size, the image won't show (upload category images at 1024x1024 minimum, 1200x1200 recommended)
6. If you're implementing this on a staging site it may not work - simply push the site live and then edit the FSCI block
7. Make sure that the image URL on the category page is HTTPS and not-HTTP (if images are being loaded as HTTP, check your WordPress "General Settings")

We considered adding a placeholder image for all categories without images set, as well as displaying categories without posts, but decided that this would be a bad user experience for visitors.

It's important that you intentionally build these images, and categories, and optimize it for your readers so that you don't end up with thin-content garbage that you need to delete later on.

See our tutorial on how to configure category pages.

This has become especially prominent given that many sites being audited end up needing to delete poor quality content, and it drives up their ranking.

Note about CDNs: we've seen issues with image hosting platforms and CDNs including WP Offload Media and Jetpack. We always recommend removing Jetpack completely, but for WP Offload Media, you'll want to use the "remove from bucket" feature:

How can I prevent a category from showing?

The shortcode is built to be additive, instead of subtractive. That means if you want to exclude a category from showing, you should list the categories you want to show, instead of trying to remove specific categories.

The shortcode is designed to be used as a short, specific list rather than display-all. This is because most blogs have a huge number of unrelated categories and displaying all of them in a single place isn't a user-first experience.

The categories you display should be related to the content of the page you're on. If you're on a desserts page, showing categories related to desserts (pies, cakes, cookies) is a good idea. Showing unrelated categories (salads, smoothies, soups) is not.

Sidenote: not setting a category featured image will prevent that category from showing. So if you have a "family" category, simply don't set a featured image.

Separate mobile and desktop displays

The default grid columns (feast-grid-half, feast-grid-third, feast-grid-fourth) should be used to control the mobile layout. We live in a mobile-first world - design for mobile.

You can use the separate desktop classes to change how the grids are displayed on desktop: feast-desktop-grid-half, feast-desktop-grid-third, feast-desktop-grid-fourth, feast-desktop-grid-fifth, feast-desktop-grid-sixth

Ideally, you'll want to use a mobile grid that divides evenly into desktop - the two primary would be:

• feast-grid-half with feast-desktop-grid-fourth
• feast-grid-third with feast-desktop-grid-sixth

Seasoned Pro and Cravings Pro

This is a completely new, better method than what was built into Seasoned Pro and Cravings Pro years ago. We recommend replacing the recipe index with the Simple Recipe Index and removing the Seasoned Pro and Cravings Pro method. To remove the theme setup:

• Remove the "Featured Page" widgets from the "Recipes Bottom" widget area in Admin > Appearances > Widgets
• Delete the pages you've created from Admin > Pages
• Remove any redirects you have in place for those pages

Related posts

• How to use categories
• Category pages need content
• How to configure the category pages
• Food blog site structure
• Simple Category Index