How to turn the homepage of your WordPress blog into a magazine style layout

Customizing your WordPress theme used to be a job that only designers and developers could handle – today, I’m going to show you how to customize your WordPress theme and turn your regular blog home page into a magazine style home page. The steps are outlined to work with the default WordPress theme, Kubrick, but can easily be applied to any WordPress theme you may be running.

Step 1. Creating the .php file for your custom home page template

This is the first thing you’ll need to do – make a copy of your index.php file in your theme folder and name it homepage.php This is the file we’ll be editing to create our customized magazine style home page. Once you’ve got the file created, you’re going to open it in a text editor (for PC users like myself, I use notepad++) and add the following code into the very top of the theme.

/*
Template Name: Home Page
*/
?>

The code above tells wordpress that the file is a page template and allows you to select it from the drop down menu in the right side box in the wordpress admin panel when you’re writing a new post.

After you’ve created and saved your new home page page in wordpress, you’ll need to head on over to the READING page in your wordpress admin, under the SETTINGS tab. Here, you’ll see a page that looks similar to this:

In the drop down menus, select your new Home Page for the home page display and save it. You can either leave the other drop down menu blank, or you can create another page and name it “blog” so you can select that page to show your blog posts in regular blog format (not necessary, but I just wanted to make sure you knew it was an option).

Now your website’s home page should be showing your homepage.php file, but right now it looks exactly like your old home page, right? It’s ok, we’re going to take care of that.

Step 2: Stripping away all of the excess codes from the homepage.php file

When you copied over the index.php file to your new homepage.php file, you’ve got a lot of codes that you don’t want to use (if you did, it’d just be the same view as the regular blog home page you have now). So lets look over the codes and strip away everything that we won’t need, just giving us the bare essentials, which I’ve displayed below.

The above codes are going to get the header, sidebar and footer file from your theme like each page normally does, and it’s going to show your main content are as a completely blank canvas. This is what we want. We want the blank canvas so we can actually start putting together the codes that will turn it into a customized magazine style home page.

Step 3. Figuring out what we want to display

Displaying content in a different way than you’re used to can be a fun way to channel your creativity – and if you don’t have any, it’s ok to look at magazines, newspapers and other websites to see how they’ve structured their content.

What we’re going to want to do at this step is draw out some sketches on how we might want to display the content, not necessarily choosing what content to display in each designated area, but just setting up the guidelines on where we want specific boxes placed and how we might see them styled.

Step 4. Turning those sketches into basic css classes

Below, we’ll take the sketches we drew above and put some css codes together for them. The structure is basic and the backgrounds and borders are minimal, you can change the colors and styles of these later on if you’d like to.

.featuredwrap {
     position: relative;
     float: left;
     margin: 10px;
     padding: 10px;
     width: 410px;
     background: #f8f8f8;
     border: 1px solid #dadada;
}

.categorywrap {
     position: relative;
     float: left;
     margin: 10px;
     padding: 10px;
     width: 183px;
     background: #f8f8f8;
     border: 1px solid #dadada;
}

.recentwrap {
     position: relative;
     float: left;
     margin: 10px;
     padding: 10px 15px;
     width: 400px;
     background: #f8f8f8;
     border: 1px solid #dadada;
}

.recentlist {
     position: relative;
     float: left;
     margin: 10px;
     padding: 0;
     width: 110px;
}

The css should be added to the style.css file that comes into your theme. I try to add any edits I make to themes at the very end of the style.css file, this way it’s easy to find all of your codes and will cut down on the time it takes to look the whole file over to find that one line of code you need to adjust (trust me, you’ll eventually need to find that one)

Finding the right width for the box is as simple as finding the original theme’s width for the content area and using it. In this case, the WordPress theme we’re editing (the default Kubrick theme) has a width of 450px. Make sure you’re using the proper width for your theme and ensure you’re testing the page after each step to see that the boxes are displaying properly and working like they’re supposed to.

Note: You’ll notice that the .categorywrap is half of the width as the .featuredwrap – this is because we’re going to be allowing multiple category boxes show up, two in each row.

Step 4. Writing the html to accompany the above css codes

Now that we’ve got the basic css codes ready to go, we’re going to put the html codes into the homepage.php file.

