{"id":139646,"date":"2015-06-09T11:00:59","date_gmt":"2015-06-09T16:00:59","guid":{"rendered":"https:\/\/getflywheel.com\/?p=10230"},"modified":"2024-10-02T12:59:28","modified_gmt":"2024-10-02T17:59:28","slug":"create-custom-wordpress-meta-box","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-custom-wordpress-meta-box\/","title":{"rendered":"How to Create a Custom WordPress Meta Box"},"content":{"rendered":"\n

Custom meta boxes allow additional information to be added to posts, pages, and custom post types, apart from the standard meta boxes that are automatically available to use right \u201cout of the box\u201d in WordPress, which are included in the WordPress core.<\/p>\n\n\n\n

Whether you were aware of it or not, you\u2019ve been using meta boxes for awhile now. Things like dashboard widgets, editor, custom fields, featured image, categories, and tags are examples of meta boxes.<\/p>\n\n\n\n

How to Create a Custom WordPress Meta Box<\/h3>\n\n\n\n

What happens when you need to create an additional meta box, maybe something a little more custom for your project? There are existing plugins out there that help create custom meta boxes, which can be great options. Even if you decide this is the route you are going to take, it is still important to understand the basic concepts of what is going on under the hood of custom meta boxes.<\/p>\n\n\n\n

We will be going over concepts at a very high level when we create this very simple meta box. When we\u2019re done, we will have a custom meta box that will allow us to enter a product title.<\/p>\n\n\n\n

Even though we are starting off simple, keep in mind that this idea can be expanded for more complex needs. There are a lot of options and additional features that can be included in a custom meta box. Things like check boxes, file upload, etc. are all possible features of a custom meta box. This tutorial assumes that you are familiar with CSS, which is needed to style the fields. We will not be going into great detail to discuss styling, but this is something that can easily be done after your meta box is up and running.<\/p>\n\n\n\n

Developing the Custom Meta Box<\/h3>\n\n\n\n

Custom code for meta boxes can be included in functions.php or in a plugin. This example will include the needed code in the form of a plugin. This can be copied step by step to make a complete file that is ready to use.<\/p>\n\n\n\n

The Codex is Your Guide<\/h3>\n\n\n\n

The Codex<\/a> will be your best friend, if it isn\u2019t already. Different arguments have different options, and the Codex will explain this in great detail. It\u2019s worth mentioning that the Codex is something you should get to know well.<\/p>\n\n\n\n

Test Locally First<\/h3>\n\n\n\n

Here is the one and only disclaimer for this tutorial. Please try this in a local development environment first. <\/b>Although we all appreciate a little adventure in our lives, no one likes the white screen of death, especially on a live site. We are going to go step by step through this tutorial, and there are dependencies that occur as we move through it. Because of this, there is a good chance that doing a save midway through may cause an error.<\/p>\n\n\n\n

Step One: Create and Put Heading into Plugin<\/h3>\n\n\n\n

Creating a plugin might sound complex, but not all plugins have to be hundreds of lines. Plugins can be very simple, and this is a great example of that. If you go to the wp-content folder<\/em>, you will see a plugins folder<\/em>. Make a new folder called custom-post-meta-box<\/em> with a custom-post-meta-box.php<\/code> file in it. This is the file you will be working from.<\/p>\n\n\n\n

\"file-path-meta-box\"<\/pre>\n\n\n\n
When creating a plugin, make sure this information appears before any of your custom code:<\/p>\n\n\n\n
&lt;?php\n\n\/*\n\nPlugin Name: Custom Meta Box\n\nPlugin URI:  www.yourwebsite.com\n\nDescription: Creates a meta box in WordPress\n\nVersion:     1.0.0\n\nAuthor:      Your Name\n\nAuthor URI:  www.yourwebsite.com\n\nLicense: GPL2\n\n*\/<\/code><\/pre>\n\n\n\n
Activate the Plugin<\/h3>\n\n\n\n
Even though we did not put any code in there yet, we can activate the plugin by going to Plugins and looking for Custom Meta Box and choosing Activate. Please keep in mind that nothing will change quite yet.<\/p>\n\n\n\n
\"00-activate-plugin\"<\/figure>\n\n\n\n
Optional CSS<\/b><\/h3>\n\n\n\n
This is optional, but if you plan on adding some custom css, copy this into your plugin file. Be sure that the .css<\/code> file is found in the css<\/em> folder of your plugin.<\/p>\n\n\n\n
function cmb_add_admin_styles() {\n\nwp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box\/css\/admin.css' ) );\n\n}\n\nadd_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );<\/code><\/pre>\n\n\n\n
\"01-css-file-location\"<\/figure>\n\n\n\n
Step Two: Adding the Meta Box<\/b><\/h2>\n\n\n\n
The add_meta_box<\/code> function is used to create custom meta boxes. This function is only responsible for registering and displaying custom meta boxes.<\/p>\n\n\n\n
function cmb_add_meta_box() {\n\nadd_meta_box(\n\n'custom_post_metabox',\n\n'Our Products',\n\n'cmb_display_meta_box',\n\n'post',\n\n'normal',\n\n'high'\n\n);\n\n}\n\nadd_action( 'add_meta_boxes', 'cmb_add_meta_box' );<\/code><\/pre>\n\n\n\n
Take a look at the dashboard, the title \u201cOur Products\u201d is showing up, but there isn\u2019t a text field for us to enter our text.<\/p>\n\n\n\n
\"01-meta-box-start\"<\/figure>\n\n\n\n
Step Three: Adding the Meta Box Field in the Admin<\/h3>\n\n\n\n
We need to make sure that there is a label and field for the information. By using html, this is possible.<\/p>\n\n\n\n
function cmb_display_meta_box( $post ) {\n\nwp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );\n\n$html = '&lt;label id=\"product-title\" for=\"product-title\"&gt;';\n\n$html .= 'Product Title';\n\n$html .= '&lt;\/label&gt;';\n\n$html .= '&lt;input type=\"text\" id=\"product-title\" name=\"product-title\" value=\"' . get_post_meta( $post-&gt;ID, 'product-title', true ) . '\" placeholder=\"What is the Product Title?\" \/&gt;';\n\necho $html;\n\n}\n\n\/\/ this echoes a single stream of html<\/code><\/pre>\n\n\n\n
\"02-meta-box\"<\/figure>\n\n\n\n
See how things are wrapped in the <label><\/code>? We get to see the descriptive text \u201cProduct Title\u201d which helps the user understand what the field is and what type of information should be entered. Also note that there is placeholder text, which also adds helpful information.<\/p>\n\n\n\n
Your input may not be as wide. Some custom css was done so all the placeholder text could be shown; the label has a width of 100%.<\/p>\n\n\n\n
Step Four: Saving the Data and the Importance of Using a Nonce<\/h3>\n\n\n\n
You may have entered text in Step Three and realized that it isn\u2019t actually being saved or being displayed on the page. This step is really where all the magic happens.<\/p>\n\n\n\n
function cmb_save_meta_box_data( $post_id ) {\n\nif ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {\n\nif ( isset( $_POST['product-title'] ) &amp;&amp; 0 &lt; count( strlen( trim( $_POST['product-title'] ) ) ) ) {\n\n$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );\n\nupdate_post_meta( $post_id, 'product-title', $product_title );\n\n}\n\n}\n\n}\n\nadd_action( 'save_post', 'cmb_save_meta_box_data' );\n\nfunction cmb_display_product( $content ) {\n\nif ( is_single () ){\n\n$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );\n\n$content .= $html;\n\n}\n\nreturn $content;\n\n}\n\nadd_action('the_content', 'cmb_display_product');\n\nfunction cmb_user_can_save( $post_id, $nonce ) {\n\n$is_autosave = wp_is_post_autosave( $post_id );\n\n$is_revision = wp_is_post_revision( $post_id );\n\n$is_valid_nonce = ( isset( $_POST[ $nonce ] ) &amp;&amp; wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );\n\nreturn ! ( $is_autosave || $is_revision ) &amp;&amp; $is_valid_nonce;\n\n}<\/code><\/pre>\n\n\n\n
There\u2019s a few things going on here. Basically, the cmb_save_meta_box_data<\/code> function is what we need for all the saving to take place. We will be focusing on security with a nonce value. This is a security measure that makes sure data to be saved is coming from the correct source. Also, we want to make sure that the post is not an autosave or a revision. Then the nonce will be validated and the user can save.<\/p>\n\n\n\n
Now that we can safely save, this is how the meta information appears on the page. As you can see, it could easily be styled, but it does work and data is saved.<\/p>\n\n\n\n
\"03-saved-meta-info\"<\/figure>\n\n\n\n
Further Reading and Homework<\/h3>\n\n\n\n
As you can see, in just a few steps, you can have a custom meta box. Like most development projects, there are multiple ways to achieve the same thing, so you may find other approaches to this same task.<\/p>\n\n\n\n
We took a look at custom meta boxes at a very high level so you may want to take a deeper look at these concepts. If you find yourself having a greater need for custom meta boxes, here are some great sources for further discovery:<\/p>\n\n\n\n