Our blog, keeping you up-to-date on our latest news.

 

Tutorial: Code a WordPress Theme from Scratch (part 3)

November 27, 2010 at 5:03 pm | Blog | 4 comments

 

Following on from the last tutorial Tutorial: Code a WordPress Theme from Scratch (part 2), we are now going to pull the posts from the database with WordPress Loop.

The WordPress Loop is used to query the posts from the database based on criteria. 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.

Step 1. Add a WordPress Loop to the home.php

In our example, there are four posts in the home page.

As you can see it is static HTML for now, for a CMS website we surely want to replace them with posts we add with the wordpress dashboard. So the posts can be updated on editor’s change in the dashboard. First, let’s look into the HTML code.

the layout is four columns, it is obvious that we should query four posts from the database. To me, to categorize posts is a best practice to manage the website, it will be easy to maintain. So i usually create several categories in the wordpress dashboard like, “blog”, “featured”, “portfolio” etc. For this tutorial, i would like to display posts from “blog” category in the home page at this section.

Here is the code:

<?php
        $the_query = new WP_Query('category_name=blog&posts_per_page=4');
        while ($the_query->have_posts()) : $the_query->the_post();
?>
       <li>
	        <h2><a href="#" title="Article title">Article title</a></h2>
		<div class="meta">published on 22 may, 2009</div>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
		fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, 
		ultricies eget, tempor sit amet, ante. </p>
		<p>Donec eu libero sit amet 
		quam egestas semper. Aenean ultricies mi vitae est. 
		Mauris placerat eleifend leo.</p>
		<a href="#" class="more" title="Read more">read more &raquo;</a>
	</li>
<?php  endwhile; ?>

Let me explain the code.
It defines a query object at the first line. Especially in the home page, you might want to do something with one group of posts, and do something different to another group of posts. So we want to have multiple Loops. I like to define different custom query objects for each loop separately. It is easy to understand and won’t mess up posts.

the loop starts with “while ($the_query->have_posts()) : $the_query->the_post();” and ends with “endwhile”.

Step 2. Add Loop tags

for each item in the Loop, we should replace the static data with Loop tags. The following is a diagram shows what tags to use.

Another exception we need to pay attention to is the last

<li> </li>

HTML block. it has a special class defined “no-margin”, so we need to write extra codes to handle it. Following is the final code snippet.

<ul>
<?php
        $count = 0;
        $the_query = new WP_Query('category_name=blog&posts_per_page=4');
        while ($the_query->have_posts()) : $the_query->the_post();
            $item_class = "";
            if ($count == 3)
                   $item_class = "no-margin";
?>
           <li class="<?php echo $item_class; ?>">    
                  <h2><a href="<?php the_permalink() ?>"><?php the_title();?></a></h2>
                  <div class="meta">published on <?php  the_time('F j, Y');?></div>
                   <?php the_excerpt();?>
                   <a href="<?php the_permalink() ?>" class="more" title="Read more">read more &raquo;</a>
            </li>      
<?php 
        $count++;
        endwhile; ?>
</ul>

Let me explain the code. the variable $count, is to count the post number, when it is the last post, which is number 3 (note the count starts from 0). we add a special class to the

<li> </li>

tag.

we use the “the_permalink()” to get the url for this post, the “the_title()” to get the title of the post, the “the_excerpt()” to get the content, and the “the_time()” tag to get the published time. for more tags, you can check out from the reference.

Ok, save the file, and enable this theme for your WordPress. Of course, if you have not created “blog” category, please create a category named “blog”, slug “blog”. And then added more than four posts into this category. and the latest newly added fours posts should be displayed in the home page now! preview your theme, How do you like it??

Reference

http://codex.wordpress.org/Template_Tags
http://codex.wordpress.org/The_Loop

To be Continued…

You can download the simple type theme here simple-type-part3.zip (Size 464.5 kB)

In the next tutorial part 4, we are gonna add javascript to the theme to make it fancy. please stay tuned.

the series

Tutorial: Code a WordPress Theme from Scratch (part 1)
Tutorial: Code a WordPress Theme from Scratch (part 2)
Tutorial: Code a WordPress Theme from Scratch (part 3)
Tutorial: Code a WordPress Theme from Scratch (part 4)

<< Back to Blog Discuss this post

 

4 Comments to “Tutorial: Code a WordPress Theme from Scratch (part 3)”

  1. johnny says:

    i like it

    yezee Reply:

    me too

  2. dalle says:

    how to add image (thumbnail) in the loop content ???
    thanks.