WordPress: Let’s take a look at the Loop

In the previous articles of this guide we succeeded in – starting from scratch-  developing the higher part  (the header) of our site/blog. With today’s lesson we’ll enter in the heart of WordPress’s mechanism, the thing  that in jargon is called “loop”.

What’s this loop and how to use it? This is surely one of the many questions that arise  to the mind of who finds oneself for the first time to dissection a theme of WordPress to personalize it as one likes. So, let’s see how to answer this question and make everything clearer.

Index of the contents

  1. What’s the loop and how to use it?
    1. The start of the loop
    2. Generation of the articles
    3. Show the title, the date and the author
    4. Show the contents of the article
    5. Show additional details
  2. Add a paging at the end of the loop
  3. Add a text to visualize in case there are no articles
  4. Conclusions

1. What’s the loop and how to use it?

Loop literally means “repeated execution” of “something”, in our case it refers to the repeated execution “n” times  of a set of instructions necessary for the visualization of an article. Repeating these instructions “n” times there going to be visualized “n” articles in the point where the loop is recalled.

Turning back to the theme we’re creating, suppose we want to divide in two columns immediately under the header. In the left column we’ll visualize the list of the recent articles published while in the right column we’ll show a sidebar on which we’ll insert  (in one of the next lessons) some useful  information that we want to show on all the pages of the site/blog. In brief we’re defining the  classical layout of a blog.

I remember you that there’s nothing that prevents to define in a completely different way the sections: the way these contents will be presented on the monitor will be later defined in our style sheet.

So we’re going to realize the HTML markup necessary to visualize the left column that will contain our articles:

<!-- START LEFT COLUMN -->
<div id="content">
	<?php if (have_posts()) : ?>

		<!-- START LOOP -->
		<?php while (have_posts()) : the_post(); ?>

			<!-- BEGIN POST -->
			<div <?php post_class(); ?>>

				...post content...

			</div>
			<!-- END POST -->

		<?php endwhile; ?>
		<!-- END LOOP -->

	<?php endif; ?>

</div>
<!-- END LEFT COLUMN -->

This is instead the rule to define in our style sheet for the visualization of  the section content on the left of our layout with a dimension of  650 pixel (note: to make more it evident  I temporarly added the usual red border of one pixel).

#content  {width:650px; margin:30px 0;float:left;border:1px solid red;}

A small introduction before we analyze in detail the markup that we created. As you can notice, to process the loop we’ve used some typical constructions of the php language, that’s why for a good comprehension it’s advisable to have at least a minimum of  notions of  the meanings of the main constructions of this language.

1.1 The start of the loop

Let’s analyze now in detail the markup that we wrote:

  1. As the first thing the section that delimitates the left column (content) will be defined.
  2. Aterwards we do what in computer language is called conditional control, with the construction “if” of the php language we verify the function  have_posts() of WordPress to control if there are any posts, the function will give back the value  “true” in case there are posts.
  3. If there are posts a  while cycle will start up ( the famous loop we’re talking about) and will continue to go on as long as the fuction have_posts() give a true value, that is until there are posts to show.
  4. When the function have_posts() gives back a  false value - that is in the moment when there aren’t no more posts to show – the cycle will stop.

1.2 Generation of the articles

The function the_post() takes the element (the article/post) current of the cycle and it makes it available for the use inside this iteration. Without this function  many of the tags used to publish the information concerning the post wouldn’t work.

Once that the information relative to the post are made available, the template can start to show the data on the page to make it visible to the users. For the moment, inserted only  the string “contents post” and not have used no tags for the visualization of the information relative to the post, our page will be like in figure 1.

Figure 1 – Generation of the articles inside the loop.

1.3 Show the title, the date and the author

Now let’s try to replace the static writing that we inserted inside the loop (…contained post…) with some tags that will give us back the information concerning the post we want to show.

To visualize the title of the post all we need to do is use the function the_title() as shown below:

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

If we go  and take a look at the page of our blog we should see the title of  of the post as it is shown in Figure 2.

Figure 2 - Display the post title inside the loop

If we want to make the post’s title  linkable in order to connect it to the contents of the article, we can use the function the_permalink():

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

Now the title of our post  has become an hypertextual link that points to the contents of the article.

What do you think if we also show the date of pubblication and the name of the article’s author?

Immediately under the title, we add these two lines recalling the functions put at disposal by WordPrpess the_time() e the_author() to show both the date of pubblication and the author of the article:

<p class="data">
	<?php the_time('j F Y') ?> di <?php the_author() ?>
</p>

We define the class data in our style sheet to format the presentation of these contents:

p.data  {font-style:italic;font-size:85%;}

At this point our page should be as visualized in Figure 3.

Figure 3 - Display the article author and date inside the loop

1.4 Show the contents of the article

The function the_content() serves to show the contents of the article. But there’s one thing that we should pay attention on: the function in question visualizes in the document the contents of the article up to the tag <!–more–>, in case this was used during the writing of the article.

For who don’t know, the tag <!–more–> permits to define a portion of article to visualize eventually as  incipit/introduction of the same  (Figure 4).Doing like this the part of article inserted immediately after this tag will be shown later, when -and if – the user decides to read the whole content clicked on the relative hpertextual link.

Figure 4 - Using more tag

