A lot of my recent builds have consisted of WordPress based websites. WordPress unfairly gets labeled as only being good for building a blog, I completely disagree. One thing I do believe every developer should have in their WordPress box of tricks is the ability to quickly and easily create extra fields that accompany posts or pages and are easily editable for the user.
A meta box is a box which usually sits underneath the visual editor inside wp-admin. A meta box box then contains form fields to save meta data about the post.
Let’s take an example piece of content, a job vacancy.
A job vacancy is generally made up of more than just, job title and description. The extra pieces of information that could be attached to a job vacancy are things like, salary, location and contact email. If this information is not easy for the end user to edit then it get’s very complicated to maintain the website.
In comes my favourite way to add custom meta boxes: https://github.com/WebDevStudios/Custom-Metaboxes-and-Fields-for-WordPress.
Installing the library is fairly simple, getting it to do what you want can be a little complex at first, but once you get used to the way it works, you’ll never use anything else. I tend to copy this library into my theme or plugin folder, inside a folder called lib. The instructions for installating the library are found on the page above but I’ll go over it briefly.
Click download zip to the right hand side on github and unzip the contents into a folder called lib inside your theme or plugin. Then inside your functions.php or plugin file add the following piece of code.
add_action( 'init', 'cmb_initialize_cmb_meta_boxes', 9999 );
/**
* Initialize the metabox class.
*/
function cmb_initialize_cmb_meta_boxes() {
if ( ! class_exists( 'cmb_Meta_Box' ) )
require_once 'lib/init.php';
}
This will give you all the functions you need to be able to start creating custom metaboxes easily. I recommend taking a look at the example-functions.php as it shows you exactly what you need to do inside your own functions.php or plugin file to get started.
Taking our job vacancy as an example then we can write a bit of PHP to create everything we need to save and edit custom fields, like salary. Take a look at the piece of code below.
add_filter( 'cmb_meta_boxes', 'cmb_sample_metaboxes' );
function cmb_sample_metaboxes( array $meta_boxes ) {
$prefix = '_ew_';
$meta_boxes['job_metabox'] = array(
'id' => 'test_metabox',
'title' => __( 'Test Metabox', 'cmb' ),
'pages' => array( 'page', ), // Post type
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Show field names on the left
'fields' => array(
array(
'name' => __( 'Salary', 'cmb' ),
'desc' => __( 'The expected salary of the job vacancy.', 'cmb' ),
'id' => $prefix . 'job_salary',
'type' => 'text',
),
array(
'name' => __( 'Location', 'cmb' ),
'desc' => __( 'The location of .', 'cmb' ),
'id' => $prefix . 'job_location',
'type' => 'text',
),
),
);
return $meta_boxes;
}
The main thing to look at here is the fields array. This field tells the meta box which type of fields it should contain. Using our job example you can see we have a field for salary and location. What this will do is allow the user to update these separate fields inside the admin area.
The great thing about separate meta fields is that we can query based on them on the front end. We could pull in all the jobs from a certain location or a salary bracket.
If you want to query based on meta value then I recommend making it more structured than a free text field, something like a select box would work nice. You could even setup an extra option page where they could add locations and pull this data into the select box, but that’s another post entirely.
The best thing to do is to install this library and give it a go. If you have any questions then leave them in the comments section below.
Good luck!
Comments