How To Add Metabox In WordPress

Metaboxes are one of the finest features that WordPress provides. You can get the data from the post / page creator by the Metabox as like you get in the WordPress editor.

Here, with the metaboxes the page creator can easily add the required data and it could be displayed anywhere on the page using the template of the page. Here in this tutorial, we will discuss on adding a metabox to a page. Before that let’s understand what exactly metaboxes are?

A metabox is a draggable input box where the page creator can easily put in the data. These data could be displayed on the page anywhere using the template. In metabox two types of data that could be included:

Metadata (Custom Fields)
Taxonomy terms

Let’s see how the metabox can be added in the WordPress page’s editor. Here we will create a box where the editor can add some text to be displayed on the page.

Create a new file named as page-metabox.php and add the below code there.

```
<?php
```
```
//Lead Text Metabox
```
```
function page_lead_text_metabox(){
```
```
	add_meta_box(
```
```
			'page_lead_text', //Unique ID
```

			esc_html__( 'Page Lead Text', 'I11L' ), //Title

			'page_lead_text_caption_metaboxes', //Callback function

```
			'page', //for pages
```
```
			'normal', //Context
```
```
			'default' //priority
```
```
			);
```
```
}
```
```
 
```

function page_lead_text_caption_metaboxes( $object, $box ) {

```
 
```

	wp_nonce_field( basename( __FILE__ ), 'page_lead_text_caption_metaboxes' );

```
 
```

	$lead_text 	= esc_attr( get_post_meta( $object->ID, 'page_lead_text', true ) );

```
 
```
```
	?>
```
```
	<p>Page Lead Text</p>
```

		<input type="text" class="regular-text" name="page_lead_text" value="<?php echo $lead_text; ?>" placeholder="Page Lead Text">

```
	<?php 
```
```
}
```

Here the function page_lead_text_metabox() will call the function page_lead_text_caption_metaboxes() function and the HTML here in this functionn will put up a metabox in the page editing page.

Now, we need to save the metabox once you update or save the page. The below mentioned code snippet will save the metabox data.

/* Save the meta box's post metadata. */

function save_page_lead_text_meta( $post_id, $post ) {

```
 
```

	/* Verify the nonce before proceeding. */

	if ( !isset( $_POST['page_lead_text_caption_metaboxes'] ) || !wp_verify_nonce( $_POST['page_lead_text_caption_metaboxes'], basename( __FILE__ ) ) )

```
		return $post_id;
```
```
 
```
```
	/* Get the post type object. */
```

	$post_type = get_post_type_object( $post->post_type );

```
 
```

	/* Check if the current user has permission to edit the post. */

	if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )

```
		return $post_id;
```
```
 
```

		$field_names = array('page_lead_text',);

```
 
```
```
		foreach($field_names as $field_name)
```
```
		{
```

			/* Get the posted data and sanitize it for use as an HTML class. */

			$new_meta_value = ( isset( $_POST["$field_name"] ) ? $_POST["$field_name"] : '' );

```
 
```
```
			/* Get the meta key. */
```
```
			$meta_key = $field_name;
```
```
 
```

			/* Get the meta value of the custom field key. */

			$meta_value = get_post_meta( $post_id, $meta_key, true );

```
 
```

			/* If a new meta value was added and there was no previous value, add it. */

			if ( $new_meta_value && '' == $meta_value )

			add_post_meta( $post_id, $meta_key, $new_meta_value, true );

```
 
```

			/* If the new meta value does not match the old value, update it. */

			elseif ( $new_meta_value && $new_meta_value != $meta_value )

			update_post_meta( $post_id, $meta_key, $new_meta_value );

```
 
```

			/* If there is no new meta value but an old value exists, delete it. */

			elseif ( '' == $new_meta_value && $meta_value )

			delete_post_meta( $post_id, $meta_key, $meta_value );

```
		}	
```
```
 
```
```
}
```

This above code snippet will save the metabox’s data into the database. It will update the data in case the data already existed and if not, it will save the data.

Now, we need to trigger the page_lead_text_metabox() function whenever the page editor is opened. You need to add the hooks of add_meta_boxes and save_post as mentioned below.

Add the below given code snippet into your theme’s functions.php.

include(dirname(__FILE__) .'/page-meatbox.php');

```
 
```

add_action( 'add_meta_boxes', 'page_lead_text_metabox' );

```
 
```

add_action( 'save_post', 'save_page_lead_text_meta', 10, 2 );

This completes the tutorial to add metabox in WordPress pages and posts.

0 Shares

One thought on “How To Add Metabox In WordPress”

Company

Services

Schedule a Consultation

How To Add Metabox In WordPress

Related Post

One thought on “How To Add Metabox In WordPress”

Company

Thank you for subscribing to our newsletter.

Schedule a Consultation