Main loop

by Dawid Adach,

Final result preview
Live preview

It's high time to take care of main part of our blog. We will divide our page into two pieces. Left which will be responsible for displaying content, and right which will be a placeholder for widgets. To do that, we will use Bootstrap grid, if you don't know what is it follow this tutorial first.

Paste following code inside index.php between header and footer functions.

<!--Main layout-->
<div class="container">
    <div class="row">
        <!--Main column-->
        <div class="col-md-8">
            if ( have_posts() ) {
            while ( have_posts() ) {
            <div class="post-wrapper">
                <!--Post data-->
                <a href="<?php echo get_permalink() ?>"><h1 class="h1-responsive"><?php the_title(); ?></h1></a>
                <h5>Written by <a href=""><?php the_author(); ?></a>, <?php echo get_the_date(); ?></h5>
                <!--Featured image -->
                <div class="view overlay hm-white-light z-depth-1-half">
                    <?php the_post_thumbnail( 'full', array( 'class'=> 'img-fluid z-depth-2')); ?>
                    <div class="mask">
                <!--Post excerpt-->
                <p><?php the_excerpt(); ?></p>
                <!--"Read more" button-->
                <a href="<?php echo get_permalink() ?>"><button class="btn btn-primary">Read more</button></a>
            } // end while
            } // end if
        <div class="col-md-4">
<!--/.Main layout-->

New functions

if (have_posts()) {} - this function checks if there are any existing post to be displayed.

while (have_posts()) {} - this construction is beginning of WP loop. It will loop through all posts and print code between {} brackets for each post. This is the most basic loop function in next 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 functions like the_title() to display Title for the post which we are currently looping.

get_permalink() - returns permalink (url) of post.

the_title() - displays post title.

the_author() - displays author name and link to his profile.

echo get_the_date() - prints (echo()) date of post publication.

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

the_excerpt() - display the post excerpt.

When you refresh our blog, you will notice that all post were displayed one below the other. If you started from scratch, most probably you have only post created in your WP. Add few more (including feature image) to check whether our loop works fine.

Our loop looks great. However, there is one small issue - content is too close to our navbar. Let's fix it adding below CSS code to style.css file inside our main folder.

main {
  padding-top: 3rem;
  padding-bottom: 2rem;

Now it's perfect, so we can move to sidebar part.

If something doesn’t work as expected, you can download a final code for this lesson here:

Previous lesson Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author

Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of & is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Comments 13

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us