In this post we are going to be taking a look at custom fields in order to help you get a good understanding how you can use this useful, but sometimes overlooked feature of WordPress, and also give you some advice on getting started with using them on your website.
In a recent post we looked at custom post types and taxonomies in WordPress, and while you don’t have to use them with custom fields; it’s not uncommon to see them used in tandem on a website.
If you’ve ever wanted to store additional information about your posts and present it a dynamic or different way to the rest of your post content, custom fields could be just what you’ve been looking for.
What Are Custom Fields?
Custom fields allow you to add more content to your posts than just the standard post title and body content. By adding additional fields to the post, you can then store extra information related to the content you are publishing.
One example might be to include a set of fields for storing contact information. The fields could contain the email address, telephone number, and URL of the subject of the post.
Once you’ve created the fields, they can then be set to be included on the post editor screen. The fields can be enabled for all post types, or just specific posts types, giving you lots of flexibility for how they are used and how can use them.
The contents of these fields could then be output when the post is published, and displayed at the beginning, end, or even in the post content. They can also be inserted into the theme files so that they are displayed anywhere on your site.
The appearance of the contents of the custom fields can be formatted just like any other content on your website; so while the above example isn’t very impressive to look at, it should give you an idea of how custom fields work in practice.
As well as being used by posts, custom fields can also be assigned to categories, tags and other taxonomies that are active on your website, giving you even more options for using them.
When creating the custom fields for your site, there are a number of field types to choose from:
- Audio
- Checkbox(es)
- Colorpicker
- Date
- Embedded Media
- File
- Image
- Numeric
- Phone
- Radio
- Select
- Skype
- Multiple lines
- Single line
- URL
- Video
- WYSWYG
Some of the field types such as email and URL can be optionally validated to ensure the user enters the correct data. Fields can also set as required fields, as well as repeater fields which can be used multiple times on the same post.
With so many options to choose from and ways to use, it should start becoming clear how powerful and useful this feature of WordPress really is.
What Custom Fields Can Be Used For
While the above example of storing contact information in custom fields, complete with a form on the post editor screen, is a basic example of their use, there are many other uses for this feature of WordPress.
Although anyone can add their own custom fields to their WordPress site, some plugins utilise them to great effect in order to add a whole extra layer of functionality to WordPress. One popular example is the WooCommerce plugin which is used for creating an online store.
The fields are used to store information about the products, such as their price, number in stock, product images, and shipping options. Then, when the product is published the information is presented to the shopper, as well as being used by the store to calculate the total price for an order and other essential functionality.
Another plugin you might be familiar with that uses custom fields is WordPress SEO by Yoast.
This plugin displays a set of custom fields on the post editor screen, but instead of outputting their contents into the post, they are added to the header of the page and are only viewable to those accessing the code, such as search engines.
Hopefully you now have a better understanding of what custom fields are and perhaps some ideas for how you could use them on your website.
A Plugin to Help You Use Custom Fields
While you can create custom fields by hand, and add the required code to the theme files of your website, there are also a few plugins out there that can give you a visual interface for creating the fields. This makes it much easier to get started and increases their accessibility for non-coders.
If you’d like to know more about how to add custom fields to your website manually, the relevant entry on the WordPress Codex is a great place to start. However, for everyone else using a plugin is a great option.
In our recent post on custom post types and taxonomies we used a plugin called Types. This free plugin can also be used to create and work with custom fields. This is very handy as custom fields, post types and taxonomies can be used together for great effect, although they can work independently of each other.
With Types you can create custom fields for use with the regular WordPress post type, or any custom post types you have created, or that already exist on your site. The field creation takes place through a visual interface so there is no need to write any code to add them to your website.
How to Create WordPress Custom Fields with the Types Plugin
To give you an idea of how straightforward it is to starting using custom fields with WordPress, here is an overview covering how to create custom fields with the free Types plugin.
When first creating a custom field on your website you will need to create a custom field group to store them in.
To create your first group click on Types > Custom Fields from the sidebar menu on your WordPress dashboard. If you haven’t created a custom field group already then you will be prompted to do so.
As this example is covering how to create custom fields to be used with a custom post type that has been created for publishing theme reviews, the group title and description reflects that.
In the next step you must decide where to display this group of custom fields and which post types can use them. The group can either be set for use by all post types, including the default WordPress post type, or just for individual post types, such as any custom post types you’ve previously created.
Additionally you can create custom fields to be used with taxonomies such as categories, tags, or any custom taxonomy you’ve created.
Now that the group has been created, you can start adding fields to it. As we covered earlier there are many different types of fields that can be created beyond just the simple text fields.
Adding the fields is as simple as clicking on the field type you want to use, and then entering the relevant information, such as the field name, slug (reference), and description. You can also choose whether your field is a repeater or single use field. If you want to add multiple instances of the field with different content then select repeater, if not select single.
Once you’ve saved the field you can see how it works on the posts you’ve enabled it for by going to the new post screen and scrolling down to find the custom field box.
You can even customize the appearance and text used by the box by opening the styling editor on the field creation screen and editing the HTML and adding your own custom CSS. However, the field box looks pretty good as it is so this isn’t necessary unless you have special requirements.
You can create multiple groups of fields of your site and assign them to the same post type, all post types, or individual post types as necessary.
If you want to know more about the additional features of the Types plugin and other things you can do with it and custom fields, be sure to check out their online documentation.
If you’ve been following along you might be tempted to preview your post to see how the data in the custom fields will look. However at this point they won’t be displayed as your theme won’t know how and where you would like them to be published.
How to Display Custom Fields on Your Site
Now that we’ve created our custom fields we now have to find a way to display them on the front end of our website. This is where things get a bit more complicated, but in most cases, it’s an essential part of using custom fields.
If you want another easier way to work with custom fields and displaying them and their contents on your website, then the premium Views plugin from the developers of the Types plugin gives you a code-free option for doing so.
However, if you are on a budget or would like to know how to do this yourself, here is some information to help you get started.
Display the contents of the custom fields in the post content of your website varies wildly depending on the theme you are using. In some cases you may need to edit your theme’s single.php file, while for others you may need to edit a different file, such as the content.php file.
The easiest way to display the contents of all the custom fields for a post is to add this piece of code in the required location in The Loop:
<?php the_meta(); ?>
For the free and popular Twenty Twelve theme, inserting that code at this location outputs the list of custom fields at the end of the post:
While that won’t be suitable for most uses, it is a quick way to put them to use on your site.
Adding something like this would allow you to display a custom field of your choice, along with some accompanying text:
This text can then be formatted using CSS and as you continue to tweak the code and the formatting, you will get closer to displaying the custom fields in the way you want for your project.
The Types plugin documentation contains some helpful information on outputting the contents of custom fields into your posts and theme files and is a good place to start; while their premium Views plugin gives you the option of doing all this without editing any code directly.
Conclusion
You should now be able to confidently talk about custom fields and also start adding them to your WordPress website if you wish. While displaying them takes more work than creating them, due to way the different themes work, and also the individual requirements of each project, they are a powerful feature that can add a lot to a website.
If you know of any useful resources for using custom fields, or have any questions, please leave a comment below.
