Create A Meta Box For A Custom Field

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.