Single post

MDB website displayed on iPhones

Author: Dawid Adach

-

Single post

Our blog is almost ready, however, there is still one important part missing. We can display all our posts in a loop, but when someone tries to read the entire post it doesn't work. In order to let users read the entire content, we have to create a new file which will be responsible for displaying single posts. Let's do it!

1. HTML markup

  1. Create a file called single.php.
  2. Paste following code and save the file:
  3. <?php  get_header(); 
    require_once('components/navbar.inc.php'); ?>
    
    <!--Main Navigation-->
    <header>
    
        <!-- Intro -->
        <div class="card card-intro blue-gradient mb-3">
    
            <div class="card-body white-text rgba-black-light text-center pt-5 pb-4">
    
                <!--Grid row-->
                <div class="row d-flex justify-content-center">
    
                    <!--Grid column-->
                    <div class="col-md-6">
    
                        <h1 class="font-weight-bold mb-4">Post title</h1>
    
                    </div>
                    <!--Grid column-->
    
                </div>
                <!--Grid row-->
    
            </div>
    
        </div>
        <!-- Intro -->
    
    </header>
    <!--Main Navigation-->
    
    <!--Main layout-->
    <main>
        <div class="container">
    
            <!--Section: Post-->
            <section class="mt-3">
    
                <!--Grid row-->
                <div class="row wow fadeIn">
    
                    <!--Grid column-->
                    <div class="col-md-8 mb-4">
    
                        <!-- Breadcrumbs -->
                        <ol class="breadcrumb white z-depth-1">
                            <li class="breadcrumb-item">
                                <a href="#">Home Page</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Marketing Automation Category</a>
                            </li>
                            <li class="breadcrumb-item active">Very long title of the post</li>
                        </ol>
                        <!-- Breadcrumbs -->
    
                        <!-- Featured image -->
                        <img src="http://mdbootstrap.com/img/Photos/Slides/img%20(144).jpg" class="img-fluid z-depth-1-half mb-4" alt="">
    
                        <!--Card-->
                        <div class="card mb-4">
    
                            <!--Card content-->
                            <div class="card-body">
    
                                <p>by <a href="">Miley Steward</a> on December 28, 2016</p>
    
                                <hr>
    
                                <p class="h5 my-4">That's a very long heading </p>
    
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
                                    ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
                                    consequuntur maiores sed eligendi.</p>
    
                                <blockquote class="blockquote">
                                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                    <footer class="blockquote-footer">Someone famous in
                                        <cite title="Source Title">Source Title</cite>
                                    </footer>
                                </blockquote>
    
                                <p class="h5 my-4">That's a very long heading </p>
    
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
                                    ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
                                    consequuntur maiores sed eligendi.</p>
    
                            </div>
    
                        </div>
                        <!--/.Card-->
    
                        <!--Card-->
                        <div class="card card-avatar mb-4 wow fadeIn">
    
                            <!-- Card header -->
                            <div class="card-header font-weight-bold">
                                <span>Abut the author</span>
                                <span class="pull-right">
                                    <a href="" class="mr-3">
                                        <i class="fa fa-envelope mr-1"></i>
                                        Send message
                                    </a>
                                    <a href="">
                                        <i class="fa fa-facebook mr-2"></i>
                                    </a>
                                    <a href="">
                                        <i class="fa fa-twitter mr-2"></i>
                                    </a>
                                    <a href="">
                                        <i class="fa fa-instagram mr-2"></i>
                                    </a>
                                    <a href="">
                                        <i class="fa fa-linkedin mr-2"></i>
                                    </a>
                                </span>
                            </div>
    
                            <!--Card content-->
                            <div class="card-body">
    
                                <div class="media">
                                    <img class="d-flex mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 class="mt-0 font-weight-bold">Miley Steward</h5>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                                        vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                                        Donec lacinia congue felis in faucibus.
                                    </div>
                                </div>
    
                            </div>
    
                        </div>
                        <!--/.Card-->
    
    
                        <!--Comments-->
                        <div class="card card-comments mb-3 wow fadeIn">
                            <div class="card-header font-weight-bold">3 comments</div>
                            <div class="card-body">
    
                                <div class="media d-block d-md-flex mt-4">
                                    <img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" alt="Generic placeholder image">
                                    <div class="media-body text-center text-md-left ml-md-3 ml-0">
                                        <h5 class="mt-0 font-weight-bold">Miley Steward
                                            <a href="" class="pull-right">
                                                <i class="fa fa-reply"></i>
                                            </a>
                                        </h5>
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
                                        <div class="media d-block d-md-flex mt-3">
                                            <img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg" alt="Generic placeholder image">
                                            <div class="media-body text-center text-md-left ml-md-3 ml-0">
                                                <h5 class="mt-0 font-weight-bold">Tommy Smith
                                                    <a href="" class="pull-right">
                                                        <i class="fa fa-reply"></i>
                                                    </a>
                                                </h5>
                                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                                                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
                                                sunt explicabo.
                                            </div>
                                        </div>
    
                                        <!-- Quick Reply -->
                                        <div class="form-group mt-4">
                                            <label for="quickReplyFormComment">Your comment</label>
                                            <textarea class="form-control" id="quickReplyFormComment" rows="5"></textarea>
    
                                            <div class="text-center">
                                                <button class="btn btn-info btn-sm" type="submit">Post</button>
                                            </div>
                                        </div>
    
    
                                        <div class="media d-block d-md-flex mt-3">
                                            <img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg" alt="Generic placeholder image">
                                            <div class="media-body text-center text-md-left ml-md-3 ml-0">
                                                <h5 class="mt-0 font-weight-bold">Sylvester the Cat
                                                    <a href="" class="pull-right">
                                                        <i class="fa fa-reply"></i>
                                                    </a>
                                                </h5>
                                                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
                                                tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media d-block d-md-flex mt-3">
                                    <img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" alt="Generic placeholder image">
                                    <div class="media-body text-center text-md-left ml-md-3 ml-0">
                                        <h5 class="mt-0 font-weight-bold">Caroline Horwitz
                                            <a href="" class="pull-right">
                                                <i class="fa fa-reply"></i>
                                            </a>
                                        </h5>
                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
                                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
                                        similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
                                        fuga.
                                    </div>
                                </div>
    
                            </div>
                        </div>
                        <!--/.Comments-->
    
                        <!--Reply-->
                        <div class="card mb-3 wow fadeIn">
                            <div class="card-header font-weight-bold">Leave a reply</div>
                            <div class="card-body">
    
                                <!-- Default form reply -->
                                <form>
    
                                    <!-- Comment -->
                                    <div class="form-group">
                                        <label for="replyFormComment">Your comment</label>
                                        <textarea class="form-control" id="replyFormComment" rows="5"></textarea>
                                    </div>
    
                                    <!-- Name -->
                                    <label for="replyFormName">Your name</label>
                                    <input type="email" id="replyFormName" class="form-control">
    
                                    <br>
    
                                    <!-- Email -->
                                    <label for="replyFormEmail">Your e-mail</label>
                                    <input type="email" id="replyFormEmail" class="form-control">
    
    
                                    <div class="text-center mt-4">
                                        <button class="btn btn-info btn-md" type="submit">Post</button>
                                    </div>
                                </form>
                                <!-- Default form reply -->
    
    
    
                            </div>
                        </div>
                        <!--/.Reply-->
    
                    </div>
                    <!--Grid column-->
    
                    <!--Grid column-->
                    <div class="col-md-4 mb-4">
    
                        <!-- Sticky content -->
                        <div class="sticky">
                            <!--Section: Dynamic Content Wrapper-->
                            <section>
                              <div id="dynamic-content"></div>
    
                            </section>
                            <!--Section: Dynamic Content Wrapper-->
    
                            <!--Card-->
                            <div class="card mb-4">
    
                                <div class="card-header">Related articles</div>
    
                                <!--Card content-->
                                <div class="card-body">
    
                                    <ul class="list-unstyled">
                                        <li class="media">
                                            <img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder7.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                <a href="">
                                                    <h5 class="mt-0 mb-1 font-weight-bold">List-based media object</h5>
                                                </a>
                                                Cras sit amet nibh libero, in gravida nulla (...)
                                            </div>
                                        </li>
                                        <li class="media my-4">
                                            <img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder6.jpg" alt="An image">
                                            <div class="media-body">
                                                <a href="">
                                                    <h5 class="mt-0 mb-1 font-weight-bold">List-based media object</h5>
                                                </a>
                                                Cras sit amet nibh libero, in gravida nulla (...)
                                            </div>
                                        </li>
                                        <li class="media">
                                            <img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Others/placeholder5.jpg" alt="Generic placeholder image">
                                            <div class="media-body">
                                                <a href="">
                                                    <h5 class="mt-0 mb-1 font-weight-bold">List-based media object</h5>
                                                </a>
                                                Cras sit amet nibh libero, in gravida nulla (...)
                                            </div>
                                        </li>
                                    </ul>
    
                                </div>
    
                            </div>
                            <!--/.Card-->
    
                        </div>
                        <!-- Sticky content -->
    
                    </div>
                    <!--Grid column-->
    
                </div>
                <!--Grid row-->
    
            </section>
            <!--Section: Post-->
    
        </div>
    </main>
    <!--Main layout-->
    
    <?php  get_footer(); ?>
        
  4. Open your blog and click into on of the post. It will redirect you post page. Alternatively, you can click "View" in Dashboard -> Posts:
  5. View

    You should see the following website:

    Single post mockup

    This is our HTML markup. Exactly same as last time, it's static and doesn't fetch any data from our WordPress Blog yet. Let's fix it.

