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

This is part two of a short series outlining how to tweak a wordpress template to get some magazine style functionality. Part one is available here.

The copy to clipboard option

Note: If you want to copy code directly from this tutorial roll you mouse over the top, right-hand corner of the code and a little window will pop up with a copy code function.

In the previous part of this tutorial we set ourselves up to experiment with the Twenty Ten Template. So at this point you should have

  • A working installation of the wordpress.org (version 3 or above)
  • The Twenty Ten theme set as the active theme
  • A number of posts sorted in to three categories – News, Sport and Featured Article
  • The permissions for the Twenty Ten theme folder set to 666

The next step is to take a look at the files we are going to edit.

The Main Index template

If you switch to Appearance > Editor and click the Main Index Template link on the right.

You should see the following in the editor window.

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query. 
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

		<div id="container">
			<div id="content" role="main">

			<?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' );
			?>
			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

We start with some comments. Notice that and see where the PHP starts and ends and you should be able to spot a few function calls. These essentially piece the page together bit by bit. For example…

get_header();

…calls the first part of the webpage including all the HTML needed to set the page up and display the blog title and navigation. The only function that might not be immediately obvious is:

 get_template_part( 'loop', 'index' );

This function calls a template file called loop (loop.php) which contains all the information needed to get and display the list of posts on the front page. It also tells the function that this request has come from the index(homepage).

You can take a look at the loop.php template by opening it in the editor – pretty scary. But the loop is key to the way WordPress works.

What is the loop

Here’s what WordPress say about the loop:

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post. When WordPress documentation states “This tag must be within The Loop”, such as for specific Template Tag or plugins, the tag will be repeated for each post.

Just to put that in to context, a standard front page would use the loop to :

  1. Get the last 10 posts in the wordpress database, sorted in date order
  2. For each of each post, get the headline, content and other related content and create the HTML to display it
  3. Repeats that process until all ten posts are done.

This might sound complicated but it’s actually got a lot simpler in WordPress 3.0. In earlier versions the loop would be part of the index page. Instead of the relatively simple file above, you would have all the loop content in there as well. This meant a lot more to pick through to sort out a page. You could argue that it’s just shifted the complex stuff to another file. But as we’ll see, it does make life easy for us.

The bottom line is that getting a grip on the loop is the key to tweaking a template. So let’s have a go.

Backing-up

Make sure you have the Main Index Template file loaded in to the editor

  • Copy all the content
  • Open your text editor and paste the content in to a new document.

This is your back up of the file. If anything goes wrong, you can just copy and paste the original file content back. I would advise that you do this at regular intervals. Just copy and paste in to the file and you’ll have a big file with each iteration of the file.

Adding another loop

Now that we are backed up we can edit a file. When working I tend to have two tabs open so I can switch between the backend, where I’m editing, and the front end to see the results.

So, in the backend make sure your in the editor and your looking at the Main Index Template file .

Just after:

<div id="content" role="main">

Add the following:

<?php  
$my_query = new WP_Query('category_name=Featured Story&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post(); 
?>

<h2><?php the_title(); ?></h2>

<?php endwhile; ?>

Click the Update file button to save the changes.

The new loop content

The result should be that the title for the most recent post in the Featured Story category appears at the top of the page with the original list of posts below. It won’t work like a link, that comes next.

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

The first line defines a variable or temporary store for information called $my_query (In PHP variables always start with the $ sign). The ‘value’ of that variable is the result of a new database query which uses the WP_Query function to ask for 1 post from the Featured Story category. By asking for one, you’ll get the latest one.

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

The second line starts a loop. It says that while our variable has content (posts) spit out the content of the post so we can do something with it. In this case we display the title:

<h2><?php the_title(); ?></h2>

Notice the mix of PHP and HTML here. The H2 tag formats the title but its the function the_title() that gets the content. The last bit…

<?php endwhile; ?>

…ends the loop and lets wordpress get on with the rest of the page.

Because we stipulated one post in the query the loop only goes round once. You could try adding more posts to the Featured Story category and adjusting the showposts value to see how it handles more than one post.

Dealing with errors

oops, you've missed something

When you bash around with PHP you will eventually come across an message like this when you look at your page. Don’t panic! All it means is that you’ve missed a bracket or other element in the code. Juts go back and check through. The error message even gives you a clue to what and where you made the mistake.

Adding more content

We can pull in more content from the post using some simple template tags.

Add the following after the_title() code:

<?php the_excerpt(); ?>

So the the bit you’ve added should resemble

<?php  
$my_query = new WP_Query('category_name=Featured Story&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post(); 
?>

<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
The added excerpt

Update the file and have a look at the results. You should get the title with a short excerpt and a continue reading link. Check out the wordpress codex entry for the_excerpt() function to see what’s going on.

It’s that simple!

Making the title in to a link

The last part for today is to get the title to work as a link. Here’s the basic code:

<h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>

I’ve wrapped the the_title() function in a link. But instead of putting a website address on the href= bit I have called another function the_permalink() which returns a direct link to the story.

This will work but it isn’t really complete. To fit in with the template (and well written html) it needs some more information. To make sure it follows the same format as the template I’m going to cheat here and pull in some code from the standard loop (cut and paste from the loop.php file):

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf(esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php 	the_title(); ?></a></h2>

If you look hard enough you can still see the the_title() function buried in there and the link. The rest is mix of HTML to make a link and some functions to call various bits of content. I won’t go in to them here but I can be sure that it will produce a link that will fit in with the rest of the template.

The formatted title

Conclusions

By adding another loop at the start of the index page we are able to control what which posts are displayed. Using template tags means we can pick which bits of the post we display. The simple nature of the new WordPress 3.0 main index template means we don’t have huge amounts of code to wade through and if we panic we can simply delete the stuff we have added and the original template is intact.

We still have some issues of styling and we also want to add some thumbnails to our posts. But if you look at the list of posts on the front page you will notice we have another problem – the featured post we called in our new loop is repeated in the original loop content. So quite a few things to sort out.

So tomorrow we will look at how we can replace the old loop all together and how to avoid that duplication. Then, in the final part we’ll look at how we can add the thumbnail and style the content to improve the look and feel. For now, heres the complete file we are left with (with comments added by me) :

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query. 
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

		<div id="container">
			<div id="content" role="main">

<?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(); 

			/* 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
			 */
?>

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf(esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php 	the_title(); ?></a></h2>
<?php the_excerpt();?>
<?php endwhile; ?>

			<?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' );
			?>
			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>


As usual, comments and corrections always welcome.

9 thoughts on “How to create a wordpress magazine theme using Twenty Ten – Part 2”

  1. Andy, Is it a good idea to set up a child theme for future wordpress updates?
    If so, as we twick also the .php, do I need to add only the .css file in the Child directory or sometghing else?
    Thanks
    Jason

  2. Hi!

    I’m not getting “the excerpt” to work. It still displays the whole text on the front page, any ideas what could be wrong?

    I really appreciate the guide, though!

    Heres my index.php code:

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

    <a href="” title=”” rel=”bookmark”>


  3. Had no idea until now that you can tweak twenty ten to use as a magazine style. You basically get the best of both worlds. I have to give it a try for my site. Thanks!

Leave a Reply