Modern websites have many different templates and page layouts. Quite often these templates can’t be effectively managed using just a WYSIWYG editor. To build a successful custom WordPress theme you need to make managing modern page layouts as easy as possible for non-technical users.
To effectively manage a template like this you’ll need the ability to create your own administration panels to manage various content regions. Let’s take a look at how to do this using WordPress meta boxes.
The Meta Box
A great WordPress theme makes it easy and safe for a non-technical person to update content. WordPress has a built-in feature called custom fields that will allow users to manage chunks of text outside of the visual editor. Custom fields can be stored and displayed on a page or post independent from one another. This is a great feature, but the out of the box UI is not intuitive enough for a non-technical user. For this reason, features that require additional user input should use a meta box instead.
Meta boxes allow you to create customized administration panels in WordPress that are intuitive and simple. Using meta boxes, we can craft an effective publishing experience that user’s rave about.
Real World Examples
This sounds great in theory, but you’re probably wondering how it can be applied in the real world? Below are a few screenshots of projects I’ve worked on that successfully leverage this approach.
Page Extras
In this example, a meta box is used to create two extra fields for the “Page” post type: a textarea labelled “Lead-in”, and a select dropdown labelled “Promotion”. Both of these fields are seamlessly added to admin UI.
Team Profiles
In this next example I’ve attached a meta box to a team post type, allowing for the customization of team profiles.
For more details on creating this exact setup, check out my CSS-Tricks article, “Creating a Meet The Team Page in WordPress”.
Product Highlights
This example uses repeater fields for managing “Highlights” sections of a product template.
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.
Ways to Create Meta Boxes
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.
The 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
get_post_custom()
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.
the_field($field_name, $post_id)
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 ACF documentation.
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:
<?php
// 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 add-ons
*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.
In Conclusion
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.