SEO Tip #8: Blogger Optimized Homepage With Blocks

Out of the box most themes will give a pretty boring homepage that features a sidebar and feed of recent posts. To get a more modern design that’s full-width and features more dynamic content such as feeds of posts pulled from categories, newsletter signups, search boxes, author boxes and more usually requires paying for a developer or installing a clunky pagebuilder right? No! You can build the sleek new homepage of your dreams very easily and do it completely free and not need to know any kind of coding, in this tutorial we’ll show you how 🙂

Step 1: Get a new PAGE setup.

Head over to your wp-admin, go to the Pages section, click “add new”:

Name the page (you can Publish it so it’s alive/saved from now on):

Step 2: Let’s get building!

A good homepage for a blog should showcase your content and help drive visitors to targeted content. We can do that by using a variety of “post feed” blocks based on categories and we can add links to popular category archives and add search boxes and other E.A.T. (Expertise, Authority, Trust) features as well such as an author box! Here’s a basic wireframe of what we’re shooting for:

We can add more to this, but this is a good place to start. The next steps are pretty self explanatory, you can see in the graphic how each element is just a regular Gutenberg block. Starting with a heading block > then a paragraph block > then a latest posts block > then a “custom html” block that has some code in it to add email signup > then another heading block > then a column block set to 4 columns and in each column an image block is set and that image is set in the block settings to be a circle and it’s linked to categories > and on and on… If you don’t want to go through the process of adding each block yourself, here’s a template you can use:

<!-- wp:heading {"style":{"color":{"text":"#f85350"},"typography":{"fontSize":45}}} -->
<h2 class="has-text-color" id="h-latest-posts" style="color:#f85350;font-size:45px">Latest posts</h2>
<!-- /wp:heading -->

<!-- wp:genesis-blocks/gb-post-grid {"categories":"1"} /-->

<!-- wp:html -->
<div class="homesignup">
<p><strong>Never miss a new post</strong> Get the latest weekly content delivered right to your inbox!</p><a class="button" href="#">SIGN UP</a>
</div>
<!-- /wp:html -->

<!-- wp:genesis-blocks/gb-spacer -->
<div style="color:#ddd" class="wp-block-genesis-blocks-gb-spacer gb-block-spacer gb-divider-solid gb-divider-size-1"><hr style="height:30px"/></div>
<!-- /wp:genesis-blocks/gb-spacer -->

<!-- wp:genesis-blocks/gb-columns {"columns":4,"layout":"gb-4-col-equal"} -->
<div class="wp-block-genesis-blocks-gb-columns gb-layout-columns-4 gb-4-col-equal"><div class="gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column"><!-- wp:genesis-blocks/gb-column -->
<div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:image {"id":16843,"linkDestination":"custom","className":"size-large is-style-rounded"} -->
<figure class="wp-block-image size-large is-style-rounded"><a href="#"><img src="https://via.placeholder.com/250.jpg" alt="category 1 graphic" class="wp-image-16843"/></a><figcaption>CATEGORY 1</figcaption></figure>
<!-- /wp:image --></div></div>
<!-- /wp:genesis-blocks/gb-column -->

<!-- wp:genesis-blocks/gb-column -->
<div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:image {"id":16844,"linkDestination":"custom","className":"size-large is-style-rounded"} -->
<figure class="wp-block-image size-large is-style-rounded"><a href="#"><img src="https://via.placeholder.com/250.jpg" alt="category 2 graphic" class="wp-image-16844"/></a><figcaption>CATEGORY 2</figcaption></figure>
<!-- /wp:image --></div></div>
<!-- /wp:genesis-blocks/gb-column -->

<!-- wp:genesis-blocks/gb-column -->
<div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:image {"id":16846,"linkDestination":"custom","className":"size-large is-style-rounded"} -->
<figure class="wp-block-image size-large is-style-rounded"><a href="#"><img src="https://via.placeholder.com/250.jpg" alt="category 3 graphic" class="wp-image-16846"/></a><figcaption>CATEGORY 3</figcaption></figure>
<!-- /wp:image --></div></div>
<!-- /wp:genesis-blocks/gb-column -->

<!-- wp:genesis-blocks/gb-column -->
<div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:image {"id":16845,"linkDestination":"custom","className":"size-large is-style-rounded"} -->
<figure class="wp-block-image size-large is-style-rounded"><a href="#"><img src="https://via.placeholder.com/250.jpg" alt="category 4 graphic" class="wp-image-16845"/></a><figcaption>CATEGORY 4</figcaption></figure>
<!-- /wp:image --></div></div>
<!-- /wp:genesis-blocks/gb-column --></div></div>
<!-- /wp:genesis-blocks/gb-columns -->

<!-- wp:search {"label":"Find a post!","showLabel":false,"placeholder":"FIND ANYTHING HERE!","buttonText":"Search"} /-->

<!-- wp:genesis-blocks/gb-spacer -->
<div style="color:#ddd" class="wp-block-genesis-blocks-gb-spacer gb-block-spacer gb-divider-solid gb-divider-size-1"><hr style="height:30px"/></div>
<!-- /wp:genesis-blocks/gb-spacer -->

