
Author: Dawid Adach
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.
- Add the following code to the
functions.php
file after the last function we created (and before the closing ?> tag). - Replace the following code in
index.php
(lines from 55 to 233) - With the code below:
- 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:
- Open your blog. You should see your newly created posts with images:
/**
* Setup Theme
*/
function mdbtheme_setup() {
// Add featured image support
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'mdbtheme_setup');
...
<!--Grid row-->
<div class="row wow fadeIn">
.
[lines 57-231]
.
</div>
<!--Grid row-->
...
<!--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 echo 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.)


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.
Previous lesson Download Live preview Next lesson
Spread the word:
