Using this system users can build pages with a flexible number of distinct content regions to showcase features of a product. This provides a great UI for managing pages that have a layout similar to this Desk.com “Features” design.
You should now have an understanding of why meta boxes are a key aspect of a powerful WordPress theme. Let’s take a look at a few of the ways you can create a meta box. Like many things in WordPress, there are many different ways to create a meta box. I’ve been creating custom themes with advanced administration setups like this for over four years, and currently the
Advanced Custom Fields (ACF) plugin is my tool of choice for various reasons. I’ll leave it up to you to decide which approach is best for your circumstances. From Scratch
You can create your own meta box from scratch using the
add_meta_box() function. If you’re using your meta box inside of a plugin, I would highly suggest this approach. This method achieves only what you need it to, avoiding the potential for ambiguous maintenance issues. For more information on building a meta box with this approach refer to the
codex article on add_meta_box usage. Using a PHP Class
Building a meta box from scratch is tedious and time consuming. I wouldn’t suggest doing it for a custom theme, unless you plan on distributing that theme to the masses on a marketplace like ThemeForest. Using a PHP class will speed up your development significantly, while also providing the precision and flexibility of a hand coded solution.
I’ve worked with and would suggest exploring the
WPAlchemy MetaBox Class. It’s a well constructed and maintained library that’s currently published on Github. The library comes equipped with many features that would otherwise be difficult to hand code yourself, including:
Exclude / Include Options let you create meta boxes for a specific theme template, post type, category or tag.
Action Hooks & Filters allow you to control what happens when the data is saved, and output.
Repeating Field Groups let you create a setup similar to the “Product Spotlights” example above.
Helper Functions that sanitize and output saved content into your theme or plugin.
If you’re a developer looking for precise control over your code base, but don’t have the time to start from scratch, I highly suggest exploring this option. I’ve personally had great success with it.
meta-box library on
Github is another promising PHP class for building meta boxes, but I haven’t used it personally. If you have experience with it please contribute in the comments.
The team at WebDevStudios has also released a PHP class for building meta boxes on Github named
Custom Metaboxes and Fields for WordPress. It’s now widely used by the community and is another wonderful option. Using a Plugin
You can also use a plugin to create meta boxes. There are many options, but in my opinion the
Advanced Custom Fields (ACF) plugin is the best available choice. It’s easy to use, well developed, fully extendable with add-ons, and can handle pretty much anything you need.
To create a meta box with ACF you’ll need to install the ACF plugin. Once installed, you’ll see a
Custom Fields admin menu inside of WordPress. Using this menu you can build custom meta boxes to manage various aspects of your site. The following screenshot was taken during the creation of the Team Profiles example mentioned above. Using Data in Your Theme
Once you have created a meta box, and have stored information in it, you’ll need a way to display that information in your theme. In most circumstances your data will be stored in custom fields. Extracting this information is easy, and can be done using one of the following methods.
Built-in WordPress Functions
This function will return an array of all custom fields attached to the current post or page. For templates that use extensive custom fields, this method is more efficient in terms of database queries.
get_post_meta($post_id, 'custom_field_name', true)
This function will return the value of a single custom field as a string. If you’re working with fields that can have multiple values you’ll need to change the last parameter to
false, or omit it entirely. This tells the function to return an array of multiple values instead of a string.
For more information on this visit the codex article on
Custom Fields usage. ACF Functions
The following functions can be used with the ACF plugin. They help simplify many of the aspects of working with advanced custom fields.
This function will print the value of the specified ACF field. This is useful for displaying required fields, when you are 100% certain that a value is stored. More information available in the
get_field($field_name, $post_id, $format_value)
This function will return the value of a specified ACF field. You can use this to check whether or not a field has been filled out. This will keep your theme templates lean, allowing you to do something if and when a specific field has a value. I use it all the time to conditionally display HTML:
// Collect meta box field values
$position = get_field('position');
$name = get_field('name');
$image = get_field('image');
// Make sure we have all the required fields to display our HTML
if ( $position && $name && $image ):
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name"><?php echo $name; ?></span>
<img src="<?php echo $image; ?>" itemprop="image" />
<span itemprop="jobTitle"><?php echo $position; ?></span></div>
<!-- /itemtype.Person -->
<?php endif; ?>
In this example we’ve theoretically used a meta box to create a
Schema.org Person. The HTML will only be displayed if a user has filled in all of the fields needed to create a Person. Taking It to the Next Level
One of the reasons I choose to use ACF over a PHP class is that it provides powerful, and more importantly stable, field types that would otherwise be very difficult to code by hand. These advanced field types have allowed for the creation of some amazing CMS experiences.
Repeater fields* – Field groups that can be repeated and re-used multiple times (great for slideshows)
Image & file uploads that directly integration with the media library
Full rich text support, allowing for the creation of multiple WYSIWYG editors
Date and time picker fields
Creation of post relationships
Fully extendable with
*This feature is available through a premium
$25 add-on created by the plugin author, Elliot Condon. It’s more than worth it.
All of these fields directly leverage WordPress API’s and follow coding best practices. The code base is well documented, and if you encounter a bug it’s generally not difficult to dig in and find the source of the problem.
Meta boxes provide WordPress developers with the ability to create amazing administration experiences that delight users. As web layouts become increasingly complex, it’s important to understand how to build customized panels to managing various content types with ease.
As WordPress developers it’s important to make our sites as easy to manage as possible. I think you’ll find that a little extra time spent on the admin UI goes a long way towards improving client satisfaction. You can also save substantial amounts of time on training and support requests.