2. The title

If you have a looked at the code you might notice that we have reused some functions like get_header(), require_once('component/navbar.inc.php' or get_footer(). This will take care of our Navbar and Footer. Let's move to the title.

  1. Update first lines of the single.php file as follow:
  2. <?php  get_header(); 
    require_once('components/navbar.inc.php'); 
    if ( have_posts() ) {
    while ( have_posts() ) {
    the_post();
    ?>
    <!--Main Navigation-->
    ...
    
  3. And trialling lines as follow:
  4. ...
    <!--Main layout-->
    <?php
    } // end while
    } // end if
    get_footer(); 
    ?>
    

    That's how we added our WP Loop and dynamically fetch data from database.

  5. Update our title code:
  6. <h1 class="font-weight-bold mb-4">Post title</h1>
    
  7. Using function which you already know: the_title()
  8. <h1 class="font-weight-bold mb-4"><?php the_title() ?></h1>
    

    Now you should see same title as your original post.

Note

You can also use similar function get_the_title() (note the_). The difference is that the_title() automatically prints title. In case of get_the_title() which returns a string, you have to print it manually i.e. using echo

<?php echo get_the_title(); ?>

That doesn't make much sense in that case but remember that in case your title wouldn't show. That can save you a lot of time in debugging :) The second options is also useful whenever you want to do some manipulation to text before printing it. We will learn about that soon.

