|

How To Add Post Meta In WordPress

How To Add Post Meta In WordPress

In this article we will examine how to add post meta to a WordPress Post. So first off, what is meta? Well you can think of meta as information about information so to speak. You are likely familiar with meta tags in html markup. These are used to provide information about a website. In this tutorial, we are not so much looking at meta tags, but post meta. In other words, we want to add information about each WordPress Post to our theme from scratch. So let’s go ahead and see how we can do this now.


What to include in Post Meta

For any given post on a WordPress site, there is going to be information associated with that particular post. For example, that post was written on a certain date, by a particular author, in a specific category, and so on and so forth. When we talk about post meta in WordPress, this is the type of information we are referring to.


How to add the date to a WordPress Post

The first thing we can do is to add the date of a post right beneath the blog post title in our theme. To do this, we can open up the index.php file we have been working on and make use of a handy function provide by WordPress named the_time(). The format we want to use is the Month, day with a suffix, and the year in four digit format. In order to accomplish this, we have to pass specific arguments to the_time() function. We pass uppercase F to denote the month, the jS to indicate the day with a suffix, and Y for the year.

As we can see here, the date is now getting output right beneath the post title in our theme. Very good.
outputting the date for a wordpress post


How to add the author to a WordPress Post

We will now take a look at how to add the author name to our post. Once again, we will make use of a function built into WordPress that takes care of this for us. Of course it is named aptly, the_author(). What we will do is to include the author in the very same paragraph tag we added above, but we would like to also insert a bit of a separator between the date and the author. Perhaps a pipe symbol will do the trick for us. Let’s try it out in the code.

the_author wordpress function example
Excellent! It’s as easy as simply calling the_author() function in your theme wherever you want the author of a post to appear. We now have the date, a pipe separator, and the author name. Fantastic. Of course in our example, it is simply just the name of admin as an author. This is how we set things up when we first installed WordPress. There are very large websites online however that are powered by WordPress and they may have tens or hundreds of different authors all contributing content. In these cases, it makes a lot of sense to include the author name of each post with the_author() function.


Adding a link to the author archives

Often times on a WordPress site, when you see the post meta that includes the author name of a post, there is a link you can click on to see more posts by that author. This is accomplished by setting up a link to an author archives page. This way you can see all the posts published by only that particular author. We can accomplish this by using the get_author_posts_url() function. WordPress has a function for almost anything you can think of! To make this work however, we’ll also need to make use of the get_the_author_meta() function. Let’s see how this works.

Now we added a fictional character named Tom to our tutorial WordPress Install just so we could demonstrate clicking on a particular author link to see how this works. As we can see here, if we click on admin, we now see only admin posts. However, if we click on Tom, we now see posts only created by Tom.
link to author archives example


How to add a link to the category of a post

Another nice feature to include in the post meta of a WordPress post is the category that the post was assigned to. In our example WordPress site, we have three categories set up for us already. Those are the JavaScript, PHP, and WordPress categories. We will make use of the get_the_category() function in WordPress along with the get_category_link() function to make this easy to accomplish.

First, let’s inspect what this function actually outputs in PHP. We can do this with the print_r() function.

When we view a page that has JavaScript as a category, we get the following output from the get_the_category() function call.

Array
(
    [0] => WP_Term Object
        (
            [term_id] => 4
            [name] => JavaScript
            [slug] => javascript
            [term_group] => 0
            [term_taxonomy_id] => 4
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 1
            [filter] => raw
            [cat_ID] => 4
            [category_count] => 1
            [category_description] => 
            [cat_name] => JavaScript
            [category_nicename] => javascript
            [category_parent] => 0
        )

)

Interesting. This shows us that the result of calling this function is an array of WP_Term Objects. We only have one category assigned to this post, so we only see one object. However, if we had two categories assigned, there would be two objects. In fact, let’s go ahead and just add a category in the WordPress Dashboard to this post so we can see what that output would look like.

Two categories assigned to a WP Post
This post now has two categories assigned to it. Those are JavaScript and Tutorial. Let’s now see what the output of this function is.

Array
(
    [0] => WP_Term Object
        (
            [term_id] => 4
            [name] => JavaScript
            [slug] => javascript
            [term_group] => 0
            [term_taxonomy_id] => 4
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 1
            [filter] => raw
            [cat_ID] => 4
            [category_count] => 1
            [category_description] => 
            [cat_name] => JavaScript
            [category_nicename] => javascript
            [category_parent] => 0
        )

    [1] => WP_Term Object
        (
            [term_id] => 1
            [name] => Tutorial
            [slug] => tutorial
            [term_group] => 0
            [term_taxonomy_id] => 1
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 1
            [filter] => raw
            [cat_ID] => 1
            [category_count] => 1
            [category_description] => 
            [cat_name] => Tutorial
            [category_nicename] => tutorial
            [category_parent] => 0
        )

)

Ah ha! Now we can see that if there are two categories assigned to a post, we will get an array of two WP_Term Objects returned when calling the get_the_category() function. Now this brings up a bit of a situation. We are going to need to create code in our theme file that can account for whether a post has only one category, or if it has more than one category. In either case, we need to be able to intelligently display this to our users. How might we accomplish this? Let’s have a look at this code snippet that should do the trick.

Basically what this code here does is to first check if there are any categories in that if statement. Then if this is true, we use a foreach statement to loop over each category (or WP_Term Object) to extract the information we want to display on the page. This code is smart enough to display just one category, or several. Notice here that one post has two categories, but the others have only one.
output of category link in wp post meta


Adding style to the post meta

It looks like we have everything working great for our post meta. The final thing we should do is to add a bit of style to differentiate the post meta from the actual post itself. Recall that we had assigned a class of post-meta to the paragraph tag that actually holds our post meta. We can therefore open up style.css and add some styling like so:

With this small bit of styling in place, our post meta looks a lot better. The text is slightly smaller than that of the main content, and it’s color is that of a light gray to indicate it is a secondary piece of information. We also applied a light gray color to the links in the post meta, but leave the underline in tact so that site visitors know that they are still clickable links. Looks pretty good!
how to style wp post meta


How To Add Post Meta In WordPress Summary

This WordPress tutorial had us tackling how to make use of various functions in WordPress to create a post meta section for our posts. Post meta is essentially information about the main content. We made use of the_time(), get_author_posts_url(), get_the_author_meta(), the_author(), get_the_category(), and get_category_link() functions to accomplish our goals. Great work!