<div class="featuredwrap"></div>
<div class="categorywrap"></div>
<div class="recentwrap">
<div class="recentlist">
<h4>Recent Articles</h4>
<ul>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
</ul>
</div>
<div class="recentlist">
<h4>Recent Articles</h4>
<ul>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
</ul>
</div>
<div class="recentlist">
<h4>Recent Articles</h4>
<ul>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
	<li><a>Link here</a></li>
</ul>
</div>
</div>

So, now that we’ve got the basic structure down and it’s displaying properly (see image below), we can start working on putting in the codes that will display the articles/links for each section.

Step 5. Writing in the custom codes to pull posts into each section

At this stage, we’re going to take things one step at a time and get each box working properly, with the right php codes to pull in the posts as well as the proper html/css codes so everything will be styled properly. Each segment below will be listed with it’s own smaller title so you can follow along and make sure you’re getting all of your codes on the page done the right way.

Step 5-1. Writing the html codes for the post styles

In this step, we’re going to put the html codes together to display the images, titles and excerpts from the posts into each segment of the html code we’ve already written in the homepage.php file.

This goes into the .featuredwrap div

          <img class="alignleft" src="image.jpg" alt="post title" />
<h3><a>Post title</a></h3>
the excerpt here

This goes into the .categorywrap div

<h3><a>Post title</a></h3>
          <img class="aligncenter" src="image.jpg" alt="post title" />

the excerpt here

As you can see from the above codes, we’re going to be displaying the post title in an h3 tag, an image from the post and also an excerpt. Once we get into the php portion of the codes, you’ll see how we’ll control each of these elements.

Note: The Recent Articles ul lists are already put into place, so we don’t need to touch them at the moment

Step 5-2. Writing the css codes to accompany the above html codes

Now that we’ve got the basic structure of the codes put into each box, lets get them styled so that everything is lining up properly and the sizes of fonts are properly created.

The .featuredwrap div will have these css codes applied to it

.alignleft {
     position: relative;
     float: left;
     margin: 10px;
     padding: 0;
     border: 5px solid #dadada;
     max-width: 400px;
}

.featuredwrap h3 {
     font-size: 14px;
     font-weight: bold;
     margin: 0 0 10px 0;
     padding: 0;
}

.featuredwrap h3 a, .featuredwrap h3 a:visited { text-decoration: none; }
.featuredwrap h3 a:hover { text-decoration: underline; }

.featuredwrap p { margin: 0; padding: 0; }

The .categorywrap div will have these css codes applied to it

.aligncenter {
     position: relative;
     margin: 10px auto;
     padding: 0;
     border: 5px solid #dadada;
     max-width: 173px;
}

.categorywrap h3 {
     font-size: 14px;
     font-weight: bold;
     margin: 0 0 10px 0;
     padding: 0;
}

.categorywrap h3 a, .categorywrap h3 a:visited { text-decoration: none; }
.categorywrap h3 a:hover { text-decoration: underline; }

.categorywrap p { margin: 0; padding: 0; }

This is the set of css styles for the .recentlist div

.recentlist h4 {
     font-size: 14px;
     font-weight: bold;
     margin: 0 0 10px 0;
     padding: 0 0 10px 0;
     border-bottom: 1px solid #dadada;
}