<!-- wp:genesis-blocks/gb-columns {"columns":2,"layout":"gb-2-col-wideright"} -->
<div class="wp-block-genesis-blocks-gb-columns gb-layout-columns-2 gb-2-col-wideright"><div class="gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column"><!-- wp:genesis-blocks/gb-column -->
<div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:image {"align":"center","id":16777,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large"><img src="https://via.placeholder.com/250.jpg" alt="about me image" class="wp-image-16777"/></figure></div>
<!-- /wp:image --></div></div>
<!-- /wp:genesis-blocks/gb-column -->

<!-- wp:genesis-blocks/gb-column -->
<div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:heading {"style":{"color":{"text":"#f85350"}}} -->
<h2 class="has-text-color" id="h-hi-i-m-wptechs" style="color:#f85350">Hi, I'm WPTechs!</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":24}}} -->
<p style="font-size:24px">We love to build powerful infrastructure that drives powerful apps!</p>
<!-- /wp:paragraph -->

<!-- wp:genesis-blocks/gb-button {"buttonText":"Learn more","buttonBackgroundColor":"#f85350"} -->
<div class="wp-block-genesis-blocks-gb-button gb-block-button"><a href="/about-me/" class="gb-button gb-button-shape-rounded gb-button-size-medium" style="color:#ffffff;background-color:#f85350">Learn more</a></div>
<!-- /wp:genesis-blocks/gb-button --></div></div>
<!-- /wp:genesis-blocks/gb-column --></div></div>
<!-- /wp:genesis-blocks/gb-columns -->

<!-- wp:heading {"style":{"color":{"text":"#f85350"}}} -->
<h2 class="has-text-color" id="h-categoryname1" style="color:#f85350">Category Name 1</h2>
<!-- /wp:heading -->

<!-- wp:genesis-blocks/gb-post-grid {"categories":"1854","className":"row4","postsToShow":4,"displayPostDate":false,"displayPostExcerpt":false,"displayPostAuthor":false,"displayPostLink":false,"columns":4,"imageSize":"grid-home2"} /-->

<!-- wp:html -->
<p class="more-from-category"><a href="#" title="readmorelinktitle">View More</a></p>
<!-- /wp:html -->

<!-- wp:heading {"style":{"color":{"text":"#f85350"}}} -->
<h2 class="has-text-color" id="h-categoryname2" style="color:#f85350">Category Name 2</h2>
<!-- /wp:heading -->

<!-- wp:genesis-blocks/gb-post-grid {"categories":"669","className":"row4","postsToShow":4,"displayPostDate":false,"displayPostExcerpt":false,"displayPostAuthor":false,"displayPostLink":false,"columns":4,"imageSize":"grid-home2"} /-->

<!-- wp:html -->
<p class="more-from-category"><a href="#" title="readmorelinktitle">View More</a></p>
<!-- /wp:html -->

<!-- wp:heading {"style":{"color":{"text":"#f85350"}}} -->
<h2 class="has-text-color" id="h-categoryname3" style="color:#f85350">Category Name 3</h2>
<!-- /wp:heading -->

<!-- wp:genesis-blocks/gb-post-grid {"categories":"612","className":"row4","postsToShow":4,"displayPostDate":false,"displayPostExcerpt":false,"displayPostAuthor":false,"displayPostLink":false,"columns":4,"imageSize":"grid-home2"} /-->

<!-- wp:html -->
<p class="more-from-category"><a href="#" title="readmorelinktitle">View More</a></p>
<!-- /wp:html -->

Prep Work

Before we begin using that template on your new homepage, you’ll need to install a plugin. We’re using the free Genesis Blocks plugin, which you can use on any theme. It will add new blocks we’ll want to use on this new homepage that has advanced features such as pulling feeds of posts based on category and displaying them in a nice grid: https://wordpress.org/plugins/genesis-blocks/

Note: Genesis Blocks plugin is just our preferred plugin in this tutorial for advanced blocks, there are many other similar plugins that have advanced blocks that works well too such as Ultimate Addons For Gutenberg or Kadence Blocks. However, if you use one of those alternative blocks plugins then you will need to adjust the template we’re going to use to build this homepage as it is coded to use the Genesis Blocks plugin specifically.

1.) To use that template, first step is to change your new Page into “html/code mode” like this:

2.) Next up, you’ll want to paste the code from that template into your Page like this:

3.) Now switch back to the Visual Editor (AKA blocks editor, gutenberg editor, etc):

4.) The next steps are to go through each section and customize to suit, click on the first block “genesis blocks post and page grid” and update the config in the sidebar:

Note: for the Genesis Blocks Post and Page Grid block we like to add either no category for the first block (so it will just pull the latest posts), then set number of items to 4 and columns also to 4. Now you should have 4 posts nicely spaced in a row.

