A Path Less Taken

The Loop. The WordPress Loop is a concept that some non-programmers struggle with. My goal here is to explain it in simple enough terms that you can understand how it works and use it effectively. I’m not going to look at the individual functions in great detail like we did in the previous posts. Instead you are going to have a homework assignment that will (if you do it) make you a much stronger WordPress theme builder. So without further preamble let’s dive into some code!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?php get_header() ; ?>
	<div id="contentContainer">
		<div id="content">
<?php
		if (have_posts ()) {
			while (have_posts ()) {
				the_post () ;
?>
			<!-- The header section of the post -->
			<div id="postHeader">
				<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
				<?php the_date('l, F j, Y', '<h4>', '</h4>'); ?>
			</div><!-- close postHeader -->
 
			<!-- The content or main body section of the post -->
			<div id="postContent">
				<?php the_content ("Read the complete post >>") ;?>
			</div><!-- close postContent -->
 
			<!-- The footer section of the post -->
			<div id="postFooter">
				<?php comments_popup_link(__('0 Comments'), __('1 Comments'), __('% Comments')); ?> / 
				<?php _e("Category: "); ?> <?php the_category(',') ?> / 
				Author:  <?php the_author () ?>
			</div><!-- close postFooter -->
<?php
				comments_template () ; // Get wp-comments.php template
			} // close while (have_posts ())
		} // close if (have_posts ())
		else {
?>
			<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php
		} // close else
?>
			<div id="postNavLinks">
<?php
		posts_nav_link('&#8212; ', __('&laquo; Newer Posts'), __('Older Posts &raquo;'));
?>
			</div><!-- close postNavLinks -->
		</div><!-- close content -->
<?php get_sidebar() ; ?>
	</div><!-- close contentContainer -->
<?php get_footer() ; ?>

What you see is our old friend index.php. You will need to edit your copy to make it match this. You will notice that our simple little file has grown up a good bit. I have excluded any comments in my copy to make the code block brief. Once we are completely finished I’ll release my copy of the Welcome theme that will contain all the comments.

Let’s look at The Loop. The first thing you might notice is that my formatting is not the same as many other examples you will find. This is because “as a general rule” it is considered bad form to intersperse PHP code and XHTML code in the same file. This is only typically done in templates (which WordPress themes are), but I still tend to cling to my roots as a programmer and avoid all the <?php ?> tags that I can. Enough said about that.

The loop kicks off with the if statement:

5

		if (have_posts ()) {

If statements are just commands used by programmers to tell their program to “do something” if the “condition” is true. In this case we are calling the WordPress function have_posts () and asking it if your blog has posts. To be honest have_posts () and the_post () are two functions that once again make me mad. If you search the WordPress.org site your first search hit is not the definition of the function. Sigh. The { is just a PHP structure item that says open a block of code. In this case it’s the block that will be done IF your blog has posts.

The next line has the following statement:

6

			while (have_posts ()) {

This is The Loop. Basically it’s just saying WHILE your blog has posts, do this. I know, you’re thinking what’s going to happen? Will my blog lose all it’s posts? No, nothing that serious. What is really happening behind the scenes is WordPress has queried all your posts from the database. You then essentially have a pointer that is at the top of the list of posts that were returned. Each time you call the function

7

				the_post () ;

the pointer is moved to the next post. The first time you call the_post () the pointer moves to the first post. When the pointer reaches the end of the list and you call the_post () AGAIN it will move past the end of the list that was queried from the database. When this happens have_posts () will return false and your Loop will end. That’s all there is to it. All the rest of the code is just a bunch of function calls that return values relative to the current post that is indicated by the pointer.

HOMEWORK: For your homework assignment go to WordPress.org and use the search feature (currently the upper right hand side of the page) to look up each function that is called to display the post. This will give you more insight into how the display can be customized. Also, go to Template Tags Codex and look at the “Post tags” section to see what other options you have for adding content to your theme.

Now you can preview your Welcome theme and you should see your posts showing up. This is pretty exciting stuff, right? Yeah, I’m bored too. One of the cool parts of WordPress is that it has a lot of “default” behavior built in. This means that many of the other views that you can theme also will work just fine with no effort from you. That’s not to say they will then look like the rest of your theme. We will look at those sections in a future post.

Another important point to note here is that your theme is kind of plain. You might say it’s naked! I know it’s hard to get an idea what the final product will look like without styles, but the great thing about a theme without styles is you can verify it is formatted properly and makes sense even without the fancy Christmas lights. We will look at applying styles to your Welcome theme in a future post.