Create Custom Metaboxes

I tweeted the other day about having 6 articles on custom metaboxes in WordPress and I almost forgot about it. I don’t actually have 6 but more like one or two. I’m going to set something straight right now though, I am not an expert in metaboxes by any means….yet. I do however know how to set them up properly and use what means of research I use to implement said research. Ok now that that is cleared up I can move on. What I’m going to show in this one is how to create custom Metaboxes using a very good PHP Class, “CMB”, to do the nitty gritty coding work and make things simple. We like simple, right? I thought so.

For this website I didn’t want to use a whole lot of plugins besides Jetpack, Crayon, WP SEO, the usual things to enhance the site not do most of the development for me. So a recommended plugin is Advanced Custom Fields if you don’t want to do this which is cool and all but I like the head-through-the-wall feeling of coding. Slightly masochistic but I’m OK mentally. Anyways, here’s how to create the metabox with a custom field using the CMB Class.

1. Download CMB Class

The first thing you want to do is download the CMB class from GitHub here. Once you have it, you’re going to want to unzip the CMB folder and get the main CMB folder. In your WordPress theme, put it in a folder called “lib”, you can technically call it whatever you want but for the sake of all humanity, name it lib. It’s just easier that way and will usually work right out of the box if it’s set up right.

2. Create a metabox.php

This could seem unnecessary and technically it is, but you’ll understand why this is crucial for not only development but most importantly SANITY. There’s a lot going on for metaboxes and fields so keeping this file as a part of the theme will help future designers and developers as well as keeping your coding clean and sanity intact when debugging. The second one is important. I’m speaking from experience. Use this file for the create metaboxes and fields and put it in any folder that you want and call it in your functions.php file.

3. Set up the metabox

Now we’re going to actually have some fun and set up the metabox with a custom field. There’s different examples of the boxes and fields that can be used, and they’re given in the example-functions.php file so you can see how each is made and how to do it. Here’s what the metabox.php file should look like and I’ll explain it.

As you can tell the first thing you see is the add_filter() function which is part of WordPress. It is used to hook to the function cmb_meta_boxes previously created in the CMB Class and then you can add it using your own function which mine is jl_metaboxes. You can also see that one is commented out which I might’ve done debugging but you obviously don’t need it if you looked at my Portfolio entries.

The next thing you’ll see is the $prefix variable. This is used in the identification of the custom fields which you’ll see in a minute.

After the $prefix variable you’ll see the empty array $meta_boxes[] and then you’ll see it being populated below with the ID, title, pages, etc. Those are the settings and such for the metabox. To create a new metabox you would need to create a new $meta_boxes array and go on from there. It’s really straightforward so don’t get bogged down from massive amounts of arrays going on. There’s a lot.

4. Create Custom Field

There you have it. Your metabox is created but it’s not done yet because it’s clearly not working. Besides calling the function, adding it the functions file, and having no fields it clearly won’t work so here is the code for a custom field to go along with it.

There you go, a custom field. What I find amazing is that this creates a custom field that will save in the database without further markup. It’s pretty awesome. There’s different fields that you can use that do different things. You can have another editor box, a checklist, and other things. If you’re feeling adventurous you can also add in media downloads which is pretty cool or do a full edit of the page layout if you code it out. This is the full metabox and field:

There you go, your metabox and field. But it’s still not done because it won’t work unless being called which brings you to…

5. Calling the function

If you’ve done everything correctly which you should’ve because I literally copy and pasted what I had in my file, then you would have a metabox and custom field. You can’t see it though because the function isn’t officially called and that poses a problem because visually it’s not working so let’s get it working.

5-A. Initialize the metabox function

The first call is to initialize the metabox function previously stated. Here’s the code that initializes it:

There you go, now it WOULD work provided it’s called in the functions.php but it’s not yet.

5-B. Include in functions.php

I know for a fact there’s different ways to do this so choose whatever way you like and go from there. This is how I included it in my functions.php file.

You can see what it does already so I’m not going to go into it. There you go, a full functioning Custom metabox and custom field to do whatever you want. The next piece I write/type out will be how to use the metadata in a theme and how to debug it.

Like always, let me know what you think in the comments.