Home > Wordpress Development > Adding Metabox In Post

Adding Metabox In Post

Hello readers here is one more post for adding any HTML content while creating a post. Today will associate a value to a meta box like below :

Demo Meta Box

As you could see we are going to add a custom combo box and there will add certain static values and display them on the post.

  • Note you could add any html/php code which is necessary for the software .

now will start with the development .(if someone is newbie in wordpress plugin development please refer my article ).

Step 1: As we know will select a name for the project that is unique , (meta-plugin-demo.php)

meta-plugin-demo.php

step 2:  To create we need to create the meta box when admin is loaded. So for that we need to call the wordpress hook .

add_action( 'admin_init' , initialize_plugin );

step 3: Now we need a hook and a function to insert a box into a admin template . so will use the function

add_meta_box();

This function creates a box and gives a call to specified function ,to add the content  . It takes 6 parameters and they are :

  1. Unique mata-box name
  2. Title for the meta-box
  3. Function Name
  4. Where to display (post,page,link)
  5. position (side,middle,default)
  6. priority (high,medium,low,default)

in meta-plugin-demo.php will add the following code

<p>function initialize_plugin()
{
     add_meta_box('meta-box-demo','demo',demo_func,'post','side','high');
}

step 4: Now the above code will call demo_func and would would contain the html code to display.So will define a text box and save that value with the post.

function demo_func()
{
     echo '<type="text" name="txt_box" value="">
}

Now the above source code will display a text box into a post as below :

demo Metabox

Ok now the text box is created but we have to save the value typed into the text box . But how could we do it ?

Ans: Its simple we need to associate this box to the post saving function. 🙂 so for that we will use

add_action('save_post',save_demo_text);

Now while saving the post it will call save_demo_text. So the code will change to following

function initialize_plugin()
{
     add_meta_box('meta-box-demo','demo',demo_func,'post','side','high');
     add_action('save_post',save_demo_text);
}

But you might be thinking how will we associate that value with the post ?
Yes you are right the above function would only get called at the time of post saving but not save the value . So wordpress has
provided the functionality to save the meta-box’s value :

update_post_meta(post_id,_unique_name,$POST['html_obj_name']);

the above function would add and updated the value incoming from the text box we created.

function save_demo_text ()
{
     update_post_meta($post_id,'_unique_name',$_POST['txt_box']);
}

Now the value is saved but we need to repopulate into the text box which we saved. So we need to call

$get_value = get_post_meta($post->ID,'_unique_name',true);

Here we could get our value which we had stored with the unique name. So the function demo_func would change to

function demo_func()
{
      global $post;
      $saved_value = (string)get_post_meta($post->ID,'_unique_name',true);
     echo '<input type="text" name="txt_box"; value="'.$saved_value.'">
}

If you get the value into the text box after saving then, that value could be accessed from any where just need to pass post id and the unique name of the meta.

So , Simple is it ?? its fun playing with wordpress . Keep watching there would more interesting stuff on wordpress.

Thank You.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: