Would you like to learn how to display post meta data in WordPress blog posts? Post meta data are relevant information about your blog post such as published date, category, author name, etc. In this article, we will show you how to display post meta data in WordPress posts.

What Post Meta Data Stands For?

How To Add Meta Data In WordPress Posts

Firstly, the post meta data section contains relevant information on a blog post such as published date, author name, categories, tags, and custom taxonomies, etc. Secondly, if you have a blog then you should make sure your post’s metadata is spot on, as this information can help a visitor understand more about the post and it can also help to increase your page views by making your site easier for navigation.

How To Display Posts Meta Data in WordPress?

The post meta data location varies from theme to theme. Some may display it before the post title, some after the title and some right after the content. However,  too many post meta pieces can mess up the layout. The ideal situation is one in which you would only display the information you feel is necessary. Now let’s see how you can customize and add post meta.

Customizing Post Meta Data

As mentioned, the post meta location varies from theme to theme. Here we will work on a particular theme – in this case, the default TwentySeventeen theme, so keeps in mind that code and pages may be different from your theme.

In modern themes post meta are defined in template tags page and called in when required but in some themes, you may find post meta is placed directly before or after the post title. Generally, you would find post meta tags in index.php, single.php, archive.php, and content template pages. A simple code would look like this:

Posted on

 <?php the_time('F jS, Y'); ?> by <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>

This code will display something like this Posted on the date by author name with the edit button (only if you are logged in the dashboard). However, now most modern themes are using template tags page to handle post meta. Let’s see how it works. First, you would have to create a child theme before making any changes.

We will work on a single post page and this is how it looks from the front-end. Let’s say we want to add a user icon before the author’s name, to do that do the following: In the TwentySeventeen theme, a single.php template is used to display a single post. Now look for get_template_part and notice the template path there, in our case the path is:

get_template_part( 'template-parts/post/content', get_post_format() );

Content.php

Now according to the path open content.php and search for entry-header section.

<header class="entry-header">

<?php

if ( 'post' === get_post_type() ) {

echo '<div class="entry-meta">';

if ( is_single() ) {

twentyseventeen_posted_on();

} else {

echo twentyseventeen_time_link();

twentyseventeen_edit_link();

};

echo '</div><!-- .entry-meta -->';

};

 

if ( is_single() ) {

the_title( '<h1 class="entry-title">', '</h1>' );

} elseif ( is_front_page() && is_home() ) {

the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );

} else {

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

}

?>

</header>

<!-- .entry-header -->

We can see twentyseventeen_posted_on(); function is called here to display the post meta, we have to edit this post meta data function. You will find this function in the template-tags.php file. A tip:  check the theme’s function.php file to get the file name and path.

Search for twentyseventeen_posted_on() and copy-paste the entire function in your child theme’s function.php file (if you don’t have function.php file in your child theme then create a blank file with the same name).

We will use font awesome icons here, the simplest way to use font awesome in WordPress is by installing Better Font Awesome plugin.

if ( ! function_exists( 'twentyseventeen_posted_on' ) ) :

/**

* Prints HTML with meta information for the current post-date/time and author.

*/

function twentyseventeen_posted_on() {

// Get the author name; wrap it in a link.

$byline = sprintf(

/* translators: %s: post author */

__( 'by %s', 'twentyseventeen' ),

'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '"><i class="fa fa-user" aria-hidden="true"></i>' . get_the_author() . '</a></span>'

);

// Finally, let's write all of this to the page.

echo '<span class="posted-on">' . twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline . '</span>';

}

endif;

Now you can see a user icon beside the author’s name. A tip: you can make these changes directly in the content.php file but it is a good practice to follow the theme structure.

Adding Post Meta Data

So far we have custom existing meta tags. Now to spruce things up. Let’s assume we want to display category and tags after the post title. To do this, copy the content.php file from the parent theme and paste it in your child theme, keeping the same directory pattern. twentyseventeen > template-parts > post  > content.php to twentyseventeen-child > template-parts > post > content.php

Now you have to write a new function. Think it’s tough? Actually it’s not, here’s what you need to do. Most themes will show category and tags somewhere in the post, you just need to locate the file and replicate the code in your function that’s it.

In our instance, in TwentySeventeen theme category and tags are placed after the content. Now we need to follow our previous workflow. Firstly, open content.php and see which function is used for category and tags to edit WordPress post meta data

