Creating a static front page on your WordPress blog

Tip: Need a Web page? Take advantage of our qualified engineering staff, and contact us today!

If you want a static home page in your WordPress blog, trust me, you’re not alone. I’ve been looking for a solution to this all my life. All solutions I found had problems.

So I invented a new technique. This technique just requires you to drop a file into your theme folder. It uses no kludges, doesn’t mess with the WordPress internals, and lets you use WordPress as a true CMS with a regular front page. It will also save you from editing your theme — at the very most, you may want to place a link to the blog in your theme, but that’s not even required.

Since WordPress 2.1, there’s an option in the Reading options panel that lets you select a static page as the front page. It’s quite useful, but this technique is more flexible, and a variation of this technique can be used to redirect to a static page, for example.

The home page problem

So what’s the home page problem?

It’s simple. I want both a blog and a home page, running on WordPress. To the effect, I create a static page, which serves as the “home page”. But that’s not enough. For a true home page:

  • People who visit your site’s main URL should be greeted by the designated static home page.
  • People who want to read the blog entries should be able to. It’s okay if the blog entries list is to be read through a separate URL.

Read on to find what’s wrong with currently available solutions.

Or, if you’re in a hurry, jump to the solution immediately.

Existing solutions… and problems!

Most “home page” techniques or plugins (such as this) attempt to simulate the effect by mixing a couple of techniques, including the famous “sticky” post technique: bubble a post atop the loop, and let the theme display it.

Sticky plugins (I even wrote a plugin to do this) don’t cut it, because:

  • Most of them alter the posts shown on the loop but they don’t really show a “home page” without posts.
  • Weird problemas arise from the loop modification code.
  • People going to http://yourblog.com/ will be shown the “home page”, but then a list of posts appears. There’s no “separate blog page”.
  • The links on your theme aren’t updated. If your theme has a “Home” link, it won’t go to the true “home page”.
  • Dynamic page listings show your designated home page, so now you have two distinct home pages with the same content: one on the page list, and another on the front page of your blog. A horrible wart!
  • Themes act weird. The is_home() function evaluates to true when visiting the home page through the main URL, but is false when visiting it through the static page advertised in page lists.

Of course, heavy theme modification is out, since I’d rather maintain the third-party theme mostly untouched.

And I’m sure these caveats also apply to you.

The solution

For those of you in a hurry, here it is:

<?php

$homepage = get_option('siteurl')."/home/"; global $wp; $wp_received_argument = false; foreach ($wp->query_vars as $k=>$v) if ($v) $wp_received_argument = true;

if ($wp_received_argument) require(TEMPLATEPATH . "/index.php"); else { wp_redirect($homepage); exit(); }

?>

Place that code on a file named home.php in your current theme folder. That is, wp-content/themes/your theme. If your theme already has a home.php file, back it up and replace it.

Now, people and search engines visiting your blog’s front page will be automatically redirected to the URL in the variable $homepage. That URL can point anywhere — in my case, I’m pointing to one of my WordPress static pages. In the code example, is http://yoursite.com/home/. Adjust to your liking.

But what about blog readers? Easy. http://yoursite.com/page/1/ shows the first page of posts, just like your old trusty blog front page. Of course, this assumes that you’re using pretty permalinks, otherwise the front blog page would be http://yoursite.com/?page=1.

Now all you need to do is edit your theme template or home page, peppering it with a link to the front page of your blog.

Heck, you could turn it into a plugin! The only condition to reuse this code is that your plugin be Free Software, preferably GPL.

How it works

It’s rather simple. When home.php exists, it’s automatically loaded in lieu of index.php when someone visits the front page of your blog.

This version of home.php does one clever trick: it redirects visitors on your main URL to your static page. But the story doesn’t end here — otherwise you’d be left without a way for readers to read your blog front page.

To perform the redirection accurately, home.php first examines the WordPress engine to look for query arguments:

  • If the front page is visited with no arguments, then the reader is redirected to the designated static home page
  • Otherwise, the standard arguments are processed like usual, and index.php is called on to perform the display of the requested posts

