followers 3 popularity
following 2

followers  view all

following  view all

designs2html is not in any groups


I am interested in web designing and development along with CMS.
Samuel Dawson | designs2html

Adding Action Elements in WordPress Post Meta Boxes

Jul 24th 2015 at 6:16 AM

If you're running a WordPress website and have created custom post type for it, then you may feel the need to insert some additional data to the custom posts. Perhaps, you'll think about using custom fields to achieve such an objective. It's a good option, but it's not very user-friendly. This is where WordPress meta boxes come in handy.


Wondering, what is a custom meta box?

With the help of meta boxes, you get the ability to add specific pieces of information to the post or page editing screen, without having to rely on custom fields.

For instance, let's assume, you're working on any client project that requires building a collection of posters. Most likely, you will focus on the WordPress core functionality to see how the data of the theme can be organized: each post will contain a poster containing an image and a brief description. You can choose to use WordPress categories and tag system to organize those posters. But, what if you need to insert another some meta data that represents about the “creator” of each poster? A custom meta box can help you in adding such data to the posters.


Most importantly, a custom meta box enables non-tech savvy WordPress website owner to add a custom piece of data to the post/page content. For example, a blogger after publishing a post can notify readers about some obsolete piece of information via a custom meta box.


How you can generate a meta box in WordPress?


In order to create a meta box, you just need to make use of the add_meta_box function within your theme functions file. For example, adding the below code snippet to your theme's functions.php file will add a custom meta box to your posts:


function mycustom_add_meta_box() {


add_meta_box('mycustom_sectionid', 'Make This Content Featured', 'mycustom_meta_box_callback', 'content');




add_action( 'add_meta_boxes', 'mycustom_add_meta_box' );



This code will add a custom meta box to your WordPress theme that will display some specific information based on your needs in the post editing screen.


Let us look at how the above code works:


We are creating a custom meta box with the name “mycustom_meta_box”, and then the add_meta_box() function is used which informs WordPress to include the new meta box. This function is passed a few arguments that will display the data of the custom meta box. Lastly, add_action is a WordPress hook that tells WordPress to add the meta box we've just created in the theme.


How to generate action elements in the custom meta boxes?


It's obvious that, you would like to have complete control over how your information is being displayed in a meta box. This brings us to action elements. Adding action elements like radio button, check box, drop-downs, etc. in your custom meta box, helps in making the data within the meta box organized.


In order to insert action elements in our meta box, we will first have to define a basic structure. For example, below code snippet will generate an action element in the form of textboxes in our custom meta box:


/* Code for displaying the post meta box. */


function mycustom_meta_box_callback( $post ) {


wp_nonce_field( 'mycustom_meta_box', 'mycustom_meta_box_nonce' );


$value = get_post_meta($post->ID, 'frame_text', true);


echo $value;













Saving the changes made to the custom meta box


So, now that you've come to know about how you can create a custom meta box and its action elements, it's time to save your metadata. For this purpose, you need to make use of the WordPress hook “save_post”, as follows:




The “mycustom_meta_box_save” function will clean and save the data on receiving the argument in the form of post id. The save_post hook will get fired when an “update” button or “Save Draft” button is being clicked. Prior to doing anything, it is important to consider three things:


  • evaluate if the post gets saved automatically or not,

  • verify the nonce value,

  • and make sure that the current user can edit the post.


To do so, simply use the following code:


function mycustom_save_meta_box_data($post_id){


if ( !isset( $_POST['frame_text'] ) ) {






$txt = (isset($_POST['frame_text'] ) ? $_POST['frame_text'] : '');


$txt = (isset($_POST['frame_text1'] ) ? $_POST['frame_text'] : '');


$txt = (isset($_POST['frame_text2'] ) ? $_POST['frame_text'] : '');


update_post_meta( $post_id, 'frame_text', $txt);


update_post_meta( $post_id, 'frame_text1', $txt);


update_post_meta( $post_id, 'frame_text2', $txt);




add_action('save_post', 'mycustom_save_meta_box_data' );


Styling your custom meta box


If you would like to add some style to your custom meta box, here is a simple code that will help you achieve the same.


function mycustom_admin_styles(){


global $typenow;


if( $typenow == 'post' ) {


wp_enqueue_style( 'prfx_meta_box_styles', get_theme_directory_uri(). '/css/meta-box-styles.css' );






add_action( 'admin_printing_styles', 'mycustom_admin_styles' );


The code simply adds the meta-box-styles.css to your theme template directory. This is where, you can add your own choice of style to improve the look and feel of your custom meta box.



You can add as many textboxes as you would like in the above code. Just like text boxes, you can inject several other action elements within your meta box in WordPress.


Let's Wrap Up!

Creating a meta box help gives the ability to add a custom piece of data based on your specific needs. However, you can have even more control over how the data is organized, and most importantly, displayed in the meta boxes by adding action elements. With action elements like radio buttons, textboxes, drop-downs and so on, you can easily manage the content present within the meta box.


Reading this post will hopefully give you a fair idea of how you can add custom meta boxes on your site. In addition, you'll come to know about the use of action elements and how they help give more control over your post meta box structure.

This is the very informative post which will really help everyone. Designs2HTML Ltd always involved in the process of sharing information with everyone. They are also involved in PSD to WordPress service so that people learn more about this CMS.

Please to comment

sign in

Remember Me

New to IM faceplate? join free!

Lost Password? click here