3. Breadcrumbs

A breadcrumb is a graphical control element frequently used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.

Breadcrumbs
  1. Update following code: (around line number 50):
  2. <!-- Breadcrumbs -->
    <ol class="breadcrumb white z-depth-1">
        <li class="breadcrumb-item">
            <a href="#">Home Page</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Marketing Automation Category</a>
        </li>
        <li class="breadcrumb-item active">Very long title of the post</li>
    </ol>
    <!-- Breadcrumbs -->
        
  3. With the following one:
  4. <!-- Breadcrumbs -->
    <?php
    $categories = get_the_category(); 
    $first_category_name = $categories[0]->cat_name;
    $first_category_id = get_cat_ID( $category[0]->cat_name );
    $first_category_link = get_category_link( $category_id );
    ?>
    <ol class="breadcrumb white z-depth-1">
        <li class="breadcrumb-item">
            <a href="<?php echo get_home_url(); ?>">Home Page</a>
        </li>
        <?php
        if (count($categories)){
        ?>
        <li class="breadcrumb-item">
            <a href="<?php echo $first_category_link ?>"><?php echo $first_category_name ?></a>
        </li>
        <?php 
        }
        ?>
        <li class="breadcrumb-item active"><?php the_title() ?></li>
    </ol>
    <!-- Breadcrumbs -->
    
  5. And refresh the post page.
  6. Our breadcrumbs are automatically generated. They will display a path to our post starting from our HomePage, through Category. Each step is a link either to the main page or category page (we will create category page later). That will help users to navigate. As you probably noticed we are displaying the first category. WordPress allows assigning more than 1 category, therefore, we are taking the first one, or skipping the step if the category is not set.

3. Feature image

  1. Replace following code
  2. <img src="http://mdbootstrap.com/img/Photos/Slides/img%20(144).jpg" class="img-fluid z-depth-1-half mb-4" alt="">
    
  3. With the one below:
  4. <?php the_post_thumbnail( 'large', array( 'class'=> 'img-fluid z-depth-1-half mb-4')); ?>
    

4. The post

Now let's take care of our post content part. Exactly same like in previous lessons, we will replace static HTML markup with dynamic WP functions.

  1. Update following part:
  2. <!--Card-->
    <div class="card mb-4">
    
        <!--Card content-->
        <div class="card-body">
    
            <p>by <a href="">Miley Steward</a> on December 28, 2016</p>
    
            <hr>
    
            <p class="h5 my-4">That's a very long heading </p>
    
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
                ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
                consequuntur maiores sed eligendi.</p>
    
            <blockquote class="blockquote">
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer class="blockquote-footer">Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </footer>
            </blockquote>
    
            <p class="h5 my-4">That's a very long heading </p>
    
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
                ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
                consequuntur maiores sed eligendi.</p>
    
        </div>
    
    </div>
    <!--/.Card-->
    
  3. And replace with following:
  4. <!--Card-->
    <div class="card mb-4">
    
        <!--Card content-->
        <div class="card-body">
    
            <p>by <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a> on <?php echo get_the_date(); ?></p>
    
            <hr>
            
            <div class="post-content">
            <?php the_content(); ?>
            </div>
    
        </div>
    
    </div>
    <!--/.Card-->
    

We are done with the content. Now entire post text will be displayed. You can also adjust the author box. In future lessons we will learn how to connect this part with our WordPress profile but now let's move on to next and more interesting section - comments.


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...