Skip to content



How To Create A Static Home Page

A friend of mine recently asked me how to move her blog posts off of the front page of her WordPress site. Why? Well, not every WordPress site needs to be a blog, and even if yours is, that doesn’t mean your blog posts need to be the first thing your visitors see. Plenty of WordPress users have sites that require a welcome message or video and move the blog posts to a secondary page, while other users don’t blog at all!

Today we’re going to over over the steps to rearrange your site so you’re blog posts are moved off of the home page, and placed on a new page with whatever title you want.

The first thing you’re going to want to do is take a look at your theme. If there is a “Home” link already built into your theme’s navigation, we’ll need to exclude the new home page so you don’t end up with two links to the same page.

Create Your New Pages

The next step is to create the two new pages we’ll need: One to serve as the home page, and one for bloc posts. Click on “Add New” under the pages module on the left hand side of the dashboard. For the new “Home” page, you can use whatever title you like. Since we’re probably going to be hiding this page on the navbar, the only place this title will be visible is on the page itself. Keep in mind that since this is going to be your home page, that title will be the first thing visitors see.

Add whatever content you want to display on this page (or you can leave it blank to fill in later) and click the “Publish” button.

Next up is our posts page. Repeat the process to create your blog page, only this time remember that the title will appear in the navigation bar. You should choose whoever title toy think will entice people to click through to your posts, but it can be anything from “Updates,” or “Blog” to “Things My Cat Did This Week.”

Whatever you want.

You are also going to skip the step of filling in content on this page, since it’s just going to fill in with your bog posts.

Change Your Front Page/Posts Page Settings

Now that you’ve created your two new pages, let’s put them to work!

Open the “Settings” module at the bottom of the dashboard. From the list of settings, select “Reading.”

These settings will change the front page of your blog

These settings will change the front page of your blog

The first section of this page is where the magic happens. The line that says “Front page dislays” will have two options. The current, default setting is to display blog posts. You want to click the second option to display a static page.

You must now use the two drop downs to select which page you want to use for your front page, and which page you want to use as your posts page. Hint: these are the pages we just finished creating ;)

Once you’ve selected your new pages, save the settings at the bottom of the page and load your blog site. You should see your new home page as the first to load, and both of your new pages should appear in the navigation bar.

The only problem is that now you have your old “Home” link, (assuming your theme had one) and a link to your new front page – both of which take you to the same place!

This is an easy fix, but it does involve modifying a little bit of code. The code we need to modify is in the header.php file, so go and save a backup of that file somewhere on your computer to be safe. Whenever you modify the code for you theme always have a backup of the original handy in case something goes wrong. Trust me, there will be a day that you are very glad you’ve developed this habit.

Excluding The Extra “Home” Link

This step involves editing your theme’s header.php file, and there are a couple of ways to go about doing this.

First off, you can download the file with an FTP client. Then you can open it up in your favorite text editor, make the changes and then upload the new version. The file will be located in the folder for your current theme, which is in public_html/wp-content/themes/.

The second option is to edit the file directly from the dashboard. Under the “Appearance” module you’ll find an “Editor” link. This will allow you to modify all of the files that make up your theme. Locate header.php in the list to the right, and you’ll be able to modify it.

Whichever option you choose, make sure you save a backup copy of the header.php file. That way, if anything goes wrong, you can go back to square one.

Once you’ve accessed the file, you’re going to look for this template tag:

 wp_list_pages('title_li=&sort_column=menu_order&depth=1'); 

This tag may not be exactly identical in your theme, some of the parameters may be different. That’s okay, because every theme is different. What we need to do is add an exclude parameter to hide the new home page. Now that we have our list_pages tag, the only thing we’re missing is the ID of the page we want to exclude.