Adding on our template the function the_content() immediately after the date and the author, in our homepage we’ll visualize the contents of the article up to the tag  more, with a text (passed as parameter to the function) that invites to continue the lecture  and that connects in an automatic way to the article.

<div class="entry">
	<?php the_content(__('|| read more &raquo;')); ?>
</div>

Let’s go and see the contents of our homepage  that starts to shape up (Figure 5).

Figure 5 - Show the content of the article inside the loop

1.5 Show additional details

Want to add some other details concerning our articles?

Maybe immediately after the incipit it would be useful to visualize the category of the article or the number of the received comments. With the use of the functions  the_category() and comments_popup_link() we can soddisfy our requests:

<p class="postmetadata">
	Posted in <?php the_category(', ') ?>
</p>

<p class="right">
	<?php comments_popup_link('Nessun commento &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?>
</p>

At the function the_category() we passed as parameter a comma (,); in case  there have been assigned more than one category to the article, this will be the separating character used to divide on the monitor the categories from each other.

At the function comments_popup_link() have been passed three parameters:

  1. the first one represents the text to visualize in case the article doesn’t have no comments;
  2. the second represents the text to visualize in case the article has one single comment;
  3. the third and last parameter represents the text to show in case the article has more than one comment.

In Figure 6 you can see a preview of how our homepage seems now.

Figure 6 - Display article's categories and comments inside the loop

As regards to the visualization of the articles we can see that we got it. Now we give a final touch to the page before we end with today’s lesson.

2. Add a paging at the end of the loop

With the pre-defined setting WordPress visualizes the last ten articles on the homepage of the blog, although this setting can be easily modified by the administration panel (Setting -> Reading) indicating the number of articles we want to visualize. In case in which in the homepage of the blog there are present more pages than indicated , these will be subdivided in more pages in an automatic way directly  by WordPress.

At this point it’s indispensable to visualize a paging at the end of the loop that give us the possibility to navigate from one page to another in case it’s necessary.  For this purpose WordPress puts the  functions of navigation for the pagings of the post at our disposal.

We add these code lines immediately after the end of the loop:

<div class="navigation">
	<div class="alignleft"><?php next_posts_link(__('&laquo; Next')) ?></div>
	<div class="alignright"><?php previous_posts_link(__('Previous &raquo;')) ?></div>
</div>

3. Add a text to visualize in case there are no articles

We have to foresee also the case in which in our blog there are no articles. At the beginning of this lesson we’ve said that before the start of the loop we verify if there are articles present with the funtion have_posts():

<?php if (have_posts()) : ?>

In case it’s affirmative we proceed with the loop and with the visualization of the articles, but in case the verification gives a negative value?

To avoid this particular condition, we add before the closing of the construction if (endif), an alternative message to show in case the beginning condition isn’t true:

<?php else: ?>
    <h2><?php _e('Not found'); ?></h2>
    <p class="center"><?php _e('Sorry, what do you looking for is not in this page'); ?></p>
<?php endif; ?>

4. Conclusions

Up to this point on our blog we have one single article created by WordPress in an automatic way during the installation. Before we conclude let’s try to add a new article  (Figure 7) for a trial to see how this will be visualized on the template we’ve created till now (Figure 8).

Figure 7 - Adding of a new article

Figure 8 - Home page of our theme

I eliminated the red border used at the beginning exclusively  for teaching purpose and now our template, as you can see, starts to have a shape.

Today we’ve done the most complicated part of the realization of a theme for WordPress, the loop. If you were able to understand the mechanism without problems WordPress has no secrets for you, it can be dissected and rebuilt  whenever you want and according to your needs.

However my advice is always to consult the excellent documentation on the ufficial website  to study throughly all the functions dealt in this lesson in order to fully comprehend the potentialities and use them in the best way according to our needs. In the next lesson we’ll define the sidebar of our blog, the side column that generally repeats on all the pages of the site. Are you ready?

Index of Articles in this guide

In order to make the consulting of this guide easier at the end of each article I will bring the index of all the issues treated.

  1. How to Install WordPress locally?
  2. WordPress: Let’s have a look at the Administration Panel
  3. How to Create a WordPress Template Starting from Scratch?
  4. WordPress: How to Create the Theme header? (part 1) (part 2)
  5. Let’s take a look at WordPress Loop
  6. Adding the Sidebar to our theme
  7. WordPress: how to make dynamic the Header and the Sidebar of the template?
  8. Hierarchy of the templates and their use: how to create a template for the articles?
  9. How to Create Personalized Templates for WordPress Pages?
  10. Using the Widgets on the Sidebar of Our Template
  11. Personalizing the Template of WordPress Comments

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

7 comments

  1. Alex

Trackback e pingback

  1. Tweets that mention WordPress: Let’s take a look at the Loop | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by soshableweb and V. Tavares (E-Goi), Tom Bangham. Tom Bangham said: WordPress: Let’s …
  2. WordPress: Let’s have a Look at the Administration Panel | Your Inspiration Web
    [...] Let’s take a look at WordPress Loop [...]
  3. How to install WordPress Locally? | Your Inspiration Web
    [...] Let’s take a look at WordPress Loop [...]
  4. WordPress: Adding the Sidebar to our theme | Your Inspiration Web
    [...] we go again with our course on the creation of a WordPress theme, we stopped some days ago with …

Leave a Reply

Current month ye@r day *