Once you understand and know how to create a custom field, you might want to make it easy to use for yourself or your client. Otherwise, your custom field is included in the list of default custom fields WordPress includes in the core which can be hard to find sometimes.
Creating your own custom meta box like most of the big plugin authors do, creates a better user experience for yourself, clients and users.
Rather than hand code a meta box, another solution is to install a plugin. All the nice stuff has been added to the best plugins, which in this case is named the Advanced Custom Fields plugin. Don’t be fooled by the name, its a easy to use as you’ll find out in a minute.
Advanced Custom Fields Plugin
This plugin enables you to create a high quality custom meta box which will look something like this:
The above screenshot shows a very basic example of what can be added to all your edit post screens in a few minutes. You can also choose from a range of pre designed meta box field types which you easily customize using this plugin.
Lets see how easy it is.
Add New Field
Click Custom Fields > Add New and configure the settings in the first section to something like what i’ve done in this screenshot.
The settings in the first section will change depending on which type of met a box you want to create, This example uses the Text Area’ Field Type’ however you’ll see a big range of field types you can choose from to create a meta box in the drop down menu.
The rest of the settings are fairly self explanatory however here’s the screen shots of exactly what i did to create a basic meta box for a text area. This meta box uses a custom function to display the content after any post or page title.
Location Of Meta Box
These settings determine which edit screens will be able to use the meta box.
Box Options
You can use these settings to hide the default modules on all edit screens and also choose to display your new meta box in the sidebar rather than the normal display position under your editor.
Meta Box In Edit Screens
Once you’ve created your new custom met box, you’ll see it under your editor on all edit post/page screens. Type or paste in some text or HTML and update or publish the page. The content will appear on that page or post only in the position you hooked it in when you created the custom field using PHP in your child themes functions.php file.
Here’s an example based on the settings in this tutorial:
And here’s what a very basic line of text looks like using the custom meta box and custom field when published on the front end.
Why Use A Plugin
The advantage of using a plugin to create custom meta boxes is that you can use it to create unlimited custom fields with different types of meta boxes like what you can see in this screenshot:
The plugin makes it easier to:
- Create multiple custom fields
- Create multiple meta boxes
- Manage your meta boxes and custom fields
More to come on creating different types of custom fields for use with different meta boxes soon.
Learn how to create a custom meta box for a second featured image and post thumbnail.
Hey Brad!
Thanks for another user-friendly tutorial. I just downloaded this last night and the developers site is missing all the images so I just deactivated it.
What timing!
Images for the plugin?
Hi Brad,
This is a great introduction to the ACF plugin. I’m looking forward to your next installment on creating field types / advanced code usage.
Keep up the great work,
Elliot
Great plugin which makes it easy to create different types of meta boxes.
Thanks for stooping by Elliot.