Modern Homepage Setup

This tutorial features the Feast Plugin, which contains theme enhancements.

This is the tutorial for the modern homepage. We have some companion pages:

• the modern homepage vs. theme homepage details the differences between the modern homepage and theme homepage
• the rethinking the homepage post outlines the issues we discovered with the theme homepage
• the modern homepage showcase page shows some before-and-after results for sites that have made the switch
• the modern homepage styling guide offers different styling options, unrelated to the theme styling

Follow the steps below to get the homepage setup:

Jump to:

• Create the Modern Homepage
• Page title: your site tagline
• Add an intro
• Trending Recipes
• Simple Category Index
• Search
• About
• Category 1
• Category 2
• Category 3
• Add category links
• Recent posts
• Hide breadcrumbs
• Disable social widgets
• Disable comments
• Custom Yoast meta
• Set the featured image
• Set the homepage
• Full Width
• Goals
• Show recently modified
• Newsletter
• Services
• Displaying specific posts
• Previously displayed posts
• Change the image size
• Set a default image size
• White Glove Conversion
• Convert the recipe index
• Troubleshooting
• Irregular image sizes
• Ads
• 💬 Comments

Create the Modern Homepage

The first step is to simply create a new WordPress page, using the block editor. Go to Admin > Pages > Add New

Name the page "Homepage", and in the right side bar, set "Visibility: Private" and hit "Publish".

Using the 3 dots in the top-right corner, select Editor > Code Editor

Then paste the Modern Homepage Template (opens in new window) into the code editor, and change back to the Visual Editor

Now that the structure is in place, we can start customizing the homepage.

Page title: your site tagline

We recommend using your site tagline as the homepage h1. To do this, simply click on the post title and edit it.

Add an intro

Following the site tagline, you should have a brief intro that explains what types of recipes you specialize in and what's most popular. Any common ingredients/themes?

Trending Recipes

Linking to your top-trafficked posts reinforces their importance to Google, helping them rank.

Use the id="" attribute to display the top 8 posts by ID.

Include a sentence or two about why your readers love these recipes.

Update: As of version 4.1.3, we now display the post ID in the admin bar:

This should make building the list of posts much simpler.

Simple Category Index

The simple category index allows you to display your most popular categories in a visual way, increasing your internal linking and supporting a modern site structure.

We recommend showing a grouping of categories here that are popular for your readers.

Search

If someone already knows what they're looking for, they should be able to search for it quickly and easily.

We've included the WordPress search block to make this easy for people. The button and label have been hidden on the front-end using CSS, but fully complies with accessibility standards.

About

This is nearly identical to the "User profile" widget in your side.

Add the user profile block:

With 80% of pageviews being on mobile, the sidebar "About" isn't shown until much later. It's important to provide your readers with information about yourself.

This is also a good place to link to any other services you offer:

• restaurant photography
• recipe development for magazines
• personal chef services
• weekly meal prep

Category 1

Choose a category to display 4 posts from, and include a sentence or two describing what makes this category so popular.

Category 2

Same as category 1, provide some relevant information about the recipes in this category.

Category 3

Same as the above categories, provide some context and show recipes from that category.

Add category links

You can optionally add a link out to each of the categories as well, as a simple paragraph with a hyperlink.

Here is the right arrow character: →

We opted not to build this into the shortcode itself, because there's a number of different ways people would want to customize the text. This is done very easily using the regular paragraph block.

Note: do not use anchor text such as "read more" or "see all" as this is bad for SEO.

At this time we recommend not using the "button" block because WordPress is actively working on it, and it's subject to unexpected updates. Use a regular hyperlink.

Recent posts

The Modern Homepage is a shift to topic-based displays, rather than recency. However, there's still a place for you to promote your most recent recipes. After all, some of your traffic is return visitors and subscribers.

Nothing really needs to be edited here - no content is needed talking about recent recipes or changes to the default shortcode.

Hide breadcrumbs

Because this is a page, it will display breadcrumbs by default. We've included CSS to hide Yoast breadcrumbs by default.

The 4.0.1 Feast Plugin update automatically removes the breadcrumbs from the homepage, removing the on-page CSS. No action needed here unless you're using Genesis Breadcrumbs.

If you haven't switched from Genesis breadcrumbs to Yoast breadcrumbs, we recommend doing so now.

Disable social widgets

You don't need people sharing the homepage.

If running Social Pug (Grow), scroll to the bottom and disable it in their settings.

Disable comments

You don't need people commenting on the homepage.

Custom Yoast meta

When you set a specific page as the homepage, Yoast uses that page's meta as the homepage. It's very important to have a custom title and description. Scroll down to the bottom of the page and craft a custom title and page description:

• Title tag guidelines from Moz
• Meta tag guidelines from Moz
• Set a 1200x1200 featured image of your logo in the right-side menu

Set the featured image

The featured image on the Modern Homepage is what gets used by social sharing sites when sharing your site. Make sure this is minimum 1200x1200px.

Set the homepage

Once you're happy with the homepage, you can set the visibility to public:

Then go to Admin > Settings > Reading and set the Your homepage displays to a static page and choose the name of your homepage (site tagline)

Finally, go to Appearances > Widgets and empty the Homepage: Above, Homepage: Middle and Homepage: Bottom widget areas.

Your homepage should then be live:

Note: after setting the homepage live, do not set it back to private. It needs to remain public.

Full Width

Follow this guide to convert the Modern Homepage to full width.

Goals

The goal of the Modern Homepage is to:

