Author: Dawid Adach
Free live lesson
Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.
JOIN NOWSingle 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
- Create a file called
single.php. - Paste in the following code and save the file:
- 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:
<?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(); ?>
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.
- Update the first lines of the
single.phpfile as follows: - And trailing lines as follows:
- Update our title code:
- using a function, which you already know:
the_title()
<?php get_header();
require_once('components/navbar.inc.php');
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<!--Main Navigation-->
...
...
<!--Main layout-->
<?php
} // end while
} // end if
get_footer();
?>
That's how we added our WP Loop and dynamically fetch data from database.
<h1 class="font-weight-bold mb-4">Post title</h1>
<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()(notethe_). The difference is thatthe_title()automatically prints the title. In case ofget_the_title(), which returns a string, you have to print it manually i.e. usingecho<?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.
- Update the following code: (around line number 50):
- With the following code:
- And refresh the post page.
<!-- 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 -->
<!-- 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 -->
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
- Replace the following code
- With the one below:
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(144).jpg" class="img-fluid z-depth-1-half mb-4" alt="">
<?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.
- Update the following part:
- By replacing it with the following:
<!--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 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.
Previous lesson Download Live preview Next lesson
Spread the word:
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...Sign up to follow your progress and get additional benefits