Single posts and thumbnails

Now we'll take a look at the single post page. Right now, we have this roll of posts from our site, but that's it; we can't click on it and go to the inpidual post, where we would have our comments and things like that. So let's go ahead and work on that:

1. Let's go to the index.php file and make the title clickable. We'll add a link to the title. To do this, let's go to the <h3> tag, as shown in the following code; add the <a> tag, and wrap that around the <title> tag:

      <?php get_header(); ?>
         <p class="main">
            <p class="container">
               <?php if(have_posts()) : ?>
                  <?php while(have_posts()): the_post; ?>
                     <h3>
                     <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                     </a>
                     </h3>
                     <p class="meta">
                     Created By <?php the_author(); ?> on <?php the_time('F 
                         j, Y g:i a'); ?>
                     </p>
                     <?php the_content(); ?>
                  <?php endwhile; ?>
               <?php else : ?>
                  <?php echo wpautop('Sorry, No posts were found.'); ?>
               <?php endif; ?>
            </p>
         </p>
         <?php get_footer(); ?>

1. Let's save it and reload:

Now you'll see we have a link on the titles. For example, when we click on My Blog Post, it takes us to the post.

1. Let's add a little bit of style to the links. I don't like the color of the links; I also want to make the description bold so that it stands out. It is good to wrap each post in its own p. Where we have while, we'll put it in <article>, as shown in the following code:

      <?php get_header(); ?>
         <p class="main">
            <p class="container">
               <?php if(have_posts()) : ?>
                  <?php while(have_posts()): the_post(); ?>
                     <article class="post">
                        <h3>
                        <a href="<?php the_permalink(); ?>">
                           <?php the_title(); ?>
                        </a>
                        </h3>
                        <p class="meta">
                        Created By <?php the_author(); ?> on 
                        <?php the_time('F j, Y g:i a'); ?>
                        </p>
                        <?php the_content(); ?>
                     </article>
                  <?php endwhile; ?>
               <?php else : ?>
                  <?php echo wpautop('Sorry, No posts were found'); ?>
               <?php endif; ?>
            </p>
         </p>

1. Then, in our style sheet, let's add the color:

      a{
          color:#333;
      }

The color will be just the same as the text.

1. Now we will just add a border at the bottom using this code:

      article.post{
          border-bottom:1px #ccc solid;
      }

1. When you reload you can see the border at the bottom:

1. Now we have the title. The title has a link, but we'll usually see some kind of Read More button as well, so let's go ahead and add that. All we have to do is just add the code, shown in the following code block. We'll say Read More and give it the class of a button:

      Created By <?php the_author(); ?> on <?php the_time(
        'F j, Y g:i a'); ?>
      </p>
      <?php the_content(); ?>
      </article>
      <br>
      <a class="button" href="<?php the_permalink(); ?>">
         Read More
      </a>

1. Now, we should have a link for Read More. To do that, we will add the following code block:

      article.post{
          border-bottom:1px #ccc solid;
          overflow:hidden;
      }

      article.post a.button{
          display:inline-block;
          background:#333;
          color:#fff;
          padding:10px 5px;
          margin-bottom: 10px;
          text-decoration: none;
      }

1. We can now go to the single page, as shown in the following screenshot:

1. Now, in the single page, we don't want My Blog Post to be a link; that's kind of silly, so we want to change that. Also, there's going to be other things we want. We'll want a comment form as well, so we need to have a special page for single posts.
2. So we'll create a new file in our theme, and we'll just call it single.php, and let's just say TEST.

1. If we go back to the single page and reload, we get TEST. If we go back to our main website, which is our main post roll, it is the same as before, but if we go to a single page we get TEST only, because it's automatically looking at the single.php file. So what we can do is copy the code from index.php, and we can use this code as a starting point. If we paste that in single.php and save, it'll show us the same result. Now we can change whatever we want in the single.php file, and it will only take effect on the single page.
2. We can get rid of the link and Read More in the code; we're obviously not going to want that. So now we have a single page:

1. Let's add a little bit of style to our single page. To do that, we will make meta, as shown here:

      .meta{
          background:#333;
          color:#fff;
          padding:5px;
      }

As you can see here, I have also added some padding at the bottom of the post.

I'm not trying to go nuts with the styling, because like I said, I just want you to kind of learn the code rather than learn how to create a great design; we'll be getting into that later.