Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

MDB main loop

Main loop


Written 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>
<!--Main layout-->
<div class="container">
    <div class="row">
        <!--Main column-->
        <div class="col-md-8">
            <?php
            if ( have_posts() ) {
            while ( have_posts() ) {
            the_post();
            ?>
            <!--Post-->
            <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>
                <br>
                <!--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">
                    </div>
                </div>
                <br>
                <!--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>
            </div>
            <!--/.Post-->
            <hr>
            <?php
            } // end while
            } // end if
            ?>
        </div>
        <!--Sidebar-->
        <div class="col-md-4">
        </div>
        <!--/.Sidebar-->
    </div>
</div>
<!--/.Main layout-->
</main>
            

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?


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 domain. Currently, Dawid's main focus is design & web development. He designs and develop websites using Adobe Photoshop, HTML5 / CSS3, bootstrap, JS, Meteor, AJAX, PHP and SQL.

Comments 5

  • User avatar

    James Joseph

    Article Images are not displayed ! how can i fix it ?

  • Dawid Adach

    Dear James, please mail me your code, I will have a look d.adach@mdbootstrap.com

  • Midi Hipi

    I added several categories but none are showing up in the list. Navwalker seems to be working it picks up the categorized category

  • Midi Hipi

    Also seems that the titles and excerpts of the post show up but the readmore link does not work. I must have missed something huge here

  • Dawid Adach

    Dear Midi, regarding categories, could you please send me your files at d.adach@mdbootstrap.com so I could check what is wrong? Regarding "Read more", please download lesson files and compare your code with lesson .

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.