Custom meta boxes allow for additional details to be embedded into pages, posts, and customized post types, in addition to the normal meta boxes available “out of the box” within WordPress that are built as part of WordPress’s core. WordPress core.
Although you may not have been conscious that it was happening or you weren’t, you’ve been using meta boxes for some time. Examples include dashboard widgets, custom fields, editors, categories, featured images, tags, and categories, all examples of meta boxes.
How to Create a Custom WordPress Meta Box
What happens if you have to design an extra meta box, perhaps something more unique to your project? There are plugins available on the market that can help you build custom meta boxes, which are great options. However, if you decide that this is the path you’re going to take, it’s important to grasp the basics of what’s going on beneath the hood of customized meta boxes.
We’ll review the concepts at an advanced level while we build this simple meta box. Once we’re finished, we’ll be able to create a custom meta box that allows users to input the product’s title.
Although we’re starting with something simple, bear the idea in your mind. This concept could be expanded to meet more complicated requirements. There are plenty of alternatives and features that could be included in a meta box that is custom. Checkboxes, file uploads, as well as file uploads. These are just a few of the possibilities for the meta box you design. This guide assumes that you have a basic understanding of the CSS used to design the fields. We won’t go into detail about the styling process, but it is a task that can be done once your meta box is set up and running.
Developing the Custom Meta Box
Custom meta box codes can be added to functions.php or within the form of a plugin. This example contains the code needed inside the plugin. This is copied step-by-step to create a complete file ready to use.
The Codex is Your Guide
The Codex will become your most trusted companion, should it not be already. Different arguments offer different choices as well. The Codex will go over this in detail. It is important to note that you should read the Codex is something you must learn about.
Test Locally First
Here is the sole disclaimer to this tutorial. Make sure to test this on an environment that is local to you. Although we all love some thrill in our life, nobody enjoys looking at a blank black screen that is a death symbol, particularly when it’s a live website. We’ll take a step-by-step approach to this guide with dependencies that happen when we go through it. Due to this, there’s a possibility that saving mid-way through could result in an error.
First Step: Design Headings and Add Headings to the plugin
The process of creating a plugin may appear complicated, but not all plugins need to have several hundred lines. Plugins aren’t always complicated, and this is an excellent example of this. If you open the WordPress-content folder, you’ll see the plugins directory. Make a new folder called custom-post-meta-box with a custom-post-meta-box.php file in it. This is the file that you will be working on.
When you create a plugin, ensure that this information is displayed before any custom code:
Activate the Plugin
While we haven’t added any code, we can still activate the plugin by going to Plugins, searching Custom Meta Box, and choosing Activate. Be aware that nothing is changing as of now.
Optional CSS
This is not mandatory; however, If you are planning to add any custom CSS, you should incorporate it into the plugin file. Ensure your .css file is located within the Css directory of the plugin.
function cmb_add_admin_styles() add_action( ‘admin_enqueue_scripts’, ‘cmb_add_admin_styles’ );
Step Two: Adding the Meta Box
Its add_meta_box function can be employed to build customized meta boxes. This function is responsible for registering and showing the meta box you created.
function cmb_add_meta_box() add_action( ‘add_meta_boxes’, ‘cmb_add_meta_box’ );
Check out the dashboard. The headline “Our Products” is showing up. However, there’s not area for us to type in our text to input our text.
Step Three: Adding the Meta Box Field in the Admin
It is important to ensure the label and a space for the data. With the help of HTML, it can be done.
function cmb_display_meta_box( $post ) { wp_nonce_field( plugin_basename(__FILE__), ‘cmb_nonce_field’ ); $html = ”; $html .= ‘Product Title’; $html .= ”; $html .= ‘ />’; echo $html|| /} // echoing one stream of html
Check out the way things are wrapped up in the? We can see the description wording “Product Title,” which helps the user to understand what the field means and what kind of data must be included. Additionally, note that there’s placeholder text that includes useful information.
The input you typed may not be as broad as. Custom CSS was used so that the entire text used as placeholders could be displayed while the label had an area of 100 percent.
Step Four: Saving the Data and the Importance of Using a Nonce
You may have entered your text during Step Three and then realized that the text isn’t saved or shown on the screen. This is the place where the magic happens.
function cmb_save_meta_box_data( $post_id ) add_action( ‘save_post’, ‘cmb_save_meta_box_data’ ); function cmb_display_product( $content ) { if ( is_single () ){ $html = ‘The Product Title is: ‘ . get_post_meta( get_the_ID(), ‘product-title’, true ); $content .= $html; } return $content; } add_action(‘the_content’, ‘cmb_display_product’); function cmb_user_can_save( $post_id, $nonce ) { $is_autosave = wp_is_post_autosave( $post_id ); $is_revision = wp_is_post_revision( $post_id ); $is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) ); return ! ( $is_autosave || $is_revision ) && $is_valid_nonce; }
There are a few issues that are happening. The cmb_save_meta_box_data function is what we need for all the savings to take place. The focus will be on security by using the value of a nonce. This security feature ensures that the information saved is taken from the correct source. We also want to ensure the posting is not an autosave or revision. Then the nonce is verified, and the user can save the post.
Once we can safely save, here’s how the metadata appears on the webpage. As you can see, it is possible to be styled. However, it’s working, and the information is saved.
Leave a Reply