magazinetheme

How to create a wordpress magazine theme using Twenty Ten – Part 3

andy

• 5 min read
[Tweet](https://twitter.com/share)
**This is part three of a short series outlining how to tweak a wordpress template to get some magazine style functionality. [Part one](http://www.andydickinson.net/2010/09/21/how-to-create-a-wordpress-magazine-theme-using-twentyten/) and [Part Two](http://www.andydickinson.net/2010/09/22/how-to-create-a-wordpress-magazine-theme-using-twenty-ten-%E2%80%93-part-2/) are available here.**

In the previous part of this tutorial I looked at how we could display some custom content on our front page by adding another loop to the file. This gave us chance to experiment with template tags to customize what we say. But I also pointed out that we had a problem.

Our ‘new’ loop pulls out the latest story in our featured story category and puts the title and excerpt at the top of the page. But the original wordpress loop is still there. It pumps out the last 10 posts published on the site and theres a good chance that our featured post is one of them. That means we get the same story twice on the homepage.

Turning off the original loop

If you remember, the orginal loop is called using a* get_template_part* function in the Main Index Template file.

[php]

[/php]

We can turn the loop off by commenting it out.
[php]

[/php]

Notice how the function call has turned green like the comments. By adding a // in front of the function we turn it in to a comment which the server will ignore. If you update your file and look at the front page, you’ll see you only have the featured post.

Commenting out is a common trick when developing code. It allows you to try a few different things without deleting anything. Just don’t do to much, things can get confusing.

You may also have noticed that other comments in the file are marked between /…/ rather than a //. They are both valid. The /…/ is usually reserved for multi-line or blocks of comments rather than single lines. It also makes for a handy way to differentiate between comments (description of the code) and commenting out.

Adding another loop

Getting rid of the loop altogether is a bit of severe way to solve the repeat post option. What we need to do now is add a loop that allows us to get the posts back in a more controlled way. Add the following code after the new loop we added and before the original loop.

[php]
….

[
<?php /* This is the new loop to display a featured story.

		 * It creates a variable and then loads all the posts that match the query.
		 */

$my_query = new WP_Query('category_name=Featured Story&showposts=1');

		/* Now it loops through the results and displays the content.
		 */

while ($my_query-?>
have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;

/* We load the Page ID in to a variable to check for duplicates later on

  • Then it displays the title as a working link with formatting to
  • match the Twenty Ten template.
  • Then we display the excerpt.
  • Then we finish the loop with the endwhile statement
    */
    ?>

[](” title=”” rel=”bookmark”>


<?php 

		 /* This is the second loop that replaces the standard loop
		  * It uses the standard loop function calls
		 */

if (have_posts()) : while (have_posts()) : the_post();

if( $post->ID == $do_not_duplicate ) continue;

update_post_caches($posts);

/* This line gets the post ID and checks it agains our duplicate variable

* If it matches it does nothing. If it’s different we display the content

/

?>

<h2 class=) [wpmodder.com](” title=”” rel=”bookmark”>


<?php
/ Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
//get_template_part( 'loop', 'index' );
?>


[/php]

Any questions, comments etc. Let me know.

Note: I got the duplicate post detection code from <a href=), a great site.

](” title=”” rel=”bookmark”>


[/php]
Update the file and have a look at the results. You'll notice that the actual content is no different from the first loop we created. What is different is the way we have called the loop.

[php]


[/php]

This line starts the loop in a standard way. In our previous loop we used a custom query because we wanted one post from a specific category. So we set some conditions, if you have any posts then load them up, we’ll loop through them and while there is some content we’ll spit it out.

[php]


[/php]

The last line is also different. It ends the loop and, in this case, also tells the server to stop asking if we have any posts. So now we have our posts back and we are in control of the content we display. But this still doesn’t solve the duplicate post problem.

What we need is way we can save the details of the post from the first loop (the featured story) and check that against the second loop. Each time the loop goes round and processes a post we want to ask if it’s the same post as the featured story. If it is, ignore it and move on.

Making an ID.

WordPress has a very simple way of identifying posts. It gives them an ID number. This ID is unique to the post and even if we don’t see it anywhere on the page it’s used all the time behind the scenes. We’re going to use that ID number to compare our posts and weed out the duplicate.

The first thing we need to do is grab the ID of the featured story post.

Find the featured story query in your Main Index Template file (i’ve removed all the comments from mine for this part)

[php]

$my_query = new WP_Query(‘category_name=Featured Story&showposts=1’);

while ($my_query->have_posts()) : $my_query->the_post();

[/php]

Add the following directly underneath

[php]

$do_not_duplicate = $post->ID;

[/php]

That line creates a variable (remember anything with a $ is a variable) that stores the post ID for us to check

Now go to your second loop and directly after:

[php]


[/php]

add

[php]
<?php if( $post->ID == $do_not_duplicate ) continue;

update_post_caches($posts); ?>

[/php]

As it works through the loop it will get the post ID and compare it against our variable $do_not_duplicate if they are the same (==) then do nothing (confusingly, continue means do nothing and move on to the next post). The last part is there as a technicality to ensure that these custom loops don’t cause problems for plugins.

If you update your file and take a look at the front page then you should see the duplication problem has gone away

Conclusion.

Commenting out the original loop and replacing it with our own custom loop means we have a lot more control over what content is shown. It also meant that we could add a little extra code to get rid of the duplicate post problem.

Tomorrow, well look at adding a thumbnail and styling up the page. For now, here is your complete Main Index Template file so far:

[php]
<?php
/**

get_header(); ?>

<div id=)

Great! Check your inbox and click the link to confirm your subscription.
Please enter a valid email address!
You've successfully subscribed to andydickinson.net!
Could not sign up! Invalid sign up link.