Over the period of time, custom metaboxes have emerged as momentously significant aspects of any WordPress setup. The website admins who want to enrich the feature-set of their WordPress website can make use of metaboxes, with the help of which powerful customizations can be made.
But, Why Really are Custom Meta Boxes?
Putting it in the manner most straightforward, a custom meta box provides you with a way to integrate a custom functionality that can anchor your posts to be more specific, which is to say, it adds a custom feature to your posts that help it stand out in a particular aspect. That custom feature may be the box for author’s name, or a different background color to indicate the article genre, or a custom post id that can be identified by distinctive names and so on.
Scenarios That Elicit The Need For Custom Meta Boxes
Scenario 1: Consider a situation wherein you are building a website that serves as a listing of cars based on their model numbers. Now, you are assigned the job of creating individual posts on every car. So, how do you differentiate each post? You add the car’s image, give it a unique title, include some exclusive information in the description and also add the relevant tags. But, how do you create a segregation based on the model number of cars? WordPress does not have any such feature, and this is when custom metaboxes prove to be of great use.
Scenario 2: Let’s say you run a travel blog and your current post is about your latest exploration. Apparently, your stay at the hotel was great and you want to make sure that your blog’s visitors (whom you manage to inspire to pack their bags and set out for this place) check this hotel out and have an equally good experience staying here. So, apart from writing extensively about the place you visited, you want to upload a basic form via which your users can contact the respective hotel. You can include a text box within your metabox to enter the email address of the respective hotel or authority, now as soon as your visitors submit the form, it sends an email to the hotel authorities about the user’s query and his/her email address. This is again where using the custom metabox feature would come really handy.
A custom meta box, once implemented, can be viewed right there on the post editor screen. And thus, it comes a straightforward task for you to add any custom data to your post using this metabox.
How To Generate the Meta Box
To generate a metabox in your WordPress setup, you need to make the necessary alterations to the functions.php file of your theme
- The beginnings
Add the below code in the theme’s functions.php file:
function wdm_add_meta_box() {
add_meta_box(‘wdm_sectionid’, ‘Make This Post Featured’, ‘wdm_meta_box_callback’, ‘post’);
}
add_action( ‘add_meta_boxes’, ‘wdm_add_meta_box’ );
add_meta_box is a function that uses certain parameters to instruct WordPress to include the metabox.
wdm_sectionid is the HTML ‘id’ attribute of the edit screen
wdm_meta_box_callback prints out the HTML for the edit screen.
Post/Page is used, depending on whether you are using the meta box on page screen or on the post screen.
add_action( ‘add_meta_boxes’, ‘wdm_add_meta_box’): This is a WordPress action hook that tells WordPress to add the metabox
Generating the HTML Output
Next stop is generating the HTML output that will also allow us to use any HTML tags of our choice:
function wdm_meta_box_callback( $post ) {
wp_nonce_field( ‘wdm_meta_box’, ‘wdm_meta_box_nonce’ );
$value = get_post_meta( $post->ID, ‘featured’, true ); //my_key is a meta_key. Change it to whatever you want
?>
>Yes
>No
Generating Action Elements in the Custom Metaboxes
But any custom metabox would be incomplete with its set of action elements. The more action elements you have in your custom metabox, the more control you have over how information is displayed and managed. The action elements can be in the form of radio buttons, the check box, the text box, drop downs, multi select box and so on.
Let’s take a look at the different code snippets that can be used to inject the action elements into the custom metabox.
We will begin by creating a few textboxes for model numbers, car colors and car prices:
//Here is the code used to generate the textbox for car model number:
<p>
<label>Model Number: </label>
<input type=”text” name=”car_model_number”/>
</p>
//Code to generate the textbox for car prices
<p>
<label>Price: </label>
<input type=”text” name=”car_price”/>
</p>
// Code to generate the textbox for car color
<p>
<label>Color: </label>
<input type=”text” name=”car_color”/>
</p>
With textbox perfectly created, we can add another action element to out metabox in the form of the select list, which is something you find on almost every website today. We will now create the select list based on the model year. The following piece of code will do the same for us:
//Code to generate the select list
<p>
<label>Select Year: </label>
<select name =”model_year”>
<option value=”2001″>2001</option>
<option value=”2002″>2002</option>
<option value=”2003″>2003</option>
<option value=”2004″>2004</option>
<option value=”2005″>2005</option>
<option value=”2006″>2006</option>
<option value=”2007″>2007</option>
<option value=”2008″>2008</option>
<option value=”2009″>2009</option>
<option value=”2010″>2010</option>
<option value=”2011″>2011</option>
</select>
</p>
Adding the Radio Buttons
Now, radio buttons prove to be highly optimized ways for the users to make a choice between different mutually exclusive options. So, when you select one button, all the others are automatically deselected.
//Code to generate radio buttons in our example
[cc lang="php"]
>Yes
>No
We then need to save the metabox we have created along with all its action elements. Again, there is a simple enough code for us to write in order to save it:
[cc lang="php"]function wdm_save_meta_box_data( $post_id ) {
if ( !isset( $_POST[‘wdm_meta_box_nonce’] ) ) {
return;
}
if ( !wp_verify_nonce( $_POST[‘wdm_meta_box_nonce’], ‘wdm_meta_box’ ) ) {
return;
}
if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) {
return;
}
if ( !current_user_can( ‘edit_post’, $post_id ) ) {
return;
}
In all the code snippets above, we have added several HTML tags. For our action elements to perform their required function, we need to fetch the value from these HTML tags
//Code take value from the html tags.
$new_meta_value = ( isset( $_POST[‘featured’] ) ? sanitize_html_class( $_POST[‘featured’] ) : ” );
$model_number = ( isset( $_POST[‘model_year’] ) ? sanitize_html_class( $_POST[‘model_year’] ) : ” );
$price = ( isset( $_POST[‘car_price’] ) ? sanitize_html_class( $_POST[‘car_price’] ) : ” );
$car_color = ( isset( $_POST[‘car_color’] ) ? sanitize_html_class( $_POST[‘car_color’] ) : ” );
Now that we have created all the action elements and fetched the value from the HTML tags, the next stop is to add the post meta data to the WordPress database.
//Code to insert the post meta data in wordpress database
update_post_meta( $post_id, ‘featured’, $new_meta_value );
update_post_meta( $post_id, ‘model_year’, $model_number );
update_post_meta( $post_id, ‘car_price’, $price );
update_post_meta( $post_id, ‘car_color’, $car_color );
}
In the event you wish to add more style to it, here is a simple enough code for the same: If you want your metabox to look more stylish, you can add any code of your choice. In our example, we are adding this code:
function wdm_admin_styles(){
global $typenow;
if( $typenow == ‘post’ ) {
wp_enqueue_style( ‘prfx_meta_box_styles’, get_template_directory_uri(). ‘/css/meta-box-styles.css’ );
}
}
add_action( ‘admin_print_styles’, ‘wdm_admin_styles’ );
This code adds the meta-box-styles.css to your template directory where you can add your own style to make good look and feel.
And thus we have successfully accomplished the process of adding action elements to our custom metabox, as you can see in the picture.
The above procedure is a highly efficient way to to make your website’s custom metabox more actionable. With these action elements, there is a greater control and sense of structure to your dashboard and that’s what makes them all the more important. While the tutorial is comprehensive and touches several points, if you have your insights to add, do let us know.
Author Bio – Sarah Parker is a WordPress developer by profession, working for Designs2HTML Ltd.. Give your website an appealing look with Photoshop to wordpress theme conversion, and maximize the profits by adding new features in the website.
You must be logged in to post a comment.