How to create a custom Meta Box. The easy way.

In this article I will show you how you can create a custom Meta Box for your WordPress driven website. You will be able to add this to your existing theme or you can use this code in your plugin. There are several tutorials out there and also some plugins that lets you create a custom meta box, but all of them are quite complicated and, I like to keep things simple and avoid loading any unnecessary scripts in my theme. So let's get started!

What is a Meta Box? You might ask...

A meta box is a custom section in your post or page editor where you can store custom fields that can be used later in your post. Each custom field is related to the a specific post or page or even custom post type. For example, if you are using an SEO plugin you might have a custom meta box where you are storing custom values for page title and description in custom fields.
This is how our example will look like:
wpshed custom meta box example

Why would you use a custom meta box?

Well, if you are making product reviews product reviews on your blog, you should be using structured data format as in this example from schema.org. Why? Because you want search engines to understand exactly what you are doing. At this point this is just highly recommended by Google, but in the future your content might be excluded from searches because it's not clear enough. Now you could copy that chunk of code from the example, modify it and paste it on every review post, but this is a lot of work, Or, you could just edit your theme file (single.php for example) and include all the variables (product name, description, rating, etc) needed in your special custom meta box.

Let's start creating the code

First, let's create a function that will retrieve our custom fields. This function can be used to get a custom field value in the meta box and also in the theme. This function will return the custom field value or false if there's no value inserted. You can create a condition in your theme to show the rest of the code only if a value is inserted in the custom field, assuming that not all of your posts will be reviews.

Next, we will generate the actual meta box, but there will be no fields in it at this point:

The above example is generating a meta box in the post and page edit pages. Later on we will look at where it is placed and how you can manipulate this.

Now we need to output the meta box fields by adding this code.

The above will output a textfield and a textarea field. Notice how we make use of the wpshed_get_custom_field function to output the stored values.

And finally we need to be able to save this values. For this we need to add this code:

Before saving any value, the above function will check 3 things:
1 - It will stop running doing autosave (we don't want to brake WordPress)
2 - It will run only after a user action, no remote publishing by scripts.
3 - It will run only if the user have the rights to edit posts or pages.

That's it! Our custom meta boxes are done! How easy is that? Now you can place the stored values in the theme where you like by using the first function.

Download the script here

Let's take a look at where and how you can place a meta box:

The above example will add the meta box right after the editor in your post and page edit pages. To tell WordPress where to put it we used the 'post' and 'page' values in the code. If you are using custom post types and want the meta box to be displayed there, just change the 'post' with the registered name of you custom post type, or add another line with the custom post type registered name to have it displayed on posts or pages as well.

'normal' tells WordPress that it should be placed under the content editor in your page. If you are using 'side' instead of 'normal', the meta box will be placed in the right side where the "Publish" button is located.

The 'high' value tells WordPress that this is a high priority meta box and it will be displayed before any other meta boxes. The priority should be set depending on how often the custom fields are used when creating a post or page.

Here are some examples of placement:

Note: You don't need to include the above code in the example script.

Cheers!

Share the love...Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on StumbleUponDigg thisShare on TumblrShare on Reddit

Comments

  1. Fab says

    Hello, thanks for the tuto! I tried it, it works well for the 1st input in the text box (or text area). But when I come back to my page/post and want to update my text, it's not working. It's not updating, the old entry remains. Any clue why?

  2. Francisca says

    nice tutorial. BTW how to add option and select on the box? and call the selected value? Thanks a lot

  3. rafy says

    hi!
    Awesome job!
    This is perfect for me, a much bet options than wpalchemy metabox which is kinda heavy-weight.
    I do have a small problem though:
    I have entered a google maps code into a custom field, but the output comes out with quotes: http://prntscr.com/51vl1y

    is there a way to avoid that? Thanks!

    • says

      Yes, change the esc_attr( $_POST['wpshed_textarea'] ) to $_POST['wpshed_textarea'] just be aware that your are NOT sanitizing the textarea field by removing the esc_attr function.

      If you are the only author on your site it should be not a problem as I'm sure you would not want to inject malicious scripts to your own site :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">