• Add the ability to surface more content, such as trending recipes, seasonal content and reader favorites
• Leverage the Simple Category Index to visually display categories, improving internal linking
• Add unique content to the homepage, rather than just duplicate post titles and descriptions
• Remove the need for the thin-content recipe index by turning the homepage into a recipe index
• Remove the "read more" tag, which is bad for SEO
• Remove the incorrect use of the <article> tag when displaying posts
• Remove the incorrect use of <h2> for post titles - these should be normal internal links
• Upgrade the widget title to h2, rather than the current h3
• Reduce DOM nodes - the Featured Posts widget uses 150 DOM nodes to display 10 posts, the new display posts shortcode uses 42
• Make it simpler to customize it to suit your needs

This supports an improved site structure with a homepage that reduces click depth by linking to both categories and more relevant posts. It organizes content in a way that makes sense to readers, while supporting the goals of the recipe developer.

"…we'll see the home page is really important, things linked from the home page are generally pretty important as well.

And then… as it moves away from the home page we'll think probably this is less critical."

That pages linked directly from the home page are important is fairly well known but it's worth repeating.  In a well organized website the major category pages and any other important pages are going to be linked from the home page."

John Mueller, Google

The modern homepage focuses not only on generating ad revenue by better surfacing recipes, but also building a following and providing ancillary services such as food photography for restaurants, recipe development for other publications, sponsored content work with food brands, and more.

The modern homepage is comprised of:

• popular/trending recipes: 8 posts (square)
• top categories list: 4 categories (circles)
• search bar
• featured category #1: 4 posts (square)
• featured category #2: 4 posts (square)
• featured category #3: 4 posts (square)
• about profile
• newsletter (optional)
• latest recipes: 4 (square)

Traditionally, the theme homepage and recipe index have all been thin/duplicate content.

To remedy this we're now recommending you include unique content within these new sections that describes to the reader why they're there.

Show recently modified

A common request we get is to show posts that were recently updated, so that they get re-crawled and a boost from being shown on the homepage. To do this, simply add the following attribute to the FSRI shortcode:

fsri orderby="modified"

Newsletter

The Genesis eNews widget doesn't have a shortcode equivalent, and most "forms" produced by newsletter companies are javascript-heavy. We haven't included a newsletter form on the homepage because of this.

One possibility is a "pop up" once a user scrolls to a certain point on the page, or simply a link to a newsletter sign up page like we do for Feast: https://feastdesignco.com/newsletter

Services

Many people offer other services, such as:

• food photography
• recipe development
• personal chef / weekly meal prep
• nutrition consulting

These are great to display on the homepage. If your services are set as pages on your site with a featured image, simply use:

fsri post_type="page" id="111,222,333,444"

Displaying specific posts

Sometimes you want to hand-select posts. This can be achieved with the "id" attribute:

fsri id="111,222,333,444"

Simply enter the post ID you'd like to display. By default, only posts (not pages) will work. This also ignores the "exclude previously displayed posts" rule.

Previously displayed posts

By default, any post previously displayed by the shortcode is excluded from being displayed again.

This is done to:

• show visitors the widest range of related posts possible
  • it's not a good user experience to see the same post repetitively
• maximizes your internal link equity, for site structure
  • it's not beneficial for SEO to have multiple links to the same post

But sometimes you want to show a specific post, even if it's already been displayed.

In general, we don't recommend disabling this, but you can use the show_previous attribute:

fsri exclude_previous="false"

Change the image size

You can select a different image size by using the image_size attribute, eg.

fsri image_size="feast-portrait-3x4-360x480"

Set a default image size

You can also set a default image_size.

To find which thumbnail sizes you have available to you, head to Admin > Tools > Regenerate Thumbnails (requires the Regenerate Thumbnails plugin)

Note: we recommend using the Modern Thumbnails - once enabled, you'll need to use the Regenerate Thumbnails plugin to generate the newly registered image sizes.

White Glove Conversion

Want to get the modern homepage set up on your site but don't have the time to tackle it? We have the Modern Homepage White Glove Conversion service for you.

Convert the recipe index

If your site contains more categories than you can reasonably fit on the homepage, you may want to convert the theme's recipe index into a category index instead.

See the Modern Recipe Index.

Q: can I change the number of categories and posts being displayed in each section?

Yes! You can adjust it any way you'd like. See the FSRI shortcode document.

Troubleshooting

Posts not displaying

This could be due to:

• the post was already previously displayed
• the post is not public (private, or password-protected)
• the post has been excluded by another plugin that modifies the core WordPress query

Images not displaying

• make sure you don't have webp images enabled (eg. Shortpixel, Imagify, WP Rocket)
• make sure you're not using anything that moves images elsewhere (eg. WP Offload Media)
• make sure Jetpack is not enabled
• if you don't have WP Recipe Maker, Create, or the Feast Plugin's Modern Thumbnails, you'll have to specify a thumbnail size to use with image_size="thumbnailhere"

Irregular image sizes

• set a default image size in the Feast Plugin
• run the regenerate thumbnails plugin on all featured images
• to avoid this in the future, follow the Modern Thumbnails tutorial to remove theme thumbnails and register the plugin's Modern Thumbnails

Blogfixer

If you have the blogfixer plugin installed, toggle it off for this page.

Push notifications

We don't know how to disable these. Recommend removing it entirely, or contacting the plugin developer.

Ads

We've included the tag to disable Mediavine ads on the homepage, but don't currently have the Adthrive code.

As a best practice we recommend not displaying ads on the homepage. The purpose of the homepage is to drive traffic to your actual posts, which can contain ads.

The homepage does not provide enough visitor value to be burdened with ads.

We do realize that the homepage of some sites generate a significant portion of pageviews, so to re-enable ads, remove this code from the "Custom HTML" section:

<div id="mediavine-settings" data-blacklist-all="1"></div>