The homepage is the first thing a user sees when they visit your website. With an average attention span of only 8.25 seconds today, you have to make sure that your homepage attracts your users' attention enough for them to stick around.
In this WordPress quick tip, you’ll learn how to edit the home page in WordPress. This is a really important part of any website, and WordPress helps you deal with it in several ways. Let’s dive in!
How to Edit the Homepage in WordPress
Premium WordPress Themes and Plugins
Before we start: when setting up your WordPress website, you’ll want to explore the thousands of WordPress themes on ThemeForest and WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors.
WordPress Homepage Options
If we look at WordPress websites, you have two options for the display of your homepage. One is the default homepage that shows all your recent posts.
However, if you do not want to show your recent posts on the homepage, you can choose the second option: a static page which shows up on your website’s home screen.
The static page can then be edited using the WordPress editor and built-in or third-party themes.
This tutorial is dedicated to giving you a step-by-step guide on how to edit the WordPress homepage. By the end of this tutorial, you will definitely know how to make your homepage look just the way you want it to be, whether you are a developer or not.
Setting the WordPress Homepage
Before you begin editing, you need to choose between the two options for your WordPress homepage.
To do that, go to your WordPress dashboard and click Settings > Reading.
Here, you can see that you can either choose to have your latest posts show up on your homepage or go for a static homepage. We'll look at both options.
Chose to display your latest posts or select any static page from the drop-down menu to serve as a homepage for your website.
If this is a fresh WordPress installation, you will only have the option of Sample Page for your homepage. Note that you need to have at least one published page, or the static page option won't be enabled at all! Once you pick a page, click the save button and head over to your website to see your WordPress homepage.
If you are a beginner at WordPress, skip down to the "Editing Your Homepage for Beginners" section for some tips on how to edit and customize your homepage.
Display Latest Posts
If you select Your latest posts, your homepage will use the index.php from within your template files, and the output will show an archive of blog posts like this:
Editing the blog posts will change what’s actually output to the page, but to change the homepage template itself, we need to edit a file.
Go to Appearance > ThemeEditor from the WordPress admin, and in the sidebar you can find the file you want to edit (highlighted in this case by the fact that it’s the Main Index Template):
If you select the file, it will be opened up in the editor window. What you see is all the PHP and HTML responsible for outputting the posts on what’s currently your homepage.
To edit this file, make your changes in the editor window and click Update File. But be warned! I don’t recommend making changes directly to these files if you have no experience working with PHP. This file editor does run a code check before saving your changes, but you’re editing the live website and could make some problematic changes!
A safer way to make changes like this is to open the file in a code editor, on your local computer system, and upload the changed file to the web server via FTP. The index.php file we’re editing here can be found in your WordPress installation under wp_content/themes/your_theme/index.php.
To learn more about how this works, I go into more detail in this tutorial:
Display a Static Page
Going back to our original settings, we might also have stated that our homepage should be a static page. In this case we select, from the dropdown, the page we want to act as our WordPress homepage.
Editing the content of the page is as easy as going to Pages > your_page and changing the content.
Editing Your Homepage for Beginners
To start editing your homepage, open the Pages tab from the left panel. All of your pages will show up here. You can see the page you just created. Hover your mouse on that page. Now, select Edit. Make sure that you click on Edit here and not Quick Edit to access all editing options.
Clicking on Edit will take you to your homepage. This is where you’ll get to make changes to its design.
Select the blue + icon on the top left, and WordPress will present you with numerous editing options for your page. Everything that is visible on a WordPress page is placed inside blocks. By clicking on the + icon, you can add more blocks to your page, edit them along the way, and delete them if you’re not satisfied with them.
All the editing options are divided into groups. You’ll have options for adding text, media, graphics, widgets, and so on.
Apart from these basic editing options, which are easy to access and understand, you might still want to make your homepage look better.
Customizing Your Homepage Style Without Coding
WordPress allows you to change the theme of your website without any coding. It has a lot of pre-downloaded themes for you. However, you can still download more themes and test them to see which one suits your website best.
Note that the theme is set for the entire website and not just the homepage.
To add a new theme to your WordPress website, open the dashboard again and head to the Appearance section. You can select any of the present themes or click on Add New to download another theme. Once you’ve picked a theme of your choice, click Activate.
Next, open the Customization menu, and you’ll see all of your customization options along with the active theme on your left.
Different WordPress themes come with different customization options. However, there are a few options that are consistent across all themes.
One of these is Site Identity. Site identity allows you to:
- Add a logo to your website.
- Change its title.
- Add or edit its tagline.
Another customization option consistent across all the themes is changing the color for buttons, links, featured images, etc.
As for menus, you can add your socials to them or add other buttons that you would like to display on your homepage.
Easily Customize Your Homepage With Elementor
Up till now, we’ve only used WordPress’s built-in customization options. However, this has limitations, and you cannot go the extra mile while using WordPress to edit the homepage if are aiming for a professional website.
This is where the Elementor Website Builder comes in. Elementor is a plugin built for WordPress websites that helps you build your website by providing you with additional tools which the original WordPress dashboard lacks.
To install the Elementor Website Builder plugin, open the plugins menu and select Add New. Search for Elementor Website Builder using the search bar. Install the first plugin that pops up. It will take a few minutes for the download to finish. Once it is downloaded, activate it. The Elementor plugin will then show up in the navigation panel of WordPress on the left.
Note that not all themes can be edited using Elementor. You have to choose an Elementor-ready theme. There are a few on WordPress.org and many high-quality Elementor themes on ThemeForest.
Activate an Elementor-friendly theme, and then open the website. Upon clicking the Edit Page option, you’ll find a button that says Edit with Elementor.
In the Elementor editor, you’ll see some amazing editing options with the easy drag-and-drop feature.
Taking an example of a button, you get to set its color, add motion effects, and much more. You can even adjust its responsiveness—that is, if you want it to disappear when someone opens the website on a mobile phone, you can easily do that using the Elementor editor.
It's fair to say that if you want a simple website to serve your purpose, opt for an Elementor-friendly theme. It is a simple and quick way to add that extra definition to your website and make it more appealing than you can with the original WordPress editor.
Learn more about Elementor here on Envato Tuts+.
- ElementorHow to Create an Elementor Landing Page for WordPressAdi Purdila
- Elementor20 Elementor Landing Page Templates for WordPress (to Improve Conversion)Eric Karkovack
- WordPressHow to Build a WordPress Website With ElementorAdi Purdila
- ElementorHow to Use Elementor Templates: A 101 IntroEric Karkovack
Advanced Homepage Customization
You can also change the template your homepage page is using. Go to Page Attributes > Template and select one of the templates in the dropdown list.
Depending on the templates the theme author has created, this will enable you to display the homepage in different ways.
The default template you see here will appear as standard, and the file to edit (like we did earlier) will be singular.php in your theme’s root folder.
That’s How to Change the Homepage in WordPress
So that wraps things up for this quick tip! To change the homepage in WordPress:
- First, make sure you know whether you’re displaying blog posts or a static page by going to Settings > Reading.
- If you’re displaying blog posts, you can most likely edit the index.php file. Check this is the case by going to Appearance > ThemeEditor and seeing which file is assigned as the homepage.
- If you’re using a static page as the homepage, you can edit the contents directly in the page editor.
- Customize your static page with the Customizer, new themes, Elementor, or the singular.php file if you want to change the code in the default page template.
- You can also select which page template is used by going to the Page Attributes section in the sidebar of the page editor.
Stay tuned for more WordPress quick tips!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post