WordPress Theme Tutorial for Beginners – Part 5: Accessing Post Information

August 14, 2019, Updated: March 28, 2020 in
Themes,WordPress

This lesson of the WordPress theme tutorial for beginners will be all about how we can access and output information such as its link, title, and more from each post when inside the post loop. We do this with template tags. In the process we will also add the single view templates to our theme.

In the previous step we added the post loop which includes the the_post() function. This function sets up global variables and makes sure we can use simple and intuitive function calls, called template tags, while we are inside the while loop.

Most common template tags for use in the post loop

This is a list of the most common template tags you would want to use for accessing a post information:

  • the_title() echoes the post’s title.
  • the_permalink() outputs the post’s permalink/URL.
  • the_content() outputs the post’s content (from editor)
  • the_excerpt() echoes out the post excerpt. If the excerpt field is empty this will echo out the first 55 words from the post content along with “…”
  • the_ID() outputs the post’s ID.
  • the_category() echoes out all associated categories.
  • the_tags() outputs all associated tags.
  • the_date() echoes out the post’s published date.
  • the_time() outputs the post’s published time.
  • the_author() echoes out the post’s author’s display name
  • the_post_thumbnail() outputs the post’s featured image. We will learn how to add support for featured thumbnails later in this tutorial.

There are many more. If you are interested, take a look at WordPress Codex’s documentation of all post tags. Take a look outside the heading “post tags” as well for more – they are a little spread out on this page.

Note: Each template tag has a corresponding “get_” function, which returns the value instead of echoing it out. For example, the_ID() has get_the_ID(), and so forth. This is useful in cases where you wish to assign the value to a variable to manipulate it or do something conditionally. For example: 

$my_variable = get_the_title();

Let’s start implementing some of these tags in our index.php. I will also add some very basic HTML just to format the output better. I encourage you to add your own HTML! Add divs, spans, sections, headers, and so on with whatever classes you’d like.

Fleshing out the loop in index.php

Inside the loop in our index.php I would like to add a link that goes to the post’s permalink. Inside the link I’d like to echo the post’s title. Then I’d also like to echo out the post’s excerpt and its categories.

index.php 
<?php get_header(); ?>
<?php 
if (have_posts()) {
	while (have_posts()) : the_post();
		<article <?php post_class(); ?>>
			<h2>
				<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
			</h2>
			<?php the_excerpt(); ?>
			<?php the_category(); ?>
		</article>
	endwhile;
	the_posts_pagination();
} else {
	?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

What the code above does is;

  • Line #5 adds the HTML <article> tag with a call to post_class() which generates useful post classes – just like body_class() we used in a previous step.
  • At line #6-8 we add a <h2> tag for the title, with a link that goes to the post’s permalink (single view).
  • Line #9 echoes out the post excerpt.
  • And at line #10 we echo out the post’s categories. Because I don’t pass any arguments to this call, it defaults to an <ul> list.

This results in the following output when refreshing the frontpage:

We are getting somewhere! I encourage you to look at the documentation for each tag function for which parameters they accept. You can modify the output by quite a bit! And decide for yourself which template tags to use.

Try clicking on a post’s link and see that you arrive at that single post page. You can now see that the loop only shows that one post. However, because we currently have only one template, index.php, single view is also using this template. So the single view does not make a lot of sense. We don’t need it to link to itself, and we want to see the full post content! Let’s fix this by creating our second template in our theme.

Creating single view templates

If you remember back in lesson 1 of the WordPress theme tutorial for beginners we looked at the template hierarchy? When we are at a single post or page, WordPress looks for single.php for posts, and page.php for pages. If one of these was not found, WordPress falls back on singular.php which is shared regardless of post type. However themes generally implement single.php and page.php because of the differences between posts and pages. Pages do not have categories and tags, and since pages are usually used for static content they normally don’t show published date nor comments. This is entirely up to you though.

We will create single.php and page.php for our theme. Let’s start with posts first.

Single post template

In your theme folder, make a copy of index.php and rename it into single.php. In single.php we will remove the permalink (which links to itself), and swap out the excerpt with the full post content. And finally we don’t need archive navigation here.

single.php 
<?php get_header(); ?>
<?php 
if (have_posts()) {
	while (have_posts()) : the_post();
		<article <?php post_class(); ?>>
			<h2><php the_title(); ?></h2>
			<?php the_content(); ?>
			<?php the_category(); ?>
		</article>
	endwhile;
} else {
	?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Let’s add some more useful information; such as the date of the post and the name of the author. Again, I encourage you to add HTML tags along to make a much nicer HTML structure.

single.php 
<?php get_header(); ?>
<?php 
if (have_posts()) {
	while (have_posts()) : the_post();
		<article <?php post_class(); ?>>
			<h2><php the_title(); ?></h2>
			<?php the_content(); ?>
			<?php the_category(); ?>
			<p>Posted: <?php the_date(); ?> at <?php the_time(); ?></p>
			<p>Author: <?php the_author(); ?></p>
		</article>
	endwhile;
} else {
	?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The functions the_time() and the_date() will echo out the date and time in the format you have defined in admin panel > Settings. However you can override this by providing a different date format as parameter to these methods.

The function the_author() echoes out the author’s “display name”. If the user hasn’t provided any other name in his or her profile, this will echo out the username.

I strongly encourage you to never print out usernames as this can pose a security threat. Always make sure any authors have provided a proper name, or don’t use the_author().

This is how a single post looks for me now. Awesome! Let’s make the single page template.

Single page template

Make a copy of your single.php and rename it into page.php. All I did in page.php was to remove everything not related to pages. Echoing out categories for pages won’t work, and I also removed the date, time and author. This is what we get in page.php:

page.php 
<?php get_header(); ?>
<?php 
if (have_posts()) {
	while (have_posts()) : the_post();
		<article <?php post_class(); ?>>
			<h2><php the_title(); ?></h2>
			<?php the_content(); ?>
		</article>
	endwhile;
} else {
	?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

We are finally starting to get somewhere with our templates! However I cannot repeat this enough; I encourage you to modify the templates and the parameters to the functions to your liking. Especially adding more HTML wrappers to make it easier to style it later.

In the next step we move a little away from templates, and go more into some more backend coding of WordPress themes.

Documentation on methods used