Main loop

Main Loop

Currently, our blog posts are static, plain HTML files. This is of limited use as we want our theme to display a new post as soon as it gets created in the WordPress editor. Before we start rewriting the main part (index.php) we will have to add featured image support to our theme.

1. Add the following code to the functions.php file after the last function we created (and before the closing ?> tag).

/**
 * Setup Theme
 */
function mdbtheme_setup() {
    // Add featured image support
    add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'mdbtheme_setup');

2. Replace the following code in index.php (lines from 55 to 233)

...
<!--Grid row-->
<div class="row wow fadeIn">
.
[lines 57-231]
.
</div>
<!--Grid row-->
...

3. With the code below:

<!--Grid row-->
<div class="row wow fadeIn">
<?php
if ( have_posts() ) {
$counter = 1;
while ( have_posts() ) {
the_post();
?>

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
        <!--Featured image-->
        <div class="view overlay hm-white-slight rounded z-depth-2 mb-4">
            <?php the_post_thumbnail( 'medium-large', array( 'class'=> 'img-fluid')); ?>
            <a href="<?php echo get_permalink() ?>">
                <div class="mask"></div>
            </a>
        </div>

        <!--Excerpt-->
        <a href="" class="pink-text">
            <h6 class="mb-3 mt-4">
                <i class="fa fa-bolt"></i>
                <strong> <?php the_category(', '); ?></strong>
            </h6>
        </a>
        <h4 class="mb-3 font-weight-bold dark-grey-text">
            <strong><?php the_title(); ?></strong>
        </h4>
        <p>by
            <a href="<?php echo get_permalink() ?>" class="font-weight-bold dark-grey-text"><?php get_the_author(); ?></a>, <?php echo get_the_date(); ?></p>
        <p class="grey-text"><?php the_excerpt(); ?></p>
        <a href="<?php echo get_permalink() ?>" class="btn btn-info btn-rounded btn-md">Read more</a>
    </div>
    <!--Grid column-->

  <?php
  if ($counter % 3 == 0) { 
  ?>
  </div>
  <!--Grid row-->
  <!--Grid dynamic row-->
  <div class="row wow fadeIn">
  <?php
  }
  $counter++;                  
  } // end while
  } // end if
  ?>
  </div>
  <!--Grid row-->

(Note: if you are not sure which line to replace you can download the lesson files at the bottom of the page.)

4. In your WordPress Admin Panel, navigate to Posts and add three new posts. If you want to add a thumbnail to the post, click on "Set featured image" in the right bottom panel:

5. Open your blog. You should see your newly created posts with images:

We have used a lot of new functions, so let's analyze them one by one:

New functions

if (have_posts()) {...} this condition checks if there are any existing posts to be displayed.

while (have_posts()) {...} this construction is beginning of the WordPress loop. It will loop through all of the posts and executes the code between the {} brackets for each post. This is the most basic loop function: in the following tutorials you will find more advanced loops including conditions and filters.

the_post() this WP function retrieves the next post, this allows us to use the functions below (they won't work without it)

get_permalink() returns the permalink (URL) of post.

the_title() displays the post's title.

the_author() displays the author's name and a link to his profile.

echo get_the_date() prints (echo()) the date of the post's publication.

the_post_thumbnail( 'full', array( 'class'=> 'img-fluid z-depth-2'));() this function generates feature image code (<img src= .... >) which displays the feature image assigned to each post. It uses the 'full' size which we defined in the previous lesson. It also adds specific classes e.g. 'img-fluid z-depth-2' to the generated image.

the_excerpt() displays the post excerpt.

Let's move onto the next lesson where we will learn how to display new posts automatically.