How To Set Up Your Website Homepage With WordPress

Found this helpful? Please share it with your friends!

If you are building your small business website or blog for the first time, you are probably wondering how to set up your homepage. After all, your homepage is the first thing that visitors see when they arrive on your site so it’s important to make a great first impression!

The good news is that when you build your website with WordPress it is easy to customize your homepage so that it is not only functional but also beautiful!

In this tutorial, we’ll go over the different ways that you can set up your homepage. We’ll look at the differences between a blog-style homepage versus a static homepage and how to set up each one.

By the end of this tutorial, you should have your homepage all set up and ready to go!

Understanding the WordPress Homepage

Your website homepage is like the foyer of your website. Not only does it set the tone for your entire site but it also often gives visitors their first look at your brand. Along with being easy to navigate and explore, your website homepage should also give visitors a good idea of what your business is about and what you offer.

WordPress has two ways to set up your homepage:

Static Homepage

A static homepage is a page where your content doesn’t automatically update. So, you will need to make changes to your page if you would like to add something new such as an upcoming sale, a new product, etc.

WordPress Static Homepage
WordPress Static Homepage Design

Blog-style Homepage

A blog-style homepage automatically updates whenever you add new articles to your site. This is especially helpful if you regularly add new and relevant articles that your clients and website visitors enjoy and want quick and easy access to.

Blog-Style WordPress HomePage
Blog-Style Homepage

Of course, WordPress, allows you to have a static homepage with a blog section that updates automatically as well! Win-Win! I’ll show you how you can do this a little later in the tutorial 🙂

How To Display Either A Static Homepage Or A Blog-Style Homepage

WordPress makes it really easy to choose between the two homepage display settings. From your WordPress admin dashboard, click “Settings” > “Reading“.

The reading settings dashboard will open and here you will be able to choose the option that you prefer along with a couple of other basic options.

WordPress Homepage Settings
Homepage Settings

If you choose “Your Latest Posts“, you will need to select how many posts you would like to be displayed.

If you choose “Static Page“, you will need to choose which page you would like to use as your homepage and which page you would like to use as your blog page.

If you are using the Blocksy theme, you will also be able to make these changes from inside the theme customizer. You will find this option near the bottom of the customizer menu under “Homepage Settings“.

Blocksy theme homepage settings
Blocksy Theme Homepage Settings

The theme customizer will pretty much give you the same options as the WordPress admin dashboard, with the benefit of being able to preview the changes before going live.

Blocksy Theme Homepage Settings
Blocksy Homepage Settings

Static Homepages

How To Create A Static Homepage In WordPress

If you have been following along with these tutorials you will know that we are using the Blocksy theme and that we installed a starter site to help give the website-building process a head start as well as add dummy content to the site.

However, if you are using a different theme, it should also have created a homepage for you (usually your homepage will be named “Home” in the “Pages” dashboard).

If your theme has created a homepage for you then it is simply a matter of editing the page to your liking so that it reflects your business. You can do this by using the Gutenberg Block editor.

For a full tutorial on how to use the Gutenberg block editor, check out this article: How To Add Content To WordPress: The Gutenberg Block Editor

How To Create A Static Homepage From Scratch

If you would like to create a brand new website homepage from scratch then you can easily do this from the WordPress admin dashboard. Click “Pages” > “Add New“.

The Gutenberg block editor will open and you can start adding blocks to your page.

If you are using the Blocksy theme and you installed a starter site, then a really cool plugin called “Stackable” would have been installed for you. Stackable has a whole bunch of awesome, ready-built blocks that you can add to your pages so that you can build your homepage exactly the way you would like!

Stackable design library button
The Stackable Design Library

If you aren’t using the Blocksy theme, you can still use the Stackable plugin by installing it from your admin dashboard.

Stackable gutenberg blocks plugin
Stackable Gutenberg Blocks Plugin

When you click the “Design Libary” button, the library will open and you can choose blocks to add to your page. You will see there are a lot of blocks to choose from! Both paid and free. But don’t worry, there are a lot of free options if you are on a budget or just starting out!

Stackable design library
Stackable Design Libary

How To Add Blog Posts To Your Static Homepage

Let’s say you want the best of both worlds, a static page with a section that displays your most recent blog posts. You can easily do this using the Gutenberg blocks as well!

