Home > Help Center > Applications > WordPress > WordPress Custom Fields

WordPress Custom Fields

What are custom fields

WordPress authors can add additional meta-data to their posts using custom fields. This meta information may be anything the author finds useful for website visitors such as:

  • Status Updates
  • Author Information
  • Notes or Warnings
  • Quote of the Day
  • Currently listening, reading, watching ...

In this article, we will only look at the built-in custom fields options, although there are plugins offering far more features.

Note: We recommend you to create a child theme to test the examples from the article without the risk of damaging the main theme.

Enable custom fields

To enable custom fields on a Post or Page edit screen click Screen Options and check the Custom Fields option:

wordpress custom fields

Below the content editor now there must be a new section Custom Fields:

wordpress custom fields

Meta-data is handled with key / value pairs. The key is the name of the meta-data element. The value is the information that will appear in the meta-data list on each individual post that the information is associated with.

Create custom fields

If you open Custom Fields for the first time you must enter a name and a value in the corresponding fields and click Add Custom Field:

wordpress custom fields

This field is saved but the interface is changed - now you have the options to select an already existing name and give it a new value or to click Enter new link to create completely new custom field:

wordpress custom fields

For our example we need a quote / author pairs so we created one for this post.

Display custom fields meta-data

In order to display the custom fields metadata, we are going to use few built-in WordPress functions into the template file.

We are using the default twentyseventeen theme where single.php is the template file for the single posts.

Go to Appearance > Editor and open single.php from the right sidebar.

Find the row: <main id="main" class="site-main" role="main">

And paste template tag the_meta() just below:

<h3>Quote of the Day:</h3>
<?php the_meta(); ?>

The template tag automatically puts the entire meta-data into a CSS style called post-meta. The key is in a span called post-meta-key so you can style it in your style sheet. All of this is showcased in an unordered list.

To customize the appearance of the meta-data go to Customize > Additional CSS and paste this styles within:

ul.post-meta li {
    color: #111;
    list-style-type: none;
}
ul.post-meta li span.post-meta-key {
    color: #999;
    font-weight: normal;
  text-transform: capitalize;
}

Click Save & Publish:

wordpress custom fields

It looks nice but how would look a post without custom fields meta-data?

wordpress custom fields

Obviously we need better solution and fortunately WordPress offers more ways to display custom fields meta-data.

Delete the previous code from single.php and paste the code below which uses conditional statement if / else to handle the cases with posts without custom fields:

<?php  $quote = get_post_meta($post->ID, 'quote', true); ?>
<?php  $author = get_post_meta($post->ID, 'author', true); ?>
<h3>Quote of the Day:</h3> 
<ul class='post-meta'>
<?php if ($quote && $author) { ?> 
<li><span class='post-meta-key'>Quote:</span> <?php echo $quote; ?></li>
<li><span class='post-meta-key'>Author:</span> <?php echo $author; ?></li>
<?php } //if there are no quotes then display
else { ?>
<li style="color:#999">The quotes got a day off.</li>
<?php } ?>
</ul>

To complete our example we are going to create two more posts - one with the same names of the custom fields but with different values (Custom Fields New Post) and one without any custom field (Post without Custom Fields):

wordpress custom fields

On the new post with custom fields we have a different quote from a different author displayed correctly:

wordpress custom fields

On the post without custom fields is displayed the fallback (else) option:

wordpress custom fields

Display custom field within the loop

You can display the same code within the loop between these lines:

get_template_part( 'template-parts/post/content', get_post_format() ); 
//Custom field code goes here
// If comments are open or we have at least one comment, load up the comment template.

But because the loop is within PHP block of code we need to close PHP before our custom field code and open it back after our last tag:

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

<?php  $quote = get_post_meta($post->ID, 'quote', true); ?>
<?php  $author = get_post_meta($post->ID, 'author', true); ?>
<h3>Quote of the Day:</h3>
<ul class='post-meta'>
<?php if ($quote && $author) { ?>
<li><span class='post-meta-key'>Quote:</span> <?php echo $quote; ?></li>
<li><span class='post-meta-key'>Author:</span> <?php echo $author; ?></li>
<?php } //if there are no quotes then display
else { ?>
<li style="color:#999">The quotes got a day off.</li>
<?php } ?>
</ul>
<?php

// If comments are open or we have at least one comment, load up the comment template.

The Quote of the Day will be displayed below post content and above comments:

wordpress custom fields

Display simple message using custom fields

Open the first post (Custom Fields Demo) and create another custom field with name: note and value: Custom fields can be used to add extra metadata to a post:

wordpress custom fields

Delete the previous code in single.php and paste the code below:

<?php $note = get_post_meta($post->ID, 'note', true);
if (!empty($note)) {
    echo '<p><strong>Note</strong>: <em>'. $note . '</em></p>';
}
?>

Update the file and publish the post:

wordpress custom fields

Activate custom fields from functions.php

WordPress give us even more ways to include the meta-data from custom fields. We can do it from the functions.php file of our theme without touching template files at all.

Delete all code we added to single.php and open function.php file in Appearance > Editor. Go to the last line and paste the below code:

/**
 * Custom fields demo.
 */
add_action (loop_start, 'cf_demo');
function cf_demo() {
  if ( is_single() ) {
  global $post;
  $quote = get_post_meta($post->ID, 'quote', true);
  $author = get_post_meta($post->ID, 'author', true); ?>
  <h3>Quote of the Day:</h3> 
<ul class='post-meta'>
<?php if ($quote && $author) { ?> 
<li><span class='post-meta-key'>Quote:</span> <?php echo $quote; ?></li>
<li><span class='post-meta-key'>Author:</span> <?php echo $author; ?></li>
<?php } //if there are no quotes then display
else { ?>
<li style="color:#999">The quotes got a day off.</li>
<?php } ?>
</ul>
<?php
  }
}

As you noticed there are few differences between this code and the one we used in the template file:

  • First we define an action to inform WordPress when to use our code;
  • We use conditional logic to make code run only on single posts;

But using this method to activate custom fields will always display the meta-data above the loop (content).

So if you want to use it within the loop (which looks the most appropriate way) you must use the example with the template file single.php.

Conclusion

We hope this information will help you if you are just starting with WordPress theme development.

It is worth mentioning that the recommended by WordPress method for editing the theme is creating a child theme, which you can read about in our article WordPress Child Theme

#content #management

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support