Internally, WordPress processes the URL http://yoururl.com/page/1/ and determines the reader wants to see the first page of blog posts. Usually, this request is displayed by calling your theme’s index.php file. In effect, on a regular blog visiting http://yoururl.com/page/1/ yields the same effects as visiting http://yoururl.com/page/1/. It’s even programmatically equivalent, since in both instances is_home() is true. So we reuse that URL as the blog front page.

Other WordPress query arguments are detected as well, so the engine continues to function normally under all circumstances.

In summary, visiting http://yoururl.com/page/1/ shows the front page of your blog instead of the home page. And this frees up http://yoururl.com/ for usage as redirection source to the designated home page.

Drawbacks

I found two drawbacks:

  • Your theme will probably need small changes. Since your WordPress URL now points to the home page, all links in the theme that should point to your blog need to be changed to the new “blog address”.
  • Some (a tiny minority of) statistics plugins will detect two visits for each visit to the home page. That’s because they’ll detect a visit to the WordPress blog address, and then (after the redirect) a visit to the static home page.

And so the story ends

Yup, it’s time that you applied this technique on your site. If you use it, please blog about it and link to this article, because we want to spread the word. So go do it!

Free plug: you may want to check out our product, Turbocharged. It makes blogging way easier and more fun.

A reader has evolved this technique into a dynamic home page for his blog. Check it out!

