How to Add and Customize Post Meta Output for WordPress Themes

0
244

http://ift.tt/2yHe3l9

‘Metadata’ is additional information about a site (or individual posts) stored in your WordPress databases, such as the author or post date. Without an understanding of how to use metadata, your themes may not utilize everything WordPress has to offer.

You can improve your WordPress themes by learning to use the appropriate metadata for your posts. For example, in an outdated theme, having the post date format hard-coded means your client won’t be able to modify it from their WordPress admin area.

In this article, we’ll explain what exactly post metadata is. Then, we’ll show you four ways to add and customize metadata post output for WordPress themes. Let’s get to work!

What Post Metadata Is in WordPress

A post title, author, date, and category
Post metadata includes category, author, and the published date.

In short, metadata describes or gives information about another set of data. In WordPress’ case, metadata can include general site settings, plugin options, theme options, and individual posts. For example, the post date, author name, and categories are all metadata to describe a post.

WordPress provides many functions for common metadata, and you can even create your own. This can come in handy when you’re referencing WordPress’ formatting options to customize a theme template. You can enable users to change their design in the WordPress admin, for example. In fact, the WordPress customizer expects you to use metadata to enable users to control their own theme without any code.

Once you’re comfortable with metadata, the next step is to add it to your post templates. Let’s get cracking!

4 Ways to Add and Customize Post Meta Output in WordPress Themes

Before making any changes to your themes, you should always make a backup of your WordPress files and database. If you’re working with a live theme, you’ll need File Transfer Protocol (FTP) permissions and an FTP client such as FileZilla to make changes.

When changing post metadata, you’ll typically work with the single.php file, according to the template hierarchy. However, custom themes may implement an alternate file for their posts. In this case, a developer plugin such as Theme Inspector can help identify which template files are loaded for different sections of your site. This up-and-coming plugin has a small user base with just over 300 users, though we’ve had great experiences with it and it has been kept updated since its release.

Let’s discuss four different ways you can add and customize post metadata in your WordPress themes. It’s time to break out your code editor!

1. Display the Original and Last Updated Post Dates

One reason you might want to show the original and last updated information about a post is that Google likes to know you’ve been around a while and that you keep your content fresh and reliable. You can have your cake and eat it too by displaying the original and last updated post dates within your theme template.

To do this, open your post template file and locate the part of the file where the date is currently displayed. This is likely on the page using the function the_date() or possibly the_time() . Next, you’ll want to add this snippet before or after the current date information to introduce the last modified date.

$original_date = get_the_time( 'U' ); 
$modified_date = get_the_modified_time( 'U' ); 
if ( $modified_date >= $original_date + 86400 ) { 
$date_format = get_option( 'date_format' );
echo '<p>Last updated '; 
the_modified_time( $date_format ); 
echo '</p>'; 
}

To break this down, firstly we compare the original and modified dates to see whether they are within a day of each other. If the modified date is significantly fresher than the original post date, we get the current WordPress options for date formatting. Now your dates will match the options provided in the Settings > General section of the WordPress dashboard. Finally, we display the most recently modified date onto the page.

2. Show or Hide the Post Author Name

Sometimes, the author name gets displayed in places we don’t like – or isn’t displayed at all. You can check your appropriate template files for the the_author() or get_the_author() functions as a starting point. This is most often found at the very beginning or end of the post content. Other author-related functions to look out for include the_author_meta() and the_author_posts_link().

If you’re removing author information, you can comment out or delete the entire section referring to these author-related functions. We recommend you start by commenting out the chunk of code you feel is appropriate and testing it before completely deleting anything.

Comments enable you to hide things such as code functions or instructions from the browser or server. Here’s how to comment out your author section if you’re adding the comment outside of the <?php tags, within the HTML:

<!--
Code about the author goes here, and will probably include some <?php tags as well as ?>
-->

If you are commenting out code within the opening and closing <?php tags, you can comment out blocks of code like this:

<?php 
/* This is a chunk of code about the_author(); that is commented out */
?>

To add author information, you’ll first want to reference all of the author data you have access to. Here’s a short example showing the author name and their link:

<p>Written by <?php the_author(); ?></p>

This simply displays the author’s name without any additional information. If you’d like to link to the author’s post archive, you can use the built-in function provided:

<p>Written by: <?php the_author_link(); ?></p>

This function displays the author’s name and their post archive link.

3. Control Post Categories and Tags

Themes don’t always include a post’s category or tags. However, you may want to include these in your theme to offer additional navigation options, so you’ll need to manually add them as metadata.

We prefer to display the categories above the title of our posts. Here is an example piece of code to show a post’s categories. You can drop this code into the appropriate section of your template depending on where you’d like it to display. This should be included inside the loop, but otherwise, this is up to your discretion. If you’re not sure, try just below the_content().

<?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if ( ! empty( $categories ) ) {
    foreach( $categories as $category ) {
        $output .= '<a target="_blank" href="' . esc_url( get_category_link( $category->term_id ) ) . '" alt="' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</a>' . $separator;
    }
    echo trim( $output, $separator );
}
?>

Here, we use the get_the_category() function to grab the list of categories. Assuming there are categories, we use a ‘foreach’ loop to display each category with its appropriate link.

You can use an even simpler solution to display a post’s tags. We like to display our tags at the bottom of the theme template, below the author information. Here is the easiest way to add tags to a post page:

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

That’s it! This function can take up to three arguments, content that appears before the tag list, a separator to go between each tag and content that appears after the tag list. So, you could customize it with settings such as:

<p><?php the_tags( 'Post tags: ', ' | ', '<br />' ); ?></p>

If you need to remove any categories or tags from your template, you can keep an eye out for similar looking functions and code as we’ve shown you here. Again, we recommend first commenting out code you intend to delete to make sure you get the best results.

4. Register and Display Custom Metadata

Not only can you work with the existing WordPress metadata, you can register your own to display customized information within WordPress themes through custom fields.

This gives you the opportunity to inject a little of your own (or your clients) personality into your templates, for example:

  1. Mood: Powerful.
  2. Currently Reading: Impact Equation.
  3. Weather: Cold and rainy.

Metadata like this is handled in key-value pairs. This means you can add metadata keys like ‘Mood’ or ‘Weather’, then save the values, all from within the WordPress editor interface. You can then display the saved values on the post template, just like the date or author information.

The simplest way to add these keys is to click on the Screen Options drop-down while creating a post and ensure that Custom Fields are enabled. You’ll then find these at the bottom of your post editing page.

Once you’ve located them, add your desired key in the Name field, such as ‘Mood’. Then, add your mood to the value area:

Custom meta value and key pairing

To display this on your theme, customize the following snippet to match the key you’ll be using. You’ll only need to change the second value, which is the specific key you’ve chosen:

$my_mood = get_post_meta( get_post_ID(), 'Mood', true ); 
echo "<p><strong>Mood:</strong> $my_mood</p>";

Here, the get_post_meta function accepts the post ID and the post meta key, while the final option forces it to return a single string. That’s it!

Conclusion

Metadata enables you to display post information (such as the author and date) on the front end of your WordPress website. This can help you while building themes, as well as when working with clients who have specific customization needs.

In this article, we’ve shown you four different ways to add and customize post metadata in your next WordPress project:

  1. Display the original and last updated post dates.
  2. Show or hide the post author name.
  3. Control post categories and tags.
  4. Register and display custom metadata.

What questions do you have about post metadata in WordPress? Ask us in the comments section below!

Image credit: Raw Pixel.

John Hughes

John is a blogging addict, WordPress fanatic, and a staff writer for WordCandy.

The post How to Add and Customize Post Meta Output for WordPress Themes appeared first on Torque.

Vía Torque http://ift.tt/2yHvdz1

NO COMMENTS

LEAVE A REPLY