Displaying blog post

We created the theme and added the header and navigation bar. All of this stuff on the page is now dynamic and integrated with WordPress, but this is all just static HTML.

Let's go back to our index.php page and go down to where we have the container content p, and we have different blog posts. We have three article tags with blog posts; we will delete two out of the three.

Then we will cut the paragraphs down and make it much shorter just so we can get it all in the page or in view. We want to write in this main block p, and we want to create our post loop.

First, we'll have to check for posts, and for that, we will enter if(have_posts),and then we have to end it after the ending </article> tag. We will put an else statement as well. If there are no posts, then we will enter php echo, with the wpautop() function, where we can put the text that we want. In this case, we enter 'Sorry, no posts were found'. Then, we will create our while loop, and then down under the </article> tag, we will end that while loop:

<p class="container content">
   <p class="main block">
      <?php if(have_posts()) : ?>
         <?php while(have_posts()) : the_post(); ?>
            <article class="post">
            <h2><?php the_title(); ?></h2>
            <p class="meta">Posted at 11:00 on May 9 by admin
            </p>
            <?php the_content(); ?>
            <a class="button" href="#">Read More</a>
            </article>
         <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, no posts were found'); ?>
      <?php endif; ?>
 </p>

So it's going to loop through the posts and for every one it finds it's going to spit this out. Now to make it dynamic, we will use php the_title() and replace the paragraph with php the_content(), as shown in the preceding code block. We'll save this, and reload:

Now we're on the About page; let's go back to the Home page, which we don't have a link for. When we click on WPThemes, it should take us to the Home page, but if we click on it now, it takes us to index.html, so let's fix this.

We will update the index.html file with the following code:

<a href="<?php echo home_url('/'); ?>">
   <?php bloginfo('name'); ?>

Now if we reload and click on WPThemes, we will get this:

If we look at the posts, we get Blog Post One and Blog Post Two. Now you probably don't have these posts; you probably have a Hello World; if that's showing up, then that's fine. If you want to match your content to mine, just go ahead and create two posts, one as Blog Post One—I just have some sample content in it—and then Blog Post Two similarly:

You can also create some categories, it doesn't really matter what they are. We're not really dealing with specific content, it's just for a sample content:

The meta info, as you can see, is still static, and so is the Read More button. When we click on this button, it doesn't do anything. So let's fix that next. Back in our post loop, where we have <p class="meta">, we will make the following changes to make it look dynamic:

<p class="meta">
Posted at
<?php the_time(); ?>
by
admin</p>
<?php the_content(); ?>
<a class="button" href="#">Read More</a>

Since we need to be more specific, for the date and time we use the_time(). If we just keep it like that, let's see what it gives us:

So it gives us just the time, 11:55 am. I want the date as well, so we'll format this. However, we want to do this by just adding some parameters. We have added F j, Y, and then for time, we'll add g:i a:

<?php the_time('F j, Y g:i a'); ?>

This pertains to the parameters of the php date function.

If you don't know how to format the time, you can go to php.net and just search for the date function, and that should give you all the formatting options.

Now if I reload, it gives the date, month, day, year, and also the time:

Now we also want the username of the user that created the post. To do this, we can just put in <?php the_author(); ?>, as shown in the following code block:

<?php the_time('F j, Y g:i a'); ?>
by
<?php the_author(); ?></p>
<?php the_content(); ?>

If we reload now, you can see that we still get admin because that's the actual user's name. Now we want to be able to click on the author name and then have it bring us to all the posts archived from that user. This is pretty easy to do as well. We just want to put a link, as shown as follows. Inside the link, we enter php echo get_author_posts_url() and then pass get_the_author_meta() and ID:

<a href="<?php echo get_author_posts_url(
get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a>

Let's save this, and then if we reload, you can see that it's now a link. We can't see it because of the color—we'll have to change the CSS—but if I click on it, it will take us to whatever the username is in the address bar, auth/author/ the username; it will show you all the posts from that user:

Let's go into the CSS real quick and see where we have our meta class. We'll add article.post .meta a to it and set color to white, as shown here:

article.post .meta{
    background:#009acd;
    color:#fff;
    padding:7px;
}

article.post .meta a{
   color:#fff;
}

So now that's fixed.

Now we can also get the categories that the post is in. To do this, we'll go back to the index.php file and we will update the code, as shown in the following code block:

</a>
| Posted In 
<?php
    $categories = get_the_category();
    $separator = ", ";
    $output = '';
 
    if($categories){
        foreach($categories as $category){
            $output .= '<a href="'.get_category_link($category->term_id).'">'.
            $category->cat_name.'</a>'.$separator;
        }
    }
 
    echo trim($output, $separator);
?>
</p>

Right after the ending </a> tag of what we just did, of the author, we will put in a pipe | character, and then open up some php tags. Before the php tags, we'll enter Posted In and then we can place all the categories. To do this, we'll set a categories variable and set it to get_the_category(). Now this will give us an array of categories that this post is in. We can't just take the array and display it, so we have to loop through it. Before we do that, we'll create a variable called separator and separate that with a comma and a space. Then, we'll initialize a variable called output and set it to nothing for now. Next, we'll check for categories. To do this, we'll enter if($categories), then we'll use a foreach loop with ($categories as $category). Next we'll append to that output variable, using .=. Now for each category to have a link as well, we'll use href. In order to do a little bit of concatenation here, we'll use dots and then add get_category_link(). We need to pass in a parameter, we'll take that $category variable and call term_id. Then we'll go back to our string right after the double quote, and we'll concatenate again, and enter $category->cat_name, closing it with the </a> tag. I know concatenation gets a little confusing, so we want a separator. Then, after the if statement, we'll use echo and wrap this in the trim() function to make it a little neater; we'll then enter output, and the second parameter will be separator.

Let's save this and see what we get. Now you can see that it says Posted in Business:

This one is Posted In Uncategorized:

Now if I click on Business, it takes us to category/business, and you can see only this post is here; this is the only one in Business.

So this is working perfectly.

Now the last thing we want is the text to be shorter and the Read More button to work. So we'll go to where we put the content, and to make it shorter, we can just change it to the_excerpt();, as shown here:

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

If we look at it now, we have much shorter text:

Now, by default I think it's 55 words, but we can change this:

Let's go to functions.php and add the excerpt_length() function. All we need to do here is to just return the number; let's say we want 25. Then we just need to create a filter, so we'll say add_filter; add_action means you're adding something, and add_filter means you're changing something. We want excerpt_length, so we will add set_excerpt_length, and we'll also use the adv prefix:

// Excerpt Length
function adv_set_excerpt_length(){
    return 25;
}

Let's save this and reload:

Now you can see that we get length of 25. Now, for the Read More to work, it is pretty easy. We'll go down to where we have the link and update the code as shown here:

</p>
<?php the_excerpt(); ?>

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

We'll reload and click on Read More. This brings us to that particular post:

Next we will see how to add a comment form and how we can add a featured image to our posts.