Learning how to create custom WordPress meta boxes allow you to make professional UI elements for yourself and your clients. This WordPress meta box tutorial will show you how to add admin UI elements to the edit post/page screens.

Important Before you begin reading, you might want to read Take Your WordPress Meta Box to the Next Level. This PHP class will let you create meta boxes fast with the flexibility you need as a developer. Full documentation walks you step-by-step. Create custom WordPress Meta Box UI elements for your projects with ease.

Creating a custom WordPress meta box lets you make clean UI elements for you and your clients. The default WordPress custom fields are functional, but IMHO, and if you can pull it off, using a WordPress meta box is the way to go. It will give your project that professional touch.

This WordPress meta box tutorial will show you how to quickly add a clean UI for some custom fields. You will even learn how you can hide these fields and prevent them from appearing in the custom fields area.

Getting Started with WordPress Meta Boxes

The code for your meta box will pretty much go in one of two places: in a plugin file or in your functions.php file. This tutorial will cover the latter (for those of you creating plugins, you will be able to adapt the code for your use as well). I like tutorials with code examples and lots of comments, with that said, lets dive right in:

I recommend that you download the sample files or cut + paste the code and markup below in the appropriate places as indicated. There are three sample files (you will also need to create a folder and name it custom):

If you’ve set everything up correctly you should see the following meta box in a edit post or edit page screen:

Using The Meta Box Values In Your Template

Being able to create the values is just the first part, now you need to do something with those values. Most likely you will be displaying the values in your post or page templates.

Remember the example above uses a single variable (_my_meta) to store values as an array, so when you get the meta value back from WordPress it will be an array and you will have to access the values using array syntax. Doing this is pretty straight forward:

The global $post variable should always be available, but here are some other methods you can use to get the current post or page ID which you will need to use with get_post_meta():

// using $post global variable
echo $post->ID;
// get a page by its path (recommended over using a page ID)
$page = get_page_by_path('company/contact-us');
echo $page->ID;
// if you are working in the loop
echo get_the_ID();

The above code and markup will help you produce clean UI elements for your next WordPress project. Like any tutorial, consider this a starting point for you to do great things. I hope you’ve enjoyed!

@Cippo, hopefully you’ve read the messages up top and some of the comments which point others to wpalchemy … have a look at it for creating super easy meta boxes and also look at this for help with WP_Query.

@Matt, I hope you’ve gotten a chance to take a look at wpalchemy, it’s the next incarnation of the above.

As a developer I like flexibility, to me flexible means a good mix between configuration and convention. I’ve tried to keep the form setup separate from the functionality, so just liek you would define input fields, you can do the same for select boxes, check boxes, raido buttons, etc.

@Paul, it basically loops a single or multi-dimensional array and cleans it up, looking for empty values. The function uses itself because it recursively checks any nested array values.

A user (Franz) of my wpalchemy class suggested the following tip: using array_filter() (without the callback) also does a similar filtering … I am not sure if it will properly filter a multi-dimensional array but it appears to do a good job filtering.

Also the function has changed a bit since my early versions (from above), the latest function looks like this (this is what wpalchemy currently uses):

hi i am creating a wordpress theme can you please help ?
the code is not working on the page of wordpress ,it work on the post ,
the box are show on every post and pages but the values not show in my template ,(yes i use the above code in my template )i check the html they retun nothing but in the post they working well

Hi, I hope Dimas or someone can assist with a problem I’m having. First let me describe what I’m up to: I am creating a custom post type for ‘portfolio’. Because the small thumbnails in the proposed portfolio galleries are not the same image as the one they will link to. I decided to use wpalchemy to create the custom meta boxes that would allow me to add two images at a time to a ‘portfolio’ post for the purpose of matching up the thumb with the larger image and then being able to drag and drop to reorder them.

I have also employed scripts to be able to access the wp media loader for each of these custom fields, upload an image and put it’s URL into the custom field.

Everything works, but one frustrating problem. Upon saving the post, the field sets duplicate so there are two of any recent additions when the edit page reloads… it is creating extra entries for a reason I can’t seem to track down…

A symptom that may point to part of the problem. When you go to create a new ‘portfolio’ the regular media upload button shows that there are no attachments to the post. However, when the media uploader pops up in relation to filling in the custom fields, it remembers every image that has been uploaded to this custom post type, as if there were attached to the new post… not sure if this is related.

In any case, there are three documents worth looking at (I posted on GIT hub: https://github.com/seahoss/shareCode), the three documents which contribute are: ‘functions.php’, ‘file-upload.js’, and ‘meta_portfolio_images.php’