WordPress comes with the feature of custom fields which allow post authors to add extra custom information to different posts. While the feature might sound a little bit difficult for beginners who have not dealt with it yet, it is quite useful in making posts and pages more functional and informational.
Acting as a basic tutorial written for beginners who are curious but do not know where to start, this post explains what WordPress custom fields are, how to create them, and some other tips and tricks that beginners should know about them. Let’s begin with the general understanding.
What Are WordPress Custom Fields?
Custom fields are in fact a form of fields that enables you to save any extra information for WordPress posts or pages to extend them. You may think that they are not powerful, but they are indeed useful and require a little coding knowledge. If you dig deep into the feature, you can achieve nearly any value out of it. The most basic uses of custom fields are to showcase custom thumbnails (featured images), indicate update status, present author information and profile, and store the expiration date of a post or page.
Custom fields are handled in key/value pairs. The “key” refers to the name that identifies a specific field, so you can use it every time you want to achieve the same goal, like showcasing the author profile. The “value” is changeable, used to display the specific information in a post/page when you call the key in a WordPress theme. For example, when the “key” is “author_information”, the “value” can be the name of any author in your team.
How to Create Simple Custom Fields in WordPress Manually?
When adding or editing a post/page, you can see the Custom Fields section below the body. If it is not shown, you need to open the “Screen Options” in the upper right of the page, and get “Custom Fields” checked. Now you can see a section like this:
Now we’d like to make an example to show how to create simple custom fields to show the author of a post. We define the input of “Name” as author_name and the “Value” input as Susan, and then save to the database. Just adding a field to the meta-box does not show the information we want at the front-end. Why? Because the theme has not been told to display them yet.
At this time, we need to add some code to the WordPress loop inside the theme code. As we only want the custom fields to appear on posts, we include the following code in the single.php only and place it at the end of the loop. But remember the code should be within the loop. Note that the code below is used .
<?php echo get_post_meta($post->ID, 'author_name', true); ?>
Now the theme will display the custom fields in the front-end. Till now, we have achieved the simplest goal. To customize the custom fields to be more functional, you need to make some customization in the theme files, which we will not discuss now because the task is a little bit complicated, requiring making changes to the CSS stylesheet. If you are not familiar with styles, ask someone for help.
How to Create and Manage Custom Fields by Using Plugins?
As the manual creation and customization seem to be difficult in order to make custom fields perfect, we now introduce an easier way – to use a WordPress plugin. Usually, plugins are powerful, easy-to-use, and helpful for even beginners as they probably provide visual management of fields. The example below is taken with the use of Custom Field Suite plugin, a popular one in its kind that does not need you to touch much code.
After installing this plugin, you should start by adding a new Field Group which includes a bundle of custom fields with their own placement rules. The placement rules can be customized as you want, which means that you can choose where and how to display the custom fields.
Clicking on the button of “Add New Field”, you can create new custom fields in the group by filling the field name and choosing the field type. When all fields you want are completed, click on the “Publish” button to activate the Group.
Remember that to display the custom fields, you still need to pull the field values into the template files by adding simple code. You can use the get() method to easily modify the template files. For example, if you want to output the value of a field named author_name, you can add the code below to the target template file (depending on the placement rules set before).
<?php echo CFS()->get('author_name'); ?>
Other Plugin Options for Adding and Managing Custom Fields
Besides Custom Field Suite, there are many other options which you can choose from. In below, we list some of the best with large user base and high ratings on WordPress.org. Hope the collection includes the one that really helps you.
Advanced Custom Fields
It is the most popular custom fields plugin with over 2.7 million downloads, supporting 25+ field types. Using the plugin, you can visually create your fields with the use of an intuitive API. The reason why we did not use it as an example before is because this plugin has a higher level of skill requirement. So it is a perfect solution for experienced users, but not starters knowing nearly nothing about custom fields. When you have got some skills, you can switch to Advanced Custom Fields to get more possibilities and flexibility.
Types is a comprehensive plugin that offers an admin UI for managing custom fields, custom post types and custom taxonomies. The user-friendly PHP API is favored by a large number of web developers, and beginners can also benefit from the built-in features. If you are experienced enough, the CSS editor should be a helpful hand in designing custom fields. Types supports 20 field types.
Custom Field Template
This plugin is developed with a single goal to extend the functionality of custom fields to make them more powerful. With this plugin, you can make your own custom field templates and customize them, add style attributes, set access user levels, and so on. However, as this plugin hasn’t been updated for a couple of months, you’d better go with other alternatives unless it is exactly what you need.
Get Custom Field Values
This plugin helps you utilize the power of custom fields better. It provides a “Get Custom Field” widget, a [custom_field] shortcode and 6 template tags to enable you to display custom fields more easily. As the plugin is developed with detailed documentation, you can get started with it quickly without taking much time to familiarize it.