To find this, we need to head back over to the blog for a moment, and pull up the “Edit Pages” screen (under the “Pages” module of the dashboard. Find the page you want to exclude (your home new home page) and hover your cursor over the title. At the bottom of your screen, where your browser displays the destination of the link, you’ll see URL that looks a bit like the one below (click for a larger image).

The number at the end of the URL is your Page ID

The number at the end of the URL is your Page ID

At the end of the URL, you’ll see a number: ID=1234. This number is the ID of the post/page in question, and it’s what we need to exclude from our header.php file. In my case, the ID number is ’43.’

Now we need to jump back over to our text editor and add the exclude parameter to our wp_list_pages tag, leaving us with this:

wp_list_pages('exclude=43&title_li=&sort_column=menu_order&depth=1');

You’ll notice that the only change is adding ‘exclude=43& to the beginning of the parameter string. It’s important that this gets placed inside the quotation mark, and that you don’t forget the ampersand (&). You can also exclude multiple pages if you want by separating them with commas:

wp_list_pages('exclude=43,57,66&title_li=&sort_column=menu_order&depth=1');

Save and replace this file (don’t forget to hold onto your backup until you are sure everything is working!) and load your home page. You now have your new home page displaying first, without the duplicate link in your navigation bar!

There is a video version of this tutorial in the Private Video Library, which you can access by entering your name and email address in the form on this page!

Hope this article helped, feel free to leave any questions in the comments!


14 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. David says

    Chad. This was a very timely post for me as I was thinking about creating a static home page for my new WP. However, I am very new to WP, blogging and coding and I have a question.

    I understand your instructions to:

    “All you need to do is open your theme’s header.php file in your favorite text editor, and look for the this template tag:”

    Chad I don’t think I know where to access the header.php file – cpanel ? or Dashboard ?

    Would it be possible for your to clarify and better define how a newbie is to access that part of your training. Thanks so much.

  2. Chad says

    Hi David,

    Great question! I’ll go in and update the post to clarify that point :)

    Basically, you have a couple of options. First, you can use and FTP client (I like FileZilla, personally) to download the file to your computer, make the changes, and then upload the new version back to your server. header.php will be in your current theme’s folder. If you aren’t familiar with FTP, I’d recommend option 2:

    Under the “Appearance” module of the dashboard, there is an “Editor” option. This will give you direct access to all of the files that make up your theme – and allow you to edit them, right within your dashboard.

    As always, be sure to save a backup copy of the original code in case anything goes wrong!

    Let me know if you need any more help!

  3. David says

    Hi Chad. Thanks for your clarification on that one point. It was very clear and helpful and I was able to access the header.php code. However, I was unable to find anything close to resembling the template tag you gave. I am working with the Frugal theme and will contact the developer about how best to create a static page with his theme. Thanks again for your help, Chad. I look forward to seeing more of your tutorials.

  4. Chad says

    Hi David

    Glad you were able to find the file.

    I took a look at Frugal. Since it has so many customizable options, I’m guessing the code is probably buried in a function somewhere. I watched the theme’s demo video, and it looks like there is a section on the Frugal Header/Navbar Options screen that will let you hide pages from displaying by entering their ID, which actually makes it easier for you :)

    Editing the code will only be necessary on a theme that doesn’t provide built in options for hiding pages from the navbar.

    Good Luck! :)

  5. Greg says

    I know I’m a bit late to the party on this post, but what about the fact that if you use a static page for your homepage, that static page loses its title tag?

    Whenever I use a static page as the homepage, the title tag simply shows the URL of the site, which isn’t very professional considering that’s the first page people are going to see (depending on the type of site you’re running, of course).

    Although I can see some recognition benefits if people bookmark that particular page, I still wish WP would fix this.

  6. Chad says

    @Greg

    I can definitely see how that would be frustrating… I wouldn’t to loose my carefully selected title tags either! :)

    Generally, the content of your title tag is actually going to be controlled by the theme you are using, and not necessarily WP itself. It sounds like whatever page you are selecting as your “home” page is using a template that doesn’t supply a title tag for your browser to use – which is why you’re seeing your URL instead.

    I’d recommend double checking your theme’s home.php (if it has one) and index.php templates to make sure the tags are filled in with the information you want.

    Feel free to post your URL and theme info if you’re still working on fixing this :)

  7. melissa says

    Chad, i set up my static home page and now i have my blog page set up as well. only problem is when i am in the blog page there is no link back to the home page. so i would have to “search” in the search box for the word “home” to get there. please help.

  8. Chad says

    @melissa

    It sounds like you are dealing with a theme that didn’t have a “Home” button built in. If that’s the case, you’ll want to skip the step where we excluded your new homepage from the navbar – since your theme doesn’t already have one, you want the page you just created to be listed there.

  9. Rosa Chaves says

    the explanation is excellent it helped me a lot, I’m following the second method because I’m not familiar with FTP.

    My problem: After changing the code can not save it; wen I do upload it cames back to the initial code .. what am I doing wrong?! My basic template is the Imbalance – http://wpshower.com/demo/?theme=imbalance

  10. Rosa Chaves says

    Another question, nothing to do with the theme:

    the template I chose (IMBALANCE) does not have the behavior I am checking on mine and I don’t like it: when you move your mouse over the menu page that is open to align it moves to the beginning the next menu (not sure if I was clear) .. can you explain why? and how can I undo this “movement” by keeping the alignments on the left?

    Thanks

  11. Chad says

    @Rosa Chaves

    It’s hard to say what might be causing your theme editor to fail when saving. Are you running the newest version of WordPress? If not, try upgrading.

    If you have already upgraded, try disabling plugins. Perhaps one (or a combination) of them are getting in the way?

    Let me know if you have any luck!

  12. Chad says

    @Rosa Chaves

    Hi again Rosa! :)

    Sounds like you’re saying that when you hover over the name of the currently open page in your nav menu, it shifts to the right so it’s almost touching the next page’s name.

    If that’s the case, there’s probably something messed up in the CSS. I looked at the demo link you sent, and this is what the CSS for the nav links looks like:

    #cats li a {     float: left;     line-height: 50px;     text-decoration: none !important; }

    Based on what you’re describing, there’s probably a

    #cats li a:hover

    entry somewhere that’s changing the alignment.

    Hard to say more specifically without looking at your actual site to check things out. Feel free to post a URL if you want!

  13. Jane says

    Chad, this is helpful, thanks. I wonder if you can solve an associated problem?
    I moved my blog after testing it (I had a long term site running and the blog replaces that). I have now *almost* moved the new blog but I have a problem the HOME link still has the ‘old’ test url:
    http://www.janeprophet.com/blog

    rather than the new URL
    http://www.janeprophet.com

    I cannot find the url in the header.php, or anywhere else! Can you give me any advice as to how I might edit it?

    Thanks

    Jane

  14. Chad says

    @Jane

    If I had to guess, since you can’t find that URL in your header anywhere, the link is just being populated by a function or template tag. It must be pulling the “Home” address from your blog settings.

    If you look under the “General” settings for your blog, does your “Site URL” still display the old “test” address? If so, take a look at this WordPress.org page: http://codex.wordpress.org/Moving_WordPress If might help, depending on what steps you took when moving your site initially.

    Moving WordPress can be tricky, so make sure you’ve read the instructions completely before proceeding, and make sure you have everything thoroughly backed up!



Some HTML is OK

or, reply to this post via trackback.