Create a Magazine Style Theme II

Last week I gave an example of how to create a magazine style theme. This method allowed you to have a main post followed by a list of titles. This week I’ll explain how to separate these on the page so that you can have a far greater control over your layout.

The Latest Post

Rather than using the WordPress loop to display the latest post in full, we can use the get_posts() function to grab the latest post and display it in full. To do this we can use the following code:

$myposts = get_posts('numberposts=1&orderby=post_date&orderby=DESC');
foreach($myposts as $post) :
     setup_postdata($post); ?>
     <h2><a href="<?php the_permalink() ?>">< ?php the_title() ?></a></h2>
     < ?php the_content(); ?>
     <p>Posted In: < ?php the_category(', ') ?> | < ?php comments_number('No Comments', '1 Comment', '% Comments') ?></p>
< ?php endforeach; ?>

Put this in your markup where you want the post title, content and post meta displaying eg. within a div. You can use all of the standard Post tags that you usually use within the loop.

The Remaining Posts

Then we need to pull out the remaining posts in a list using the WordPress loop, however we don’t want the first post as we’ve already displayed this. To prevent the first post being displayed we use the query_posts() function, which allows us to add in additional parameters and manipulate the output in the loop. The code we use for this is as follows:

query_posts('showposts=5&offset=1');

This will tell the loop to retrieve 5 posts after the first post. We then use the loop to display the posts in a list with the above code just before the loop starts:

<ul>
< ?php
query_posts('showposts=5&offset=1');
if (have_posts()) :
    while(have_posts()) :
        the_post();
?>
            <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to < ?php the_title_attribute(); ?>">< ?php the_title(); ?></a> < ?php comments_popup_link('', '(1)', '(%)'); ?></li>
        < ?php endwhile ?>
< ?php endif; ?></ul>

This will then output a list of 5 recent posts, not including the most recent one.

Magazine Style Layouts

There are many ideas of how you could have your layout, and the code in this post will give you a greater flexibility to control what goes where. You could have the most recent post on the left side of your page and then just have your 5 (or 10, or any number) posts in the sidebar, or after a piece of brief about/welcome content. The options are endless

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

5