Understanding WordPress/WordPress custom meta boxes

In the previous post, we talked about WordPress custom fields, which allows you to add and export a new entry in a post using the Custom Fields box that WordPress provides in the post edit screen. However, if you are not comfortable using a custom field box (we all have our own preferences), here is an alternative: you can create a meta box.

A meta box is a custom box that we create ourselves, can contain input or other interactive user interface for adding new items of the post or page. You can use a meta box instead of a Custom Field box to accomplish the same thing. Let’s see how to create one.

More information on Hongkiat.com:

• Customize Media Upload Folder in WordPress
• Customize WordPress editor styles
• Customize “How Much” In WordPress Admin Bar
• Register custom taxonomies for WordPress users
• Icons Show In WordPress Menu

Create a Meta box

WordPress provides an API function, called add_meta_box, which allows us to create an instant meta box. This is it in its most basic form.

 hàm add_post_Vference () add_meta_box ('tham chiếu bài', 'Tham chiếu', 'tham chiếuCallBack', 'bài');  add_action ('add_meta_boxes', 'add_post_Vference'); chức năng tham khảoCallBack () echo 'Hello World' 

The add_meta_box takes four parameters: the ID, the meta box title, the callback function that will call out ‘Hello World’, and the post type we want to display. In this case we specify a new meta box in the post edit page (this also works with pages).

In the post edit section, you will find a new box, as follows.

The new meta box, as you can see above, will appear below the WYSIWYG editor. If you want to add it to the sidebar you can add ‘side’ after the post parameter and along with ‘tall’ if you want to put it at the top of the sidebar.

 chức năng add_post_Vference () add_meta_box ('tham chiếu bài', 'Tham khảo', 'tham chiếuCallBack', 'bài', 'bên', 'cao');  add_action ('add_meta_boxes', 'add_post_Vference'); 

Now you will find it above Announced box…

Now to replace the text ‘Hello World’ in it. Let’s add elements as input fields for the new entry.

In this example we will add two input fields including one to add the Reference Name and another for the Reference Link:

 chức năng tham khảoCallBack ($ post) wp_nonce_field ('Reference_meta_box', 'Reference_nonce'); $ name_value = get_post_meta ($ post-> ID, '_post_Vference_name', true); $ link_value = get_post_meta ($ post-> ID, '_post_Vference_link', true); tiếng vang ''. 'Tên tham chiếu'. ''; tiếng vang ''; tiếng vang '
'. 'Thêm tên của tài liệu tham khảo'. '
'; tiếng vang ''. 'Liên kết tham khảo' .''; tiếng vang ''; tiếng vang '
'. 'Thêm liên kết của tài liệu tham khảo'. '
';  

Refresh the post edit page and you should see these two inputs added.

The $ name_value and $ link_value variable will take the entries from the database and put them in the input fields. To get the entries into the database we will need to create a function for that.

We need to add a few more lines of code that will safely populate the entries added through these inputs into the database. “Safe” here means a legitimate and authorized entry (not an entry from a hacker or other unauthorized employee). To save the item we will have to create a new function. Let’s name the function: save_post_Vferenceso.

 chức năng save_post_Vference ($ post_id)  ​​add_action ('save_post', 'save_post_Vference'); 

As we mentioned, we need to verify a few things for security purposes:

(first) We will need to check that the user have the ability to edit posts.

 if (! current_user_can ('edit_post', $ post_id)) return;  

(2) We also need to check if Nonce is set.

 if (! [et ($ _POST ['Reference_nonce'])) return;  if (! wp_verify_nonce ($ _POST ['Reference_nonce'], 'Reference_meta_box')) return;  

(3) Then we need to prevent the data from being saved automatically. Saving can only be done when the “Save” or “Update” button has been pressed.

 if (được xác định ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;  

(4) We will also have to make sure that our two inputs, post_Vference_name and post_Vference_linkis set up and ready before we ship the items.

 if (! [et ($ _POST ['post_Vference_name']) ||! [et ($ _POST ['post_Vference_link'])) return;  

(5) And the entry should not contain any unexpected characters that could compromise website security. To test this, you can use the built-in WordPress functionality sanitize bản_field.

 $ Reference_name = sanitize bản_field ($ _POST ['post_Vference_name']); $ Reference_link = sanitize bản_field ($ _POST ['post_Vference_link']); 

Okay, now we’re ready to save the entries to the database:

 update_post_meta ($ post_id, '_post_Vference_name', $ Reference_name); update_post_meta ($ post_id, '_post_Vference_link', $ Reference_link); 

Now you can try it out: type some stuff in the input fields and click the “Update” button to save them.

Conclusion

We’ve just created a meta box that includes two inputs. You can further expand the box with other input types like radio buttons or select boxes. This example can be very basic but once you get the hang of it you will be able to use this meta box for much more complex uses. Let us know if you will use this and what you will use it for.