We will now see how to add basic HTML tags in the body:

1. We'll create a <header> tag, which is an HTML5 tag. We will enter an <h1> tag, and in this tag we will add the website name:

      <header>
         <h1><?php bloginfo('name'); ?></h1>
      </header>

2. We can actually take the dynamic code from the <title> tag, which we saw earlier, and put that in <h1> as well. Now if we save that and look at our frontend, we get WordpressDEV:

3. Now, if we wanted to change the frontend output, we could go to Settings, and change Site Title to My Website:

4. Save the settings. Now, we can see the change.
5. In addition to the name, we can also include a Tagline. To do this, we will enter the <small> tags, but instead of using name, we will use description, as shown in the following code block:

      <header>
         <h1><?php bloginfo('name'); ?></h1>
         <small><?php bloginfo('description'); ?></small>
      </header>

6. When you reload it, you can see that we get Just another WordPress site:

7. We can make the changes in the settings. We'll enter The Best Website Ever in the Tagline textbox:

8. Save the changes and put description in the span tag, as shown in the following code block:

      <h1><?php bloginfo('name'); ?></h1>
      <span><?php bloginfo('description'); ?></span>

9. When we reload, we get this:

10. Now let's add more HTML tags, as shown in the following code block:

         <header>
            <h1><?php bloginfo('name'); ?></h1>
            <span><?php bloginfo('description'); ?></span>
         </header>

         <div class="main">
         <?php if(have_posts()) : ?>
            post found
         <?php else : ?>
            <?php echo wpautop('Sorry, No posts were found'); ?>
         <?php endif; ?>
         </div>
      </body>
      </html>

Here, we go under the <header> tag and enter the div class as main. We'll fetch our blog posts; WordPress uses something called the loop, or the main loop, which will fetch every blog post that you have, regardless of the category or whatever it may be. Without specifying any restrictions, it's going to get every post. So, the first thing we'll do is check to see whether there are any posts. We'll use an if statement for that, and then use the shorthand. We will use the syntax that will help us go quickly in and out of php. We'll then use if(have_posts) to see whether there are any posts in WordPress. We'll also put an else statement here, so that if there are no posts, then we just want to let the user know that. Now, instead of just spitting out text, we'll use a function. We'll say echo wpautop; what this does is that it takes double line breaks and automatically makes them into paragraphs. It's a good function to use when you just want to output text. We'll say, Sorry, No posts were found. Then, inside if(have_posts), we'll use post found. Let's go and reload, and you can see that we get post found:

11. Let's go back to our backend and go to Posts; you can see that we have Hello world. We will move that to Trash, and if we now go back and reload, we get Sorry, No posts were found, as shown in the following screenshot:

12. Now let's go to Trash and restore it. We will see that the post can be seen again. We will now see how to display these posts. We'll delete post found within the if statement and we'll use a while loop for this with a php tag. We'll use while(have_posts). Now, with WordPress, we have to use this thing called the_post(), so we'll use the_post(), which is a little weird as far as a syntax is concerned. I've never really seen this anywhere else apart from WordPress, but just know that you need to have this as well. Then, we'll use endwhile; again, this is just using shorthand syntax, so you could just use the curly braces. But what we'll do here is when it finds a post, we want to get the title. So, in an <h3> tag, we'll use <?php the_title(); ?>, which is a function:

      <div class="main">
      <?php if(have_posts()) : ?>
         <?php while(have_posts()): the_post(); ?>
            <h3><?php the_title(); ?></h3>
         <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, No posts were found.'); ?>
      <?php endif; ?>

13. Let's go and reload, and now you can see that it's getting the Hello world! title:

14. Now, let's go ahead and create a post as an example. We will name it My Blog Post, and let's just get some sample text. I have taken some text from the www.lipsum.com website:

We will add a couple of paragraphs and publish it.

15. Now let's reload; you can see that it gives us My Blog Post:

16. Now, to get the actual content, we'll go right to the <h3> tag and enter <?php the_content(); ?>. As you can see, WordPress makes it really easy in terms of the names of the functions:

      <div class="main">
      <?php if(have_posts()) : ?>
         <?php while(have_posts()): the_post(); ?>
            <h3><?php the_title(); ?></h3>
            <?php the_content(); ?>
        <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, No posts were found'); ?>
      <?php endif; ?>
      </div>

So now, this gets us the content from each blog post and displays it:

17. There are different things that we can display with the posts: the date, author, categories, and so on. Let's go right under the title and add the following code block:

         <h3><?php the_title(); ?></h3>
         <div class="meta">
         Created By <?php the_author(); ?>
         </div>
         <?php the_content(); ?>
      <?php endwhile; ?>

Here, we added Created By along with the author's name.

18. When we reload, we can see the following output:

In this case, admin is the username of the person who created the post.

19. Now, if you want the date, you can add this code:

      Created By <?php the_author(); ?> on <?php the_date(); ?>

20. When we reload, we get Created By admin on December 12, 2017; basically, it gives us the date:

21. We will now see how to format the date. You can format the date in a lot of different ways; if you know PHP and you've worked with the date function, you know that there's a lot of different formatting options.
    We will take a look at one such example from php.net/manual/en/function.date.php:

      Created By <?php the_author(); ?> on <?php the_date('l jS of F
          Y h:i:s A'); ?>

22. Let's see what that gives us. You can see the format, shown in the following screenshot, with the day, date, time, and PM or AM:

One thing that I like to do is to use the time instead of the date:

Created By <?php the_author(); ?> on <?php the_time(); ?>

This will give you just the time; it doesn't give you the date, but you can actually format it to give you the date:

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

If we take a look at this, it gives us the date and the time:

So it's all up to you, it all depends on your preferences.

Now, let's do a little bit of styling. We will see how to add a <footer> tag at the bottom, and a paragraph to make it dynamic. We can put a copyright symbol, and then for the year, instead of just typing in the year, we can use the_date(), and then just pass in as a parameter, Y, as shown in the following code:

<footer>
   <p>&copy; <?php the_date('Y'); ?></p>
</footer>

So we get © 2017:

Then, if we want the site name, we can just say bloginfo and pass in name:

<footer>
   <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>

So now we have a dynamic footer.