Creating a New “Home Page” in Wordpress

I used to hate Wordpress because every Wordpress-driven website I saw looked, well, like a blog.  You know, dated entries and a bunch of stuff to the side that almost always talked about “categories,” “archives,” and (ick) a “blogroll.”

But then I realized that it just didn’t have to be that way.  So I started trying to figure out how people were doing it.

Here’s a step by step thing I wrote for you to guide you through it…

Here’s how to make a new homepage on a Wordpress 2.7+ site that doesn’t look like a blog:

First, you’ll need a theme that uses a main navigation bar.  I used the Emporium theme from http://www.freewpthemes.net.  Upload it into the wp-content/themes directory on your website, and then select the theme in the Manage Themes area of your admin area (under Appearance).

Second, go ahead and make any changes to the theme you want.  You can use the Editor (also under Appearance in the admin area).  I didn’t like the way it made my site title and headlines (H1, H2, and H3’s) all lower case, so I removed the appropriate “text-transform: lowercase” line in the stylesheet.  I also made the main menu font bigger and changed the font and line spacing of the body text.

Third, publish a page called “Writing” or “Blog” or anything else that you want.  The title will be what goes in the main menu.  Don’t write anything on the page – just publishing it empty is enough.  You’ll also need to publish a page with your homepage text.  The title of this page will not be displayed in the menu, but will appear on your home page.

After creating those pages, go to the Settings -> Reading area of your WP admin panel.  The “Front page displays” options will help you transform the site.  Click the “A static page” radio button, and then select your home page you created for the Front page, and the empty writing/blog/whatever page for the “Posts page.”

But a small problem has developed — look at your blog: You’ll see that the home page is actually listed twice in your navigation menu.  Once as the Homepage and once as the title of the page (mine is “Welcome to MattGordon.com”).  Oops!

In order to fix this, let’s go back to the editor (under Appearance) and select the header.php file to edit.  Scroll all the way down, and the div called “menu” will be displayed.  This, not surprisingly, is the code that makes the main menu.

Incidentally, if you want to change the “Homepage” menu item to something else, look for the “class=”current_page_item”>Homepage</a>” code.  Just change “Homepage” to “Home” or whatever you want it to be.  You may notice that it isn’t in all caps like it appears on the site.  That’s because the stylesheet uses that “text-transform: uppercase” to change it.

To fix the double listing issue, replace this code “wp_list_pages(‘title_li=’ )” with this code: “wp_list_pages(‘title_li=&exclude=2′ )”  What you’re doing is adding an argument to the “wp_list_pages” template tag to exclude a certain page when it’s making the menu.  You will probably have to replace the number “2” with another number.  It will be the Wordpress ID number of your home page.  To find it, go to Pages -> Edit in your admin area and hover your cursor over the title of your home page.  Now look at the status bar in the bottom of your browser window.  The number at the end of that URL is the ID number you need to use in the above code.

That’s it, you should now be good to go!

Tagged as: blogging, Blogs, websites, Wordpress, writing