You’ll want to edit the settings tab in the sidebar for this widget so that the posts it pulls will only display the featured image (use the dropdown selector to pick a good/correctly sized thumbnail, a 250×250 thumbnail works good) and post title, turn off everything else:

The next widget is a custom html block and inside is a simple section where you can have a link to your newsletter signup page. If you don’t have a specific page dedicated to a signup form then you can go make one real quick, or just plop your normal email signup form embed code here. We’ll include some CSS to add that will style this section so it looks nice like this on the frontend:

You can customize the CSS included below to match your specific site colors, this signup form section for example can have the green background color update by changing the color code on this line:

The #53bd0 is the color code being used in the CSS for that signup form for its background color, you can change that to match your logo/theme colors.

The next section is fairly self-explanatory, just click on an image, replace it with an image that can represent one of your popular categories (250×250 square works good here), then link the image to your category, then write the category name in the caption area, then repeat for each of the categories in this section:

Next up is a search box, you can customize the text inside the search box if you like, just click on the text and delete/type what you want here “search for recipes”, “find a DIY project” etc.

The next section is an author box, you can introduce yourself to your audience with a brief explanation about why you blog and what visitors can expect to find useful about your site, update the picture and button link and the heading/text content:

Next up you can customize the post feeds based on categories. In the template we only used 3 sections for this, but you can use 4-5 sections if you like. Update the heading, the Genesis Blocks Post and Page Grid block, and lastly the link for a “view more” button:

That’s it, you’re done! You now have a basic modern homepage built using WordPress blocks. The next and last thing to do is add some custom CSS that will style certain elements on this page and pretty things up a bit, this last part is really easy 🙂

Custom CSS for your homepage

This CSS does a few cool things such as style your email signup box, style your post feeds and categories so they will display in 2 columns and tidies up a few other various sections such as centering image captions, removing underline css on button links, and on many themes this CSS will also hide the sidebar and stretch your main content area to 100%/full-width. Some themes may have a “template” you can select to give a Page full-width, if not then hiding the sidebar and stretching the content area with overriding CSS is a suitable fix. The last two lines of this custom CSS are the class selectors meant to hide the sidebar and stretch the content full-width, depending on your theme it may require inspecting the html of your Pages to find out what custom class selectors your theme is using, these defaults should work on 90% of cases though – feel welcomed to email if you need help figuring this out [email protected].

<style>
figcaption {text-align:center;}
a.button {text-decoration: none !important;}
.button {display: inline-block; padding: 10px !important; margin: 5px 0;background-color: #fff !important; color: #59b6a9 !important;}
.button:hover {background-color: #fff !important; color: #59b6a9 !important;}
.has-text-align-right.marginup {margin: -50px 0 0 !important;}
.more-from-category {text-align: right;}
h3 {font-size: 16px !important;}
.aligncenter img {margin: 0 auto 10px !important;}
.gb-block-post-grid .gb-block-post-grid-image {margin-bottom: 0 !important;}
.wp-block-search__inside-wrapper button {border: none !important;}
.searchhome {border: 3px solid #53bdb0;}
.homesignup {background-color: #53bdb0;padding: 5px;}
.homesignup p {display: inline-block; width: 80%; margin: 10px !important; color: #fff;}
.homesignup button {}
@media only screen and (max-width:768px) {
.homesignup p {width: 100% !important; display: block !important; text-align:center;}
.homesignup .button {margin: 0 10% 10px !important; text-align: center !important; display: block !important;}
}
@media only screen and (max-width:768px) {
 .gb-block-post-grid div[class*=columns].is-grid, .gb-block-post-grid div[class*=columns].gb-is-grid {-ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;}
.firstsetboxes .gb-post-grid-items {display: block; !important;}
}
@media only screen and (max-width: 768px){
.gb-layout-columns-4>.gb-layout-column-wrap.gb-is-responsive-column {grid-template-rows: auto; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-areas: "col1 col2" "col3 col4";}
}
.sidebar {display: none !important;}
.content {width: 100% !important;}
</style>

You can insert this CSS into your homepage a number of ways. The easiest is just paste it into a custom html block right in the page like this:

Then paste the CSS into the block:

Depending on your theme, you might also be able to insert it into the header. In Genesis Framework based themes for example, there is a section at the bottom of the page editor where you can insert code directly into the head of the page, this is ideal for pagespeed, just copy/paste the custom CSS right in there like this:

The last-last step, change WordPress settings to set your newly built Page as the homepage.

In your general settings in wp-admin, you can set homepage. just go to Settings>Reading and select your newly built page to be the new homepage like this:

A note about themes that use a widget-based homepage: If you have widgets in the homepage widget areas then the theme will force those to continue running your homepage, so to get your new homepage to go into affect then you will likely need to remove those widgets, here’s an example of those usually look:

Recap

Building an advanced homepage that’s optimized for a blog is pretty simple when you take it step-by-step, use our template and you’ll be done in no time! Due to certain quirks in different themes, some parts of the tutorial may not work exactly as intended without some tweaking, if you have any trouble with part of this tutorial feel welcomed to reach out at [email protected] and we’ll try to help 🙂