We will now see how to create a single post. If we click on Read More now, it takes us to the single post, but it's not what we want, we want to change this. Also, we want the ability to add a featured image to a post, also called a thumbnail. Let's start with the thumbnail. We'll first go to functions.php and we need to enable that support for our theme. For this, we'll go to the adv_theme_support() function and add a Featured Image Support comment. Next, we'll enter the add_theme_support() function and pass in post-thumbnails, as shown here:

// Theme Support
function adv_theme_support(){
    // Featured Image Support
    add_theme_support('post-thumbnails');

Let's save this, and if we go to, let's say Blog Post One, you'll see that we have the Featured Image block:

We will click on Set featured image and upload some files:

You should have a folder called _images with some images placed in it.

Let's choose the phones.jpg image and click on Set featured image, as shown in the following screenshot:

Next, we will set this to Technology for the category and click on Update:

Now, let's go to Blog Post Two and click on Set featured image, and then on Upload, and then, grab the surface.jpg image. Now let's go ahead and click on Update.

If we go to the frontend and reload, you won't see the images; we actually have to add that to our theme.

So let's go to index.php and find out where you want to put the image. In this case, we will put it right above the_excerpt(), as shown in the following code block:

<?php if(has_post_thumbnail()) : ?>
   <div class="post-thumbnail">
      <?php the_post_thumbnail(); ?>
   </div>
<?php endif; ?>
<?php the_excerpt(); ?>

First, we will check for the image, and for that, we will add <?php if(has_post_thumbnail()) : ?>. Then we will create a <div> tag with a post-thumbnail class. We will then add <?php the_post_thumbnail(); ?>.
Let's save this, go back, and reload.

Now you can see that we have the images. They're a little too big, so let's go to our CSS and edit the code. We'll go to where we have our article styles, and we'll add article .post-thumbnail. Then, we will set the image width to 100%. Now it takes up 100% of the div, but the proportion is all out of whack. So we'll add height and set it to auto, as shown in the following code block:

article .post-thumbnail img{
    width:100%;
    height:auto;
}

Reload, and now you can see that they fit.

This looks good now!

Now we want to move on to the single post page. To do this, we'll set a new file and save it as single.php. We will just type in the word TEST. Now, if we go back to our single post and reload, you'll see that we get TEST, because this page has now overwritten the index.php page on the single post. You can also see that the main page still shows, it's just when we go to view a single post:

Let's copy everything that we have in the index.php file. We'll now split this up into a header and a footer file since we have not done that yet, and that's what you typically want to do with a WordPress theme, right? So we will create a new file and save it as header.php, and then, we'll create another one called footer.php.

In our index.php file, we'll figure out what we want to bring over to the header. So, we want the actual header and the navigation.

Let's start with <nav> and go up. We'll cut everything out and paste it in the header file.

Now, down at the bottom of index.php, we'll start selecting from the ending </html> tag up to where the <footer> starts. We'll cut that, and put it in our footer file, as shown here:

  <footer class="main-footer">
     <div class="container">
        <div class="f_left">
           <p>&amp;copy; 2017 - Advanced WP Theme</p>
        </div>
        <div class="f_right">
           <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="#">Services</a></li>
           </ul>
        </div>
     </div>
  </footer>
  <?php wp_footer(); ?>
</body>
</html>

Now if I save our index.php file as is, and we try to view it, you can see that it's all messed up:

So at the top, we'll say get_header():

<?php get_header(); ?>

At the bottom, of course, we'll add get_footer():

<?php get_footer(); ?>

If we go back now, everything's back to normal:

Now, we'll take everything from index.php, including get_header() and get_footer(), and we'll paste that into single.php.

We'll save this, and then if we go to the single post, we get what we had before:

Let's change a couple of things. One thing we want to change is that we want all the content to be shown. So we'll set the_excerpt() back to the_content():

<?php endif; ?>
<?php the_content(); ?>

If we reload now, we get all the content.

Also, we don't want the Read More link, so we'll get rid of that:

<a class="button" href="<?php the_permalink(); ?>">Read More</a>

Now, reload, and you will see that the link is gone. So now we just have our single post.

Now the archive pages should work. If we click on Business, it'll show us all the Business posts; if we click on admin, it'll show us all the posts created by admin; similarly, Search should also work. If we search for Lorem, the two articles should show up.

Now all the things, such as search, the category, and user archive pages, can be actually customized; we can make them different from the main post style. This is what we'll do next.