Create a Magazine Style Theme

A few weeks ago I wrote about how to create your own template for WordPress. A type of design growing in popularity is the Magazine style theme. Probably because it comes across as a more professional look and is maybe a bit less overwhelming to first time visitors, as it typically only displays the most recent post in full, and then lists previous posts.

The first time I saw a magazine style theme was The Morning After from Arun Kale. There were others around but this caught my eye immediately. There are a lot more of these style of themes around now for you to download and play with.

However, if you want to perhaps take your own design and convert it to a magazine style then it’s not that hard to do. Using my original posts on creating your own template, we need to build on this.

The first step is to duplicate your usual multi post index.php page and save it as archive.php (if you haven’t already). This will then keep your archives and category pages listing your posts out as usual. Alternatively you could alter these pages to just have an index of all the posts.

So once you’ve duplicated the index.php, you need to then open up index.php to edit this for the front page. The code we can use follows:

< ?php $postchk = TRUE;
if (have_posts()) :
    while(have_posts()) :
        the_post();

        if ($postchk) :
            $postchk = FALSE; ?>
           <div class="post" id="post-2874">
               <h2><a href="http://www.bloggingtips.com/2008/09/14/create-a-magazine-style-theme/" rel="bookmark" title="Permanent Link to < ?php the_title_attribute(); ?>">< ?php the_title(); ?></a></h2>
	       <small>< ?php the_time('F jS, Y') ?> <!-- by Sarah --></small>

	       <div class="entry">
	           < ?php the_content('Read the rest of this entry &raquo;'); ?>
	       </div>

	       <p class="postmetadata">< ?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in < ?php the_category(', ') ?> | < ?php edit_post_link('Edit', '', ' | '); ?>  < ?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
           </div>

            <ul>
        < ?php else : ?>
            <li><a href="http://www.bloggingtips.com/2008/09/14/create-a-magazine-style-theme/" rel="bookmark" title="Permanent Link to < ?php the_title_attribute(); ?>">< ?php the_title(); ?></a> < ?php comments_popup_link('', '(1)', '(%)'); ?></li>
        < ?php endif;
    endwhile ?>
    </ul>
< ?php endif; ?>

To explain the main additions here:

• Line 1 we have our check initialised and set to TRUE. This is so that we can use the code to display the full post for the first post, and then we’ll set it to FALSE so that the second set of code, for just listing the posts, is used.
• Then, on line 6 we use an if statement to check whether our check variable is true. If it is then we set this to false, so that it doesn’t trigger the full post code again, and then we have our standard code displayed to show the full post. You can replace line 8 – 17 with your own full post code.
• On line 19 we’ve got an opening unordered list tag. This is for the start of our archives list which we’ll display below the full post.
• Then on line 21 we have the code to output a list item with the second post and on, depending on how many posts you’ve got set to be output. The list item will have the post title linked to the post, followed by the comment count.
• Finally on line 24 we close the unordered list for the archive posts.

This will give us a full post first followed by an unordered list of the archived posts. The number of posts displayed will follow your settings in the Options – Reading admin panel.

Magazine style posts can look more professional, they can also give a less blog like look and possibly a better structure for seeing information quicker, however they need to be structured well to ensure your readers can find what they want to find as easy as possible.

Written by Sarah from Stuff By Sarah
Posted on September 14th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

10