Meta boxes are an important part of WordPress, as they allow you to add additional content and functionality to your site. However, if you’re new to WordPress development, adding meta boxes might seem intimidating. In this article, we’ll walk you through the process of adding meta boxes to the edit area of your WordPress site. We’ll cover everything from creating the meta box to adding custom fields and saving the data. By the end of this article, you’ll be able to add whatever custom meta boxes you need to your WordPress site with ease. Let’s get started!
function wpturbo_add_custom_meta_box() {
$post_types = array( 'post', 'page' ); // Add other post types where you want to add meta box
foreach ( $post_types as $post_type ) {
add_meta_box(
'wpturbo_meta_box', // Unique ID
__( 'Custom Meta Box Title', 'wpturbo' ), // Title
'wpturbo_meta_box_callback', // Callback function
$post_type // Post type
);
}
}
add_action( 'add_meta_boxes', 'wpturbo_add_custom_meta_box' );
function wpturbo_meta_box_callback( $post ) {
// Add HTML for your meta box here
?>
<p>
<label for="wpturbo_meta_field"><?php _e( 'Add your meta field content:', 'wpturbo' ); ?></label>
<br>
<input type="text" name="wpturbo_meta_field" id="wpturbo_meta_field" value="<?php echo esc_attr( get_post_meta( $post->ID, 'wpturbo_meta_field', true ) ); ?>">
</p>
<?php
}
function wpturbo_save_custom_meta_box( $post_id ) {
// Save meta data here from form input
if ( isset( $_POST['wpturbo_meta_field'] ) ) {
update_post_meta( $post_id, 'wpturbo_meta_field', sanitize_text_field( $_POST['wpturbo_meta_field'] ) );
}
}
add_action( 'save_post', 'wpturbo_save_custom_meta_box' );
In this article, we’ll explore how to add custom meta boxes to the edit area in WordPress.
The first part of the code snippet defines the wpturbo_add_custom_meta_box() function that adds a custom meta box to specific post types. We define an array of post types where we want to add the meta box, and for each post type, we call the add_meta_box() function.
The add_meta_box() function takes four parameters:
- A unique ID for the meta box
- A title for the meta box
- A callback function that renders the contents of the meta box
- The post type where you want to add the meta box
Then, we define the wpturbo_meta_box_callback() function that outputs the HTML for the meta box in the edit area. In this example, we add a text input field to the meta box, but you can include whatever fields you need. We also use the _e() function to make the meta box title translatable.
Lastly, we define the wpturbo_save_custom_meta_box() function that handles the saving of the meta box data. This function is called whenever a post is saved or updated. Inside the function, we check if the wpturbo_meta_field is set in the $_POST variable, and if it is, we update the post meta with the sanitized value.
By hooking the wpturbo_add_custom_meta_box() and wpturbo_save_custom_meta_box() functions into the add_meta_boxes and save_post actions, respectively, the custom meta box is added to the edit area, and the meta data is saved when the post is updated.