[Tutorial #17] Home Page Part 3

[Tutorial #17] Home Page Part 3


In last tutorial we showed how to use parallax effect in home page’s partial template content-hero.php. Now we look at the other important feature: using wordpress’s The Loop.

The Code

You can also find the code on my Github page. We will focus on codes from line 16 to 54.


The Loop Concept

Why The Loop?

WordPress uses a set of PHP codes The Loop to:

  1. Grab the targeted posts from MySQL database and order them.
  2. Iterate over each post and display all or part of its content.

There is nothing mysterious about this process. A real world analogy is:

  1. Get toys out of the warehouses. Order them.
  2. Unpack each toy and display its content on the shelf.

While simple, the loop is one of wordpress’ most important procedures: showing content. Therefore it is really useful to understand how it works.

The Loop Components

The loop is consisted of the following main components:

1. WP_Query(…): MySQL queried post results (line 18)

WP_Query(...) is an object that contains MySQL queried post results. What it queries is specified in its parameters (explained later in this post).

2. while (line 22): Post iteration

This is the main post iteration. It does the following two things again and agin until stop:


Check if the $loop  still have post.

$loop->the_post() (line 22)

Take one post out of the $loop . It’s a bit confusing since at first sight no post content variables are set. What happens is that the function the_post() sets these variables in the background, so the template tags functions are able to grab variables and display them.

3. Template tags

Functions like get_permalink() (line 24) , get_the_category() (line 31) and the_title() (line 42) within the while loop generate HTML tags to display this post’s content (permanant url, category and title).

4. wp_reset_query: reset WP_Query

This resets the stored query results. It’s good practice to call this after each customized loops.

What the Loop Does Here?

In content-newpost.php we use The Loop to find the first three latest posts. We display them one per line, each line shows the post’s category, creation date, and title.

Code Detailed Explanation (line 15-65)

Line 16: Bootstrap container class

Line 18: Perform MySQL Query

As mentioned above the function WP_Query(..) queries wordpress’ MySQL database to grab posts. The parameter components are:

  • 'post_type' => 'post' : retrieved document type is wordpress’ ‘post’ type (typical blog posts).
  • 'orderby' => 'post_id' order the result by their id. Since wordpress assigns id incrementally by creation date, this effectively orders the post by creation date.
  • 'order' => 'DSC' : set the order as ‘descending’. Thus the newest created posts will be at front.

The result is stored at the variable $loop .

Line 21: post counter

We set a counter variable $counter to count the number of posts. Doing so we can limit the number of posts we want to show (in line 22 the condition $count < 3 ).

Line 22: main post iteration while loop

You can review PHP’s while loop here. Notice here we use the alternative symbol. The while conditions are:

  1. $loop->have_posts() : if there is still undisplayed posts.
  2. $count < 3 : limit displayed posts to the first 3.

$loop->the_post() sets the current post content so template tags can display the post’s components.

Line 24-26: set the post’s link to span the parent <div> tag

These codes work together with the corresponding CSS codes in style.css:

The procedures are:

  1. Create a hyperlink <a> tag to the post. The url can be retrieved via wordpress function esc_url(get_permalink());
  2. Within the <a> tag creates an empty <span> tag with a class (eg: link-spanner) for CSS to recognize.
  3. The above CSS style sets the <a> tag area to that of its parent (line 2-4). Then it pushes the <a> tag to the front (line 5) so the user can click on it.

Line 28,35,39: Bootstrap column classes

Line 31,32: Getting post’s category

A post can have multiple categories. Thus in line 32 we choose the first one and get its name by property “cat_name”.

Line 36: Get the post’s  creation date

You can further customize the date format via parameters. See reference here.

Line 42: Get the post’s title

Line 47: Increase counter $count by 1

This works with the while condition so only 3 latest posts are displayed.

Line 49: Reset query