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
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 »</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
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 »</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
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??
To be Continued…
You can download the simple type theme here simple-type-part3.zip (Size 464.5 kB)
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)