Create a Magazine Style Theme

The Morning After Screenshot

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.

Follow this blogger on Twitter!

Sarah 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
  • Digg This Post
  • Tweet This Post
  • Stumble This Post
  • Submit This Post To Delicious
  • Submit This Post To Reddit
  • Submit This Post To Mixx

10 Responses to “Create a Magazine Style Theme”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

  1. Chris says:

    This is an awesome idea. I have bookmarked it and will share with my webmaster. Thanks for sharing

  2. Cracking idea, will be sure to try this out when I have some time

  3. JD says:

    that looks awesome!

  4. slee says:

    I think one of the problems with some of the magazine style wordpress sites its that they don’t think of the user who has to update the site. A lot of the time they use extended post data which the user has to know how to use. So while the front end looks great it is not that easy to implement.

    It will be good if your examples will be easy for the user to look after his site as well.

    Obviously so far what you have shown us doesnt really effect the user as this is an automatic part of teh template which i like very much :)

  5. Sunil Pathak says:

    Hi Sara

    thanx for this and your 1st post (i haven’t read it yet though :razz: )

    i am taking print outs of your post and planning to work on my own theme ( i am fade up of trying all the free themes )

    i hope you wont mind me contacting you if i need any help or explanation of codes?

  6. Sarah says:

    Cheers for the comments guys.

    Slee – I’ve not come across a theme using the extended post data but it doesn’t sound user friendly. The method posted is quite basic so fairly simple to do but a subtle change can give a great effect.

    Sunil – If you need any help post up here or join the Blogging Tips forum where there’s plenty of help available and waiting :)

  7. Sinead says:

    I’ve been looking for something like this…many thanks! I’m just starting a new blog and had decided on Wordpress. Hopefully this will all work for me!

  8. Sunil Pathak says:

    Hi Sarah thanx for the invitation :razz:

    cya there guys :lol:

Comments are closed.

Comments are closed since this post is older than 30 days. However, you can continue this discussion in our popular Blogging Forums

Subscribe To BloggingTips Via RSS Subscribe To Blogging Tips Via Email Follow Us On Twitter Find Out More About Our Newsletter
 

Blogging Tips Sponsors

Blogging Tips Newsletter

 

Blogging Tips Sponsors

 

Latest from the Blogosphere