Both the standard Gutenberg blocks as well as the stackable blocks give you the option to add your posts to your home page. These are listed as “Latest Posts” and “Posts” respectively in the blocks editor.

How to add recent posts to the WordPress homepage
Gutenberg Blocks To Use To Display Posts On Your Homepage

In this example, let’s use the standard “Latest Posts” Gutenberg block to add our latest posts to our homepage.

This block looks really unimpressive when you first add it to your page. However, you can customize it in the block settings on the right-hand side of the page.

List of recent posts
Recent Posts Block

After a little customization, our block looks like this:

Formatted Recent Posts block
Recent Posts Block

You’ll find that often the standard Gutenberg blocks won’t give you all the options you may like to customize your blocks.

This is where a plugin like the “Stackable Gutenberg Blocks” comes in.

You will have a lot more options to customize and format your blocks so that they match well with your brand and theme.

Using the “Posts” block from Stackable you could format your posts block with some eye-catching hover effects, background colors, font formatting etc.

Stackable Recent Posts Block
Stackable Recent Posts Plugin

Blog-Style Homepages

How To Customize A Blog-Style Homepage

If you have decided to use a blog-style format for your page, then you will do any formatting from the theme customizer. As always, each theme will give you different options. However, if you are using the Blocksy theme then this is the process you will follow to format how your blog posts and articles are displayed.

Select “Blog Posts” from the Blocksy theme customizer menu (it is found under the “Post Types” section).

Blocksy Blog Posts Menu Item
Blocksy Blog Posts Menu Item

When the “Blog Posts” dashboard opens, you will see quite a few customization options for the look and feel of your posts. Let’s work through each of them

Page Title

Here you will be able to specify whether you would like your page title displayed or not. If you do, then you can customize the title’s look and feel by clicking on the little arrow to the right of the “Blog Title” block.

Blog Title Options
Blog Title Options

When the “Blog Title” dashboard opens you will see lots of formatting options (for a full breakdown of how to use these options, check out the tutorial on how to create pages in WordPress).

Blog Structure

The Blocksy theme comes with 5 different blog layout options to suit your needs:

  • Simple
  • Classic
  • Grid
  • Enhanced Grid
  • Gutenberg
Blocksy Blog Structure Dashboard
Blog Structure Options
Number Of Posts

Choose how many posts you would like to display on your page.

Cards Options
What are Cards?

In the Blocksy theme, cards are simply the summary of each of the posts or articles that are being displayed on your website. Usually, a card will consist of your feature image, article title, metadata, excerpt, and a read more button or link

How To Customize Cards

“Card options” is where you will be able to customize the look and feel of each post listing or card. You will be able to decide which card elements to display as well as what order they should be displayed in. You will also be able to change the fonts for each element if you would like to.

How to customize Blocksy cards
How To Customize Blocksy Cards
Page Elements

Under the “Page Elements” section you will be able to choose whether you would like to display a sidebar for your homepage as well as pagination for your posts. If you choose to activate either of these options you will be able to customize them by clicking on the little arrow to the right of the menu item.

Functionality Options

Under “Functionality Options“, you will be able to choose whether you would like to include a pretty nifty card reveal effect in your posts. Give it a try! There’s nothing like giving your articles and posts a little movement and pizazz!

How To Add A Menu Item For Your Homepage

If you are using a static homepage then you will want to create a menu item for your page so that your website visitors can easily navigate back to it if they need to.

For this example, I have created a new page called “New Homepage”. I will add this page to our main menu.

From your WordPress admin dashboard, click “Appearance” > “Menus“.

Select a menu to edit. In this case, I will choose “Main Menu“.

If there is already a “Home” menu item there you can delete it by selecting it and then click remove.

Select the page you would like to add to the menu from the dashboard on the left. In this case, it would be “New Homepage“.

Click “Add To Menu“.

The menu item will be added to the bottom of the menu so you will need to drag and drop it into place.

Click on the menu item and change the title in the “Navigation Label” box.

Click “Save Menu” when you are done.

How to add a homepage menu item
How To Add A Homepage Menu Item

Conclusion

WordPress gives you quite a few options when it comes to your homepage design! And if you use a good theme coupled with some awesome Gutenberg blocks, you can create just about any homepage you would like!

I hope that this tutorial has helped you set up your homepage! As always, if you have any trouble or have questions, drop them in the comments section below!

Leave a Reply

Your email address will not be published. Required fields are marked *