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 8

  • Dawid Adach

    Dear Midi, this tutorial was created based on previous version of MDB which is based on Bootstrap Alpha-2 where flexbox is not enabled by default. We will update (and enhance it) in coming weeks.

  • User avatar

    middll

    Also, if I attempt to delete the sidebar column and instead center my blog post column with Bootstrap 4's (via flexbox alignment utilities) "justify-content-center" on the row element, it does not have an effect.

  • User avatar

    middll

    After using the final code for this lesson provided on this page, the css adjustments in the style.css folder do not seem to affect the element: http://imgur.com/a/cAmMa

  • 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 .

  • 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

  • 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

  • Dawid Adach

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

  • User avatar

    James Joseph

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

Leave a reply

Anonymous User

Wordpress tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free