How To Set Up Your Website Homepage With WordPress
This Article Is Part Of Our "Build Your Own Website" Series.
If You Would Like To Learn How To Build Your Website From Scratch Then Check Out This Link.
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.
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.
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 🙂
|
FREE CHECKLIST Sign up for our newsletter and get our free website-building checklist! Easily keep track of your progress and make sure you’ve covered all the important steps as you build your own website. |
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.
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“.
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.
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!
If you aren’t using the Blocksy theme, you can still use the Stackable plugin by installing it from your admin dashboard.
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!
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.
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.
After a little customization, our block looks like this:
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.
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).
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.
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
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.
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.
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!
