Single post

Single post

Our blog is almost ready, however, there is still one important part missing. We can display all of 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 in the following code and save the file:

<?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="https://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="fab fa-facebook-f mr-2"></i>
                                </a>
                                <a href="">
                                    <i class="fab fa-twitter mr-2"></i>
                                </a>
                                <a href="">
                                    <i class="fa fa-instagram mr-2"></i>
                                </a>
                                <a href="">
                                    <i class="fab fa-linkedin-in 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(); ?>
    

3. Open your blog and click into one of your posts. It will redirect you to the post page. Alternatively, you can click "View" in Dashboard -> Posts:


You should now see the following website:



This is our HTML markup. Exactly the 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 the first lines of the single.php file as follows:

<?php  get_header(); 
require_once('components/navbar.inc.php'); 
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<!--Main Navigation-->
...

2. And trailing lines as follows:

...
<!--Main layout-->
<?php
} // end while
} // end if
get_footer(); 
?>

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

3. Update our title code:

<h1 class="font-weight-bold mb-4">Post title</h1>

4. using a function, which you already know: the_title()

<h1 class="font-weight-bold mb-4"><?php the_title() ?></h1>

Now you should see the same title as your original post.

Note

You could also use similar function get_the_title() (note the_). The difference is that the_title() automatically prints the 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. However, remember that in the case your title wouldn't show, this approach, can save you a lot of time in debugging :) The second option, is also useful whenever you want to do some text manipulation 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.

1. Update the following code: (around line number 50):

<!-- 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 -->
    

2. With the following code:

<!-- 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 -->

3. And refresh the post page.

Our breadcrumbs are now 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 a category page (we will create category pages later). That will help users to navigate. As you probably noticed, we are displaying the first category. WordPress allows us to assign more than one category, therefore, we take the first one, or we skip the step if the category is not set.

3. Feature image

1. Replace the following code

<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(144).jpg" class="img-fluid z-depth-1-half mb-4" alt="">

2. With the one below:

<?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 as in previous lessons, we will replace static HTML markup with dynamic WP functions.

1. Update the following part:

<!--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-->

2. By replacing it with the following:

<!--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 now done with the content. Now the 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 the next and more interesting section - comments.