Adding meta boxes to your WordPress website has been an uphill task for most of the developers, but this is not as difficult as it seems to be. Meta-boxes are excellent tools for providing extra features to your WordPress website and these are certainly something which you cannot afford to skip.
What are Meta Boxes ?
You might be wondering what are these metaboxes and how do they add extra functionalities to your website. Now, when a user opts for editing a WordPress Post a new edit screen pops in which comprises of different default boxes: Editor, Categories, Tags, Publish, Set a Featured image and several other. These default boxes are called as meta boxes. Further, you can leverage Plugins for adding meta boxes to edit screen of your post namely Post, Custom Post Type, Page Link and many more such elements. The content is usually HTML form elements where data needed by the Plugin is entered by the user, however to make an HTML choice is all on you.
Why Meta Boxes?
Now that we know what are meta boxes and what do they do, we shall now discuss their benefits. Meta boxes are flexible, easy to use and modular edit screen elements which can be harnessed in order to collect information related to the tools. Further, these Meta boxes can be hidden from the users whom you do not wish to display . Meta boxes can also be user-arranged on the edit screen.
An example that evokes the need for custom meta boxes
In order to actualize the importance of metaboxes, we can understand it better using an example. Let us assume that you need to enlist numerous electronic goods as per their individual model number. Though, WordPress offers functionalities to put your products in categories, but for in order to customize your website as per your needs, you need to meta boxes which offer best functionalities.
Step 1– The very first step is to open up the functions.php file of your WordPress theme and then you need to use the code mentioned below, but before that let us discuss the what all features we need to use.
add_meta_box: This function informs WordPress about addition of new meta boxes, add_action( ‘add_meta_boxes’, ‘wdm_add_meta_box’): This function guides WordPress to add new meta boxes, ‘wdm_meta_box_callback, ‘post’)’: This prints the HTML for the new edit screen, wdm_sectionid: This code represents the HTML ‘id’ for the editing screen
Following is the code:
function wdm_add_meta_box() {
add_meta_box(‘wdm_sectionid’, ‘Make This Post Sponsered’, ‘wdm_meta_box_callback’, ‘post’);
}
add_action( ‘add_meta_boxes’, ‘wdm_add_meta_box’ );
Step 2- Generate the HTML Output
The next step will be to generate an HTML output which would offer additional flexibility of using HTML tags as per preferences. To do this, you can use the following code :
function wdm_meta_box_callback( $post ) {
wp_nonce_field( ‘wdm_meta_box’, ‘wdm_meta_box_nonce’ );
$value = get_post_meta( $post->ID, ‘sponsered’, true ); //my_key is a meta_key. Change it to whatever you want
?>
>Yes
>No
This was all about adding and removing Meta boxes, but this is not it. In order to ensure a high profile development you further need to customize your meta boxes.
1) Now, for further enlisting one can add radio buttons, textboox:
Dropdown list–
Drop down list also plays a crucial role in enhancing your meta boxes. You can take help of the following code snippet in order to make a drop down list for choosing model numbers:
Radio-buttons-
Radio buttons have solved the problem of making a choice between mutually exclusive options. In order to make a single choice you need to select one radio button and the rest others will be discarded automatically. Following is the code which you can use in order to incorporate radio button in you meta box:
>Yes
>No
To generate textbox of the product type you can follow the following code:
For adding a color field you can use the following code:
2) The next step is to save these values
In order to save your values you can take help of the following code snippet.
/**
* Saves the custom meta input
*/
function prfx_meta_save( $post_id ) {
// Checks save status
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ ‘prfx_nonce’ ] ) && wp_verify_nonce( $_POST[ ‘prfx_nonce’ ], basename( __FILE__ ) ) ) ? ‘true’ : ‘false’;
// Exits script depending on save status
if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
return;
}
// Checks for input and sanitizes/saves if needed
if( isset( $_POST[ ‘meta-text’ ] ) ) {
update_post_meta( $post_id, ‘meta-text’, sanitize_text_field( $_POST[ ‘meta-text’ ] ) );
}
}
add_action( ‘save_post’, ‘prfx_meta_save’ );
The first part of the function checks whether you want to save the input which you have entered, wherein the second part checks that the data must be entered into the text field we entered.
Function: update_post_meta()
$post_id – It is an integer value which is an unique id to depict that the post has been saved
$meta_key – It is a unique string type meta key to locate the area for saving the input.
$meta_value – Value of the input which to be saved in the data base
$prev_value – Used to differentiate among value if more than one meta boxes have same key
3) Retire values
Use the following code snippet to check retrieve values from HTML tags:
$new_meta_value = ( isset( $_POST[‘sponsered’] ) ? sanitize_html_class( $_POST[‘sponsered’] ) : ” );
$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’] ) : ” );
4) Adding post meta data
After adding all the process of saving and retrieving values from HTML tag, the next step is to post meta data into the database of your WordPress website. You can take help of the following code snippet:
{
update_post_meta( $post_id, ‘sponsered’, $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 );
}
I hope this might help you and for any further queries feel free to drop us your comments.
Author Biography:
Samuel Dawson is a magnificent professional in Designs2HTML Ltd involved in the process of PSD to HTML service with long lasting results. He is a technical writer and do blogging also.