Code Example

<?php

if ( is_single() ) {

twentyseventeen_entry_footer();

}

?>

Here it is twentyseventeen_entry_footer().

Now go the template-tags.php file and search for twentyseventeen_entry_footer().

if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :

/**

* Prints HTML with meta information for the categories, tags and comments.

*/

function twentyseventeen_entry_footer() {


/* translators: used between list items, there is a space after the comma */

$separate_meta = __( ', ', 'twentyseventeen' );


// Get Categories for posts.

$categories_list = get_the_category_list( $separate_meta );

 

// Get Tags for posts.

$tags_list = get_the_tag_list( '', $separate_meta );

 

// We don't want to output .entry-footer if it will be empty, so make sure its not.

if ( ( ( twentyseventeen_categorized_blog() && $categories_list ) || $tags_list ) || get_edit_post_link() ) {

 

echo '<footer class="entry-footer">';

 

if ( 'post' === get_post_type() ) {

if ( ( $categories_list && twentyseventeen_categorized_blog() ) || $tags_list ) {

echo '<span class="cat-tags-links">';

 

// Make sure there's more than one category before displaying.

if ( $categories_list && twentyseventeen_categorized_blog() ) {

echo '<span class="cat-links">' . twentyseventeen_get_svg( array( 'icon' => 'folder-open' ) ) . '<span class="screen-reader-text">' . __( 'Categories', 'twentyseventeen' ) . '</span>' . $categories_list . '</span>';

}

 

if ( $tags_list ) {

echo '<span class="tags-links">' . twentyseventeen_get_svg( array( 'icon' => 'hashtag' ) ) . '<span class="screen-reader-text">' . __( 'Tags', 'twentyseventeen' ) . '</span>' . $tags_list . '</span>';

}

 

echo '</span>';

}

}

 

twentyseventeen_edit_link();

 

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

Find the Code for Category and Tags

Finally, copy and paste the code for WordPress post meta data in your child theme’s function.php file within a new function, like this –

if ( ! function_exists( 'twentyseventeen_post_meta' ) ) :

/**

* Prints HTML with meta information for the current post-date/time and author.

*/

function twentyseventeen_post_meta() {

/* translators: used between list items, there is a space after the comma */

$separate_meta = __( ', ', 'twentyseventeen' );

// Get Categories for posts.

$categories_list = get_the_category_list( $separate_meta );

// Get Tags for posts.

$tags_list = get_the_tag_list( '', $separate_meta );

echo '<span class="cat-tags-links">';

// Make sure there's more than one category before displaying.

if ( $categories_list && twentyseventeen_categorized_blog() ) {

echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Categories', 'twentyseventeen' ) . '</span>' . $categories_list . '</span>';

}

if ( $tags_list ) {

echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Tags', 'twentyseventeen' ) . '</span>' . $tags_list . '</span>';

}

echo '</span>';

};

endif;

Customizing WordPress Post Meta Data

Since we have placed our meta tags in our desired location, it’s time to adjust some style. It’s very straightforward if you know the basics of  CSS. Let’s adjust our category and tags section.

.entry-header .cat-tags-links {

font-size: 14px;

}

.entry-header .cat-links {

padding-right: 5px;

}

So, now it looks different. But if you want to show your own custom icon instead of font-awesome or any other, then you can use your image as a background image in CSS like this:

.entry-header .cat-links {

background: url(category-img.jpg) left center no-repeat;

padding-left: 5px;

padding-right: 5px;

}

.entry-header .tags-links {

background: url(tag-img.jpg) left center no-repeat;

padding-left: 5px;

padding-right: 5px;

}

Once done don’t forget to remove font awesome code from your function.php file.

How To Remove Post Meta Data in WordPress?

Removing any post meta is very simple, just find the code and delete it. For example, if you see our single post page now the categories and tags are now appearing in two sections. If you don’t want to display it after the content, then simply delete the category and the tag code from twentyseventeen_entry_footer() function. So the new code would look like this in your child theme.

if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :

/**

* Prints HTML with meta information for the categories, tags and comments.

*/

function twentyseventeen_entry_footer() {

// We don't want to output .entry-footer if it will be empty, so make sure its not.

if ( get_edit_post_link() ) {

echo '<footer class="entry-footer">';

twentyseventeen_edit_link();

echo '</footer> <!-- .entry-footer -->';

}

}

endif;




Share This Post