.recentlist ul { list-style-type: none; margin: 0; padding: 0; }
.recentlist ul li { padding: 0; list-style: inline; margin: 0; }
.recentlist ul li a, .recentlist ul li a:visited { padding: 5px 0; color: #252525; text-decoration: none; border-bottom: 1px solid #dadada; display: block; width: 110px; }
.recentlist ul li a:hover { color: #464646; text-decoration: none; }

Now that these css codes are put into place, your homepage.php file should be showing up on your site similar to the image below (Note: IE displays the red x for images while other browsers don’t – don’t worry, we’re taking care of this during the php phase of the tutorial)

Step 5-3. Adding in the proper php codes for each section

Now that we’ve got the structure complete for our content, lets start adding in the proper WordPress related codes to pull posts from the specific categories designated for each spot on the home page. Below is the codes as well as an explanation for what we’re actually doing.

This is for the .featuredwrap div

while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
          <?php $values = get_post_custom_values("image"); if (isset($values[0])) { ?>
          <img src="<?php echo bloginfo('template_url'); ?>/timthumb.php?src=/<?php $values = get_post_custom_values("image"); echo $values[0]; ?>&w=100&h=100&zc=1&q=100" alt="<?php the_title(); ?>" class="alignleft" />
          <?php } ?>
          <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
          <p><?php the_excerpt() ; ?></p>
<?php endwhile; ?>

Looking at the above codes, you’ll see some php built into the codes. Some you may recognize and some you may not, so lets break down what each segment of the code does.

The first three lines of the above code are getting the posts you want into a loop. For the featuredwrap div, we’re only in need of one post, so that is why it’s marked as 1 in the showposts= section. The category_name= is self explanatory as well, but one thing you might not have seen before is the $do_not_duplicate piece. Basically, this makes sure that the post id’s you’re calling will not be duplicated on the page if you were to ever use the regular straight forward wp query (this is good for if you’re wanting a featured post box on your home page as an ‘extra’ but want to keep the regular blog post formats there as well).

The img codes are set up to work with the timthumb script, so we can auto resize the images there, even if they’re bigger than the allotted size. For this tutorial, I chose the size 200×200 so it’s perfectly square and also allows room next to it (on the right) for the post title and excerpt.

We’re using a custom field for the image, this way each post can have it’s own image automatically added into the home page without any additional work on your part. If you’re not familiar with custom fields, you can check out the official wordpress page on them. They’re really easy to use and will allow for some cool customizations on your pages. (Note: if you’re using the dummy posts from the link at the top of the site, I already have a custom field created for each of the posts, all sporting the same image for ease of use/testing)

For the excerpt of the post, we’re going to add some codes into our functions.php file which will allow us to remove the usual […] code that shows up as well as pick how large/small we want the excerpt text to be. The code for this is below

function new_excerpt_more($more) {
	return '';
}
add_filter('excerpt_more', 'new_excerpt_more');

function new_excerpt_length($length) {
	return 30;
}
add_filter('excerpt_length', 'new_excerpt_length');

The above codes will strip the […] automatically from your site any time the the_excerpt code is used, as well as change the length of the_excerpt from the default, to the new 30 words.

Now we’ve got to do the same thing for the category boxes

For this section, we’re going to change the post count from 1 to 4, this way there are two rows of two posts under the featured wrap, all from the same category.

<?php $my_query = new WP_Query('category_name=Category&showposts=4');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<div class="categorywrap">
          <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
          <?php $values = get_post_custom_values("image"); if (isset($values[0])) { ?>
          <img src="<?php echo bloginfo('template_url'); ?>/timthumb.php?src=/<?php $values = get_post_custom_values("image"); echo $values[0]; ?>&w=173&h=100&zc=1&q=100" alt="<?php the_title(); ?>" class="aligncenter" />
          <?php } ?>
          <p><?php the_excerpt() ; ?></p>
</div>
<?php endwhile; ?>

Now, if you’re wanting to make each of the four boxes show a different category post, you’ll change the above codes to showposts=1, and copy/paste the codes four times (so there will be four .categorywrap divs in your html code, each sporting their own category_name).

Last but not least, we’re going to do the same thing for the recentlist area of the page

<div class="recentwrap">
     <div class="recentlist">
     <h4>Uncategorized</h4>
     <ul>
<?php $my_query = new WP_Query('category_name=Unorganized&showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
     <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
     </ul>
     </div>
     <div class="recentlist">
     <h4>News</h4>
     <ul>
<?php $my_query = new WP_Query('category_name=News&showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
     <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
     </ul>
     </div>
     <div class="recentlist">
     <h4>Monster</h4>
     <ul>
<?php $my_query = new WP_Query('category_name=Monster&showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
     <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
     </ul>
     </div>
</div>

View Demo

Step 6. Test, test, and re-test

Look things over at this point to ensure that everything is showing up properly. Here, we can tweak the design styles of the boxes by adding in background images and other cool features. The goal of this article was to give you that base to build off of, so let your creativity shine now 🙂

I hope you enjoyed the article and if you have any questions, feel free to leave a comment and I’ll do my best to answer them all.

This entry was posted on Monday, November 29th, 2010 at 09:42 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.