How to Add WordPress Custom Fields

Custom fields are important components of WordPress, and they are often used to add meta-data to your blog posts, pages as well as custom post types. A custom field is usually handled with key and value pairs, and the “key” refers to the name of the meta-data element while the “value” is the information that appears within your meta-data list.

In this guide, we will show you a basic example of WordPress custom field and meanwhile introduce a highly-automated tool that easily adds custom fields to your post/page. Plus, several alternative options are listed at the bottom of this post.

How to Add Custom Fields in WordPress?

To get started, make sure that the “Custom Fields” option has been checked from the “Screen Options” drop-down menu. This will add a “Custom Fields” box right under your post editor. If needed, you can check to display featured image, post categories and send trackbacks.

There will be more or fewer options within your custom fields, and “Today’s Mood” and “Currently Reading” are two of the most commonly-seen custom fields according to this WordPress Codex page. In case you want to create a new one to accommodate certain cases, make sure that it will be recognized by template files firstly.

Step 1 – Create New Custom Fields in Your Template Files

Log onto the WordPress dashboard and go to “Appearance” > “Editor” as follows. Just select a template file to use the meta-data, such as single.php (Single Post) and page.php (Page Template). For this purpose, we use the following code snippet to change the post title colour:

<?php
$post_title_color = get_post_meta($post->ID, 'post_title_color', true);
if ($post_title_color): 
?>
    <h1 class="entry-title" style="color: <?php echo $post_title_color ?>">
        <?php the_post_title(); ?>
    </h1>
<?php else : ?>
    <h1 class="entry-title">
        <?php the_post_title(); ?>
    </h1>
<?php endif; ?>

As shown, the get_post_meta() function comes with three editable parameters:

• The first post ID is where to place the meta data, and it is always the current post that we use. It is often called $post_id.
• The second is the name of the key that provides the name for the needed meta value. This is known as the $key.
• The last is $single that can be specified to either “false” or “true”. This is needed especially when you have different $keys that use the same name.

Step 2 – Add the Custom Fields to Your WordPress Post

Having added the get_post_meta() function to your template file, it’s time to insert this custom field to your post. Just scroll down this post editor screen and fill the “Key” and “Value” parts with the previously-specified “Name” and “Value”. Do remember to update or publish your post to take effect.

How to Customize Your WordPress Custom Fields Using a Plugin?

If you want to add intuitive custom fields without dealing with any CSS code, then this “Advanced Custom Fields” plugin is the perfect solution. Due to a clean interface and rich features, this WP plugin has been downloaded and installed over one million times via the following URL.

Free Download: https://wordpress.org/plugins/advanced-custom-fields/

Once activated, a “Custom Fields” side-menu will be added to your WordPress backend. Move mouse over it and create a name for this field group, such as “Custom Field Settings”. In the next screenshot, hit on this “Add Field” button and fill in “Field Label” firstly. Note that, the “Field Name” should be one single word with dashes and underscores allowed.

Drop down and you will find there are many “Field Types” classified into six main categories, including:

1. Relational – page link, post object, relationship, taxonomy and user.
2. Choice – select, checkbox, radio button and true/false.
3. Basic – text, text area, number, email and password.
4. jQuery – Google maps, date picker and color picker.
5. Content – WYSIWYG, image and file.
6. Layout – tab and message.

Apart from the above settings, there are more attributes to be defined, such as:

• Placeholder Text – a short hint to describe the expected value of this field and it always appears within the input.
• Validation – just check this box if you’d like to make the field mandatory when editing the blog content.
• Field Instructions – a piece of instructions for authors and it will appear when submitting data.
• Default Value – This will be displayed whenever you create a new post.

Having added your fields to this group, remember to “Save” and “Publish” it to take effect. If needed, you can re-order, edit, duplicate and even delete those fields within this group. If done correctly, those fields will show up within the post editor’s “Custom Fields” section.

Notes: The custom fields can just go beyond the above examples, and there are free or premium plugins that are utilizing those custom fields to expand the WordPress functionality. For instance, the third-party Types plugin lets you create custom fields for drop-downs, checkboxes and radio groups. And the free Custom Field Template enables you to select different color schemes via the inbuilt color boxes.