brassblogs

Oh, this deserves a whole tutorial on its own – which is one of the reasons I decided to do this series. There are so many ways you can create a different look for your index page (or ANY page for that matter – pretty much every method in this part of the series can be applied to Pages, categories – anything).

Most people like to have a different look for various parts of their site. An index page to draw people in, 404 styling to help people when they lose their way, all kinds of things so that your site has those “little touches” that make it looks “less bloggy” and more like a “real” website.

As I’ve said, there’s a few ways to pull this off. But instead of confusing you (yeah, I had an entirely different article almost completely finished and I ditched it because it was just way too much information) I’m going to give you the most versatile method. It’s not the method I always choose to use, but as far as tutorials go, it’s the best one to go with, I think. Maybe I’ll touch on the other methods some other time.

So the method I’m going to describe involves some understanding of the Template Hierarchies (which I’ve mentioned before). A basic rundown is that when you create a Page in WordPress, it’s given a slug (you’ll see it beneath the title of the Page you’ve created) which is usually just a lowercase-and-spaces-replaced-with-a-dash version of the title you’ve given the Page. So if you’ve titled a Page “My Dog”, the slug will generally be “my-dog”. Using this example, if you create a theme file and name the file “my-dog.php”, then any time someone comes to visit your site, and goes to the “My Dog” article, WordPress will pull up the my-dog.php file as the template layout.

Well, at least that’s how it used to work

As of WordPress 2.7, you can now create a whole bunch of template files, and a dropdown will appear as you’re writing your post, and allow you to choose which template file you want to associate with that particular Page. The only exception to this is the “home.php” file. If you have a “home.php” file in your theme, then no matter what, that file is what will be used to display your index page. (That’s why you never want to have a Page with a slug of “home.” That’s just messed up.)

So, that explained, let’s get to the good stuff. I’m going to describe a simple, basic method of the index page – just having a Page set in WordPress and making that be the front Page of the site. To do this, all you need to do is the following:

1. Go to “Pages>Add New” and create your Page.
2. Publish it.
3. Go to “Settings>Reading”, and under “Front Page Displays”, choose the “a static page” radio button.
4. Click the dropdown for “Front Page” and choose the Page you just created.

Now that Page will appear as the index of your site when you load it up.

If you want the index page layout to be different from the rest of the site – well I basically copy the “index.php” file and then rename it to “home,php.” Then I make any edits I need to the “home.php” file.

But say you want to have something different – perhaps no sidebar? Then in the home.php file, you simply remove the call to <?php get_sidebar(); ?>. The sidebar will be removed form the index page, but it won’t affect the rest of the site.

Say you would like the header logo to be bigger on the index page, but you still want to use the regular call to the header.php file? In this case, you could use conditionals to edit the display. For example, in the header.php file we could originally have this:

<img src="<?php bloginfo('template_directory'); ?>/images/logo.gif" />

But with a conditional, we could edit it to say this:

<?php if(is_front_page()) { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/logo-home.gif" />
<?php } else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/logo.gif" />
<?php } ?>

If you have the static front page set in your Settings>reading area, then you want to use the is_front_page(); conditional. However, if you are not, and you have the regular WordPress settings and you still want this to happen, you want to use the is_home(); conditional. Yes, there is a difference!
Now if you’re on the index page, the “logo-home.gif” file is what’s shown, but on all the other pages, regular ol’ “logo.gif” is shown.

I will say that although WordPress conditionals do have their place, IMO it would be so much more wonderful if we could just have an automatic class added to the “body” tag that would indicate not only that we were on a single post page, a static Page, the index page, a category listing, etc, but also the name of said page, if it can be applied. Wouldn’t that be great? Then all you’d have to do is edit the stylesheet to reflect the vast majority of these changes that you wanted, and you’d only have to use conditionals sparingly. But it’s such a time-consuming thing to list every single possible conditional, and then having to edit it when new content is added. It would be great if we could do this dynamically. Right?

Well, I wouldn’t leave you hanging on this I actually have a function that I wrote (see, I told you the functions.php file would be your friend!) that does exactly this, and does it dynamically. All you have to do is add the following to your functions.php file:

<?php
function toplevel() {
global $post;
if(is_home() || is_front_page()) { // we're on the index page
$toplevel = ' id="home"';
} else if(is_page()) { // if we're on a static Page
$isparent = $post->post_parent; // test to see if this it a parent
$postID = $post->ID; // get this post's ID
$ancestors = get_post_ancestors($post);
$top = end($ancestors);

if($isparent == '0') { // if there is no parent, grab this page's name
$getname = get_post($postID);
} else {
$getname = get_post($top);
}
$toplevel = ' id="' . $getname->post_name . '" class="page"';
} else if(is_category()) { // if we're on a category listing
$cat = get_query_var('cat');
$parents = get_category_parents($cat,FALSE,'^',TRUE);
$get_parent = explode('^',$parents);
$toplevel = ' id="' . $get_parent[0] . '" class="category"';
} else if(is_single()) { // if this is a single post page
$toplevel = ' id="single"';
}
echo $toplevel;
} ?>

Now, in your header.php file, just edit the <body> tag so that it says <body<?php toplevel(); ?>>.

What will then happen is… well view my source code and look at the body tag. If you’re on the index page of the site (whether or not you have a static front page set), your body tag will say <body id="home"> You can then use your stylesheet to make many edits to the index page, simply by using this function. The same goes for a Page (<body id="pagename" class="page">) because you will have the parent Page’s name – yes, I said parent page – set as an ID, but you also have the added class of “page”. So you could have an overall look for the static Pages on your site (using the body.page selector in your stylesheet), but if you have a set of Pages that also have children, and you want each section to have their own look, you have the parent Page’s name as the ID, so it can apply to the children as well. I did something similar for the categories – but there’s a little extra “oomph” I’ve already discussed on this point to get the child categories to use the parent category layout.

I’m getting ahead of myself! I do need to save some goodies for the next tutorial, otherwise this will be the longest post in the world, and mega-info overload. So I’m going to wind it up.

There are other methods to creating a different look for your index page – this is certainly not the only way to do it – but it’s probably the easiest/most flexible way to accomplish it. Using conditionals alone is certainly doable (it’s something I use quite often, actually), and then there’s the idea of creating a page outside of WordPress altogether and calling in the WordPress content – but that’s a tutorial for another day.

Hope you enjoyed this one.

Up next: Pull in Specific Content to the Index Page