Many of us want to add custom meta boxes to WordPress post types and doing so is a relevantly easy jaunt, in this tutorial i’m going to show you how from start to finish to add a Custom meta box to your admin pages.

I’m going to run through a very simple example of adding your own custom-meta to a page called ‘homepage’ from start to finish.

First of all pull up your functions.php file.

Now add the following

add_action('add_meta_boxes',array(&$my_custom_meta,'home_create'));

Notice how we are passing an array with reference to the variable $my_custom_meta here. $mss_custom_meta is a class we are now going to define which will handle our custom meta handling.

Create a folder called includes/ and within create a file called custom-meta.php

Within custom-meta.php enter the following.

if(!class_exists('MY_Custom_Meta_Handler')):
    class MY_Custom_Meta_Handler{
        function __construct(){}
        function home_create(){}
    }
endif;

Save this and head back to your functions.php file.

You’ll hopefully remember from earlier that we were passing a reference of $my_custom_meta around. Now we need to define it.

require_once(dirname(__FILE__)."/includes/custom-meta.php");
$my_custom_meta = new MY_Custom_Meta_Handler;

Now we have our class in the $my_custom_meta variable ready to be passed in our add_action call already defined.

We’ve now done the very basis setup and we’ve got ourselves an action calling a class. Now we need to define what we want our extra custom fields to look like and what we want them to do. We’ll start by defining another action, where we want it to apply to and the function designated to control the looks of it.

add_meta_box('my_homepage_meta','Home Page Info',array(&$this,'home_display'),'page','normal','high');

As defined by WordPress:

add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args );

Here we have said we want to give this meta_box the id of my_homepage_meta, the display title of Home Page Info, passed this class by reference using this and home_display function. We’ve then defined the page which in this case we’ve left as a ‘page’. Although it could be a post, page or any other custom post type you define.

$page
(string) (required) The type of Write screen on which to show the edit screen section (‘post’, ‘page’, ‘link’, or ‘custom_post_type’ where custom_post_type is the custom post type slug)
Default: None

$context
(string) (optional) The part of the page where the edit screen section should be shown (‘normal’, ‘advanced’, or ‘side’). (Note that ‘side’ doesn’t exist before 2.7)
Default: ‘advanced’

$priority
(string) (optional) The priority within the context where the boxes should show (‘high’, ‘core’, ‘default’ or ‘low’)
Default: ‘default’

Now that, that’s in we need to focus on the home_create function within our class. The home_create function is going to be repsonsible for outputting our form to the WordPress backend.

function home_create($post){
$my_home_meta_some_text = get_post_meta($post->ID, '_my_home_meta_some_text', TRUE);
?>
<table class="form-table">
<tr>
<th scope="row"><label for="my_home_meta_some_text">Some text:</label></th><td><input type="text" name="my_home_meta_some_text" id="my_home_meta_some_text" value="<?php echo esc_attr($my_home_meta_some_text); ?>">
</td>
</tr>
</table>
<?php
}

So here i’ve created a form input and got the current value out of the database for this value using the get_post_meta() function.

To finish up we now need a function which is responsible for saving out this new meta data. Head into the class once more and locate the __construct() function and add the following line.

function __construct(){
    add_action('save_post',array(&$this,'home_save'));
}

This adds an action to the action save_post which means everytime a post is saved it will be fired. Now lets define our home_save function.

function home_save($post_id){
if(isset($_POST['my_home_meta_some_text'])):
update_post_meta($post_id, '_my_home_meta_some_text', esc_attr($_POST['my_home_meta_some_text']) );
endif;
}

And wallah! We now have some custom meta saved to this page! With minimal effort. Here’s the finished file and code to add to the functions.php file.

Functions.php

require_once(dirname(__FILE__)."/includes/custom-meta.php");
$my_custom_meta = new MY_Custom_Meta_Handler;
add_action('add_meta_boxes',array(&$my_custom_meta,'home_create'));

includes/custom-meta.php

if(!class_exists('MY_Custom_Meta_Handler')):
    class MY_Custom_Meta_Handler{
        function __construct(){
            add_action('save_post',array(&$this,'home_save'));
        }
        function home_create($post){
        $my_home_meta_some_text = get_post_meta($post->ID, '_my_home_meta_some_text', TRUE);
        ?>
        <table class="form-table">
        <tr>
        <th scope="row"><label for="my_home_meta_some_text">Some text:</label></th><td><input type="text" name="my_home_meta_some_text" id="my_home_meta_some_text" value="<?php echo esc_attr($my_home_meta_some_text); ?>">
        </td>
        </tr>
        </table>
        <?php
        }

        function home_save($post_id){
            if(isset($_POST['my_home_meta_some_text'])):
                update_post_meta($post_id, '_my_home_meta_some_text', esc_attr($_POST['my_home_meta_some_text']) );
            endif;
        }
    }
endif;

And there we have it, how to create custom meta boxes in WordPress.