62 Responses to “Creating a static front page on your WordPress blog”

  1. Just invented a technique for a true home page in WordPress blogs » Rudd-O Says:

    [...] Read it on my Turbocharged blog: Building a true home page into your WordPress blog [...]

  2. Rudd-O Says:

    Someone from the WP community I hold in very high esteem responded with this:

    Hmm, I don’t like that solution - it requires 2 web server page requests.

    He has a point. The old, widely advertised, technique (requesting in home.php a new loop with pagename=home) only requires one HTTP request (albeit with two distinct sets of database hits).

    But:

    1. If the blog uses a WP page as the static front page, and it makes use of the old home page technique, the home page is suddenly accessible (translation: duplicated) through two URLs: the blog address, and the canonical page URL. This wart shows up all over the place, especially in wp_page_lists(), and hiding it requires major WP plugin hackery.
    2. With this technique you can redirect to a truly static (think plain old HTML) home page. Think about it: now you can have 1995-style home pages with WordPress!

    Anyway, the two HTTP requests aren’t a big deal. Factor HTTP keepalives in, and you’ve got an extra delay of about 100 milliseconds to show the front page. And this delay does not apply for any other of the blog pages at all. Since most traffic on your blog does not arrive through the front page, but through blog posts and pages indexed in search engines, this delay is negligible. Certainly a small price to pay for coherence and ease of use.

  3. Lisa Says:

    Well I was very excited to see this solution… but found that it doesn’t work. Though users are now directed to the static page of my choice, Wordpress keeps rerouting the URL index.php to that static page as well. Users cannot get to the blog or ‘news’ pages (as I have called them). The theme is Refresh.

    Any thoughts to help me get over the bump?

    I would be really happy with the simplicity of this plug, if I could get it to work!

    Thanks,

    Lisa

  4. Rudd-O Says:

    That’s because your blog URL is no longer …/index.php. It’s /page/1/. index.php now redirects to the static front page. It’s the expected behavior.

  5. Lisa Says:

    Okay - so now, how do I direct my users to my blog pages?

    Lisa

  6. Rudd-O Says:

    Lisa:

    At the risk of repeating what is already in the article… you just need to put a link to http://yourblog/page/1/ in your template, titled “Blog”.

  7. Jose Says:

    I got it to work for me. But I don’t understand why /page/1 is the blog’s address? Is that stupid question?

  8. Rudd-O Says:

    It’s not a stupid question at all. Usually, people who want a static front page on their blogs also want to keep their blog to post news and other events. Since http://yourblog.com/ and http://yourblog.com/page/1/ both show the same blog posts with the same look, it makes sense to take advantage from http://yourblog.com/page/1/ as the new blog address and use the http://yourblog.com/ to display the front page.

  9. Rudd-O Says:

    Oh, the technical answer to your question would be that /page/1/ gets converted to a request that tells WordPress to “show me the first page of blog posts”, which incidentally would be the out-of-the-box behavior for any theme’s front page.

    In more detail: http://yourblog.com/page/1/ is equivalent to http://yourblog.com/index.php?page=1. That, of course, assumes you’re using pretty permalinks!

    I thought I explained that in the blog post.

  10. Jose Says:

    I guess my confusion lies in the permalink structure I’ve chosen is not /page/1/. What I gather then is when I’m using permalinks of any structure, WordPress uses /page/n/ to list the blog posts chronologically instead of /index.php?page=1.

    Now that I wrote it out, it of course makes sense. Thanks for you help.

  11. Elijah Says:

    I’ve placed the appropriate content in home.php and saved it in my themes directory. When I visit my website (http://www.elijahsadventure.com), I am presented with a page that states: OK

    The document has moved here.

    “Here” is a link to the $homepage variable.

    Am I missing anything?

    Thanks for your help, Elijah

  12. Elijah Says:

    Nevermind! The issue resolved itself when I upgraded from 2.0.4 to 2.0.5!

    Thanks, Elijah

  13. Rudd-O Says:

    Hello, Elijah! I clicked on elijahsadventure.com and I was immediately redirected to:

    http://www.elijahsadventure.com/about/

    It seems to be working for me! Which browser are you using?

  14. charlieisout Says:

    It sounds so easy. Of course, since I’m nearly totally inept, I’m not surprised I’ve been unsuccessful. I’ve tried a number of different ways to make your code work without success. Here’s my problem: I’ve got a static page in traditional html which I want as my home page. It includes links to my blog. I have copied your code (unedited) into a php. file and placed in my themes folder. But when I did that, I get an error message (typical “page doesn’t exist” copy). I’ve tried changing your code to point to my specific homepage (renamed as home.htm, or index.htm or whatever), but that doesn’t work. l give up (at least for tonight). Where is the error of my ways?

  15. Rudd-O Says:

    Honestly, you’re supposed to understand what’s in the code. The $homepage variable should contain an URL portino that points to an existing page within your WordPress blog. Oh, and the code should be in a file named home.php inside the directory of your current theme, NOT the wp-content/themes folder.

  16. charlieisout Says:

    Sorry, Rudd-O. I’m a neophyte. WordPress was automatically loaded to my site by the Web hosting service I use. The theme I’m using (cutlnes) in in folder which is inside the wp-content/themes folder. Will I have to move that folder to the root directory before using the code?

  17. Rudd-O Says:

    No. The file doesn’t go into the root directory of your site (I think I was very explicit about that). It goes in your selected theme’s folder, which is usually under the wp-content/themes folder.

  18. AB Says:

    Where do I place this code when I don’t have a file named “home.php?” I’m using the fspring template and want a static home page. The original template did not have a home.php file included.

    Thanks.

  19. charlieisout Says:

    Rudd-0,

    All is well. Problem solved. Thanks for your help.

  20. jose Says:

    AB,

    Then you have to create the file “home.php” with that code in it. Then upload it to the fspring themes folder.

  21. Rob Says:

    Okay. It works. But how do you get rid of the default “Home” menu link that links to “/” and just gives and error?

    I don’t need two “Home” menus, of course.

  22. Rudd-O Says:

    That’s up to your theme. Anyway, it should not give an error.

  23. vahan Says:

    Works beautifully!! I’ve tried a few solutions, including http redirects via apache, etc.. but none of ‘em gave me the results i wanted.

    This is perfect, thanks a lot!!

    -vahan

  24. Vahan » Blog Archive » Static Front Page Says:

    [...] Check it here [...]

  25. joseph Says:

    thanks…. really useful thing… will be using it in a few sites..

  26. Tupelo Says:

    Hi Rudd-O

    In your instructions, there’s a line that says: “Now all you need to do is edit your theme template or home page, peppering it with a link to the front page of your blog.”

    HOW? - Are there step-by-step instructions somewhere I’ve missed about how to “pepper”?

    I am having the same problem as Lisa. I saw your Post #5 answer to her: “…put a link to http://yourblog/page/1/ in your template, titled “Blog”.

    I’ve read both of those sentences a dozen times, and I’m still stumped. Sorry to be so apparently dense.

    Could you please provide a specific way to accomplish this for those of us who can’t seem to catch it otherwise.

    Thank you kindly for your patience, and thanks for making this available.

  27. Rudd-O Says:

    If you don’t get it, it is NOT because you’re dense. It’s just a lack of knowledge in HTML (and WP). Unlike a cooking recipe, there are no step-by-step procedures to “pepper” your template.

    You need to know how to edit your WordPress theme (and HTML) to add the links. You also need to be familiar with the theme you’re using. Once you’ve learned how to do that, what I said will instantly hit you.

  28. Tupelo Says:

    Thank you for the reply, Rudd-O. I intend to keep learning the language(s). In the meantime, I know enough to accomplish this with a little help. Specifically . . .

    (1) I understand I need to put a link to http://yourblog/page/1/ in my template. You said to edit the theme template or home page. Which file? index.php? links.php? style.css

    I am using Theme: pool.

    (2) Would you please tell me the exact syntax needed?

    Thanks again

  29. Rudd-O Says:

    I’m very sorry but that falls under the coverage of our support and engineering agreements. We’d be very glad to teach you how to do it by example if you are willing to contract our engineers. After all, that’s exactly our business.

    Have a great day!

  30. Marc Says:

    Hi there … thanks so much for your fix! It works perfectly … except for one thing :) I end up with two Home buttons in my menu, and i cant figure out how to get rid of the extra one. Any suggestions?

    Thanks again!

    Marc

  31. Total Physique Online » Blog Archive » links for 2006-12-30 Says:

    [...] Creating a static front page on your WordPress blog | Turbocharged (tags: wordpress homepage static cms blog tutorial frontpage) [...]

  32. jw Says:

    i have tried everything to get this code to work, but it simply will not redirect. i just get a 404 error page. i have verified that the variables contain expected values, but one thing i notice is that the TEMPLATE PATH variable resolves to my ISP’s webserver’s internal absolute path address to the theme’s index.php file. could this be the problem?

  33. Tech Writer Voices Blog » Blog Archive » WordPress Shopping Carts Says:

    [...] The solution to the static home page proved to be pretty simple. The best solution is available is the one on the Turbocharged site. However, the specifics of my situation made it tough. I created the site as an add-on domain in a folder directory on my host. Whenever I used the method described on Turbocharge, the htaccess file kept being overwritten and it caused the site links not to work. This is because I had enabled permalinks. I thought the method was faulty, so I kept looking for alternatives. [...]

  34. jw Says:

    problem solved. redirect didn’t work with host server running fast-cgi, unless specific fixes are added to wp-include/functions.php and pluggable-functions.php See http://trac.wordpress.org/changeset/4514.

  35. Paul Says:

    Oh, way cool.

    Go to http://www.careyfamily.co.uk - gives the static “about” page as the front page.

    But then, by editing header.php, and adding “index.php/?page=1″ to the a tag referenced by the header image, I’ve arranged it so that clicking the header goes to the first page of the blog part.

    I really needed something like this - thanks, dude!

  36. djw Says:

    Hi. I’ve got the code in the right place and (I think) configured properly. However, instead of automatically redirecting to my page, I get a “200 OK” page that links to the “moved” document.

    Is this something I can do something about, or is it as a result of my ISP’s settings?

    Thanks.

  37. john Says:

    i was wondering, I tryed the above technique and it keeps redirecting me to the awardspace page. My page is http://www.mcahistory.com with a html index and im not sure what im doing wrong. any help would be greatly appreciated. here is what I put…

    query_vars as $k=>$v) if ($v) $wp_received_argument = true;

    if ($wp_received_argument) require(TEMPLATEPATH . “/index.php”); else { wp_redirect($homepage); exit(); }

    ?>

  38. Exiled from GROGGS Says:

    Another WordPress hint…

    How to make a WordPress blog have a static front page…

  39. Michael Klusek Says:

    Rudd-O,

    Finally got it working. These things are always tricky. Only wish is that could have right sidebar. But regular static pages don’t show it, so why should this custom page. Still it looks kind of naked to come to site and have no sidebar stuff.

    I tried to add call for sidebar into home.php but got no output.

    Any ideas?

    But you are right all the other solution attempts create more issues. So thanks for thinking this one thru. WP needs more developers like you.

  40. Christine Says:

    I got the code to work on my site. Very nifty. The only problem is that I can’t find the wp-rss2.php. It’s there at the root, but is not getting updated. I even put out a new post and no, wp-rss2.php didn’t get any info.

  41. MGinCNJ Says:

    Well, I’m really new to all this, and struggled mightily to get something to work. It is now doing exactly what I want (Thank you!!!), but only with the addition of a really UGLY hack. No doubt I’m doing something wrong. If I can suggest to Rudd-O that the interaction between the setup options and your code should be documented (should you say that your home page is on the same or different URL as the rest of wordpress???) I couldn’t get anything to work until I found (through excruciating painful trial and error) a magic permutation that seemed to do the trick (not what I thought I wanted, but good enough).

    What I want is a static home page that is in the root directory of my site (currently I haven’t deployed…just using localhost on winamp). I originally installed wordpress in a subdirectory (//localhost/wordpress), and of course didn’t want to have to reinstall it.

    Couldn’t for the life of me figure out how to provide a string to your code that would point to my home page in the root.

    I did manage to figure out I could make something work by putting my homepage inside the wordpress directory, in its own subdirectory //localhost/wordpress/home, and setting my general options to same. I discovered this by reading an error message. Instead of changing the string to find my homepage, I put my homepage where the error message said your code was looking to redirect. That works like a charm. Hitting the Home button on the link bar within wordpress now brings you back to the static homepage, which is what I want.

    Only problem is that someone hitting my root won’t see the home page. Maybe I could just redirect everything (like I said I’m a novice at this) but instead I devised this ugly Hack…basically I put a second copy of the home page in the root, with static links to Wordpress. Once you link into Wordpress, the home button brings you to the identical page in /Wordpress/home…and that’s where you stay for the rest of the session.

    I’d prefer to get rid of this hack if I can. Anyone have any ideas?

    Michael

  42. Michael Says:

    I hacked up your code so that instead of redirecting to a WP static page, code that I enter into home.php (which can include PHP too) will be executed. With the technoque I followed, I was able to put a mini loop on my homepage.

  43. walt Says:

    Making sure I understand this correctly:

    Step One - Strip out everything (code that is) that’s in ‘home.php’ and replace it with this code: query_vars as $k=>$v) if ($v) $wp_received_argument = true; if ($wp_received_argument) require(TEMPLATEPATH . “/index.php”); else { wp_redirect($homepage); exit(); } ?>

    Step Two: Save new file as ‘home.php’

    Step Three: Replace current ‘home.php’ file with this newer version.

    Step Four: $homepage = get_settings(’siteurl’).”/home/”; (Where you see “/home/” you have to put in “/yoursite.com/blog/page/1/”, right?

    After all that I get this message in my browser window after those steps:

    “OK The document has moved here. Apache/2.0.54 Server at shreveceo.com Port 80″

    What did I do wrong, here?

  44. Cazille Says:

    Why can’t WordPress listen to the feedback, from numerous people, who want the WP to be their homepage too, and just update WP to provide a static home page?

  45. Derek Perkins Says:

    I’m using this technique for a site I am developing - http://derekperkins.com/seatabilitydesign/. Everything is working great! My only question is if there is a way to load the blog without going to /page/1/, because that looks kind of kludgy. Any thoughts?

  46. Rudd-O Says:

    Trust me, it’s the cleanest way =). Or better, prove me wrong!

    (that’s what collaborative development is all about)

    Have a great day!

  47. Marc Says:

    Thank your for your solution. It works pretty good, but…

    When I type myblog.com, it automatically redirects me to myblog.com/home, but when I try to access my sitemap (myblog.com/?sitemap) it redirects me automatically to myblog.com/home too. When I remove home.php from my theme folder, I works normally.

    What did I do wrong ?

    Thank you for your answer.

  48. Rudd-O Says:

    You need to add a conditional that detects whether the $_GET variable is empty or not. Something like:

    if ($_GET) { ... whatever in home.php happens }

  49. Rudd-O Says:

    About the “document has moved here”: true, that’s exactly what you see, but what I don’t understand is why your browser isn’t following the redirect! (that document you see is called the redirect document)

  50. davidvogt Says:

    Your article is very informative and helped me further.

    Thanks, David

  51. mitja Says:

    Thanks! I wanted an plain “old” html front page and Wordpress for everything else. Your 30 second solution was exactly what I needed.

  52. Anna Says:

    This is a great solution, but…

    I too have 2.0.4 and get the “OK” page, so I have to go and upgrade, and will probably upgrade to the WP 2.+ version that has the option already integrated in the Options/Reading section.

    Also, I changed the home.php file to “get_option(’home’) instead of get_option(’siteurl’) because my wordpress blog is installed in one directory, but virtually at another, basically “erasing” the nested directory. For those who have installed wordpress in a directory that is different from what they show their users via the URL, they too can change this script.

    But I’m not going to be using it b/c of my earlier point. Thanks anyways- great solution!

  53. Revising the Real Ultimate Static Home Page · The Tech Fairy Says:

    [...] on the fantastic code put together by Rudd-O over at the TurbochargedCMS site and Michael over at NYCEducated.info, I was able to create exactly what I was looking for.  The new [...]

  54. Ken Says:

    Lovely. This is exactly what I was needing. Thank you!

  55. 5个简单的步骤把 Wordpress 打造成 CMS, 并非如此简单 at Cocoatacious Says:

    [...] Creating a static front page on your WordPress blog [...]

  56. Educated Says:

    Implementing The Real Ultimte Front Page…

    Previously, I briefly illustrated how using a home.php file can allow you to build a custom layout to your WordPress blog’s home page. However, I didn’t really document it well enough for the casual WP user to implement by himself. For the …

  57. Jayme Says:

    Thanks for the tip man. Works well.

  58. Mike R. Says:

    Hmmm. I’ve been developing the above named WordPress website and was going to use Rudd’s code, but in 2.1 there appears to be a much simpler, more “elegant” solution that doesn’t require an external workaround.

    I’m new to WordPress and am not really a programmer (which may be one reason I wanted to find a simpler, more direct solution). My site has a horizontal navbar, the first two entries of which are “Home” and “Blogs.” Each of the pages to which the navbar links point are currently static introductory pages or “placeholders.” Each has a page id number. The original “page_id” for the “Blogs” link was “4″.

    While reading Rudd’s article and even starting to modify the code (which I copied) to fit my site, it occurred to me that if, as suggested in the article, the blogs have a page id of “1″ then all I needed to do was to go into my theme’s header and change the link code for the “Blogs” page. All this involved was to change the href of the a tag so that the original end of it, which read

    “…/blog/?page_id=4″>Blogs

    to now read

    “…/blog/?page_id=1″>Blogs

    After saving the header.php file I updated the browser rendering of the site and tried the Blogs link. Although I haven’t thoroughly tested it, it seems to work. I need to make some more changes in appropriate places of the theme files so that the Home page actually appears as I want it to.

    Someone else might want to try this and see if it really does work.

    Thanks.

  59. Dave Says:

    This seems easy enough, however I’m having trouble.

    I’m running WP 2.2.1. I created the home.php file and used “http://rtwinsurance.com/introduction” to try and redirect to a static page titled Introduction. When you visit the URL (at the time I’m writing this), you’ll get redirected to http://rtwisurance.com/home and get a 404 error.

    Please help!

  60. Creating a static home page and dynamic blog page in Wordpress 2.3 at Advanced CSS Design Resources - last-child.com Says:

    [...] * If the front page is visited with no arguments, then the reader is redirected to the designated static home page * Otherwise, the standard arguments are processed like usual, and index.php is called on to perform the display of the requested posts Creating a static front page on your WordPress blog [...]

  61. WordPress Remix » Blog Archive » Have Custom Homepage and Blog link, both at a time in WordPress Says:

    [...] am using the trick, originally founded by TurboChargedCMS in this site. It does have a very minor drawback but the advantage is real good and I would [...]

  62. d00d Says:

    I put home.php with the above code in my theme’s folder and reloaded and nothing happens. I can change templatepath and siteurl to anything and it still does nothing.

    I’m using WP 2.6

Leave a Reply