Add Meta Box to Media Upload Section Wordpress

Read Time: 8 mins Languages:

Over the course of the next ii posts, nosotros'll take a look at how we tin can leverage the WordPress API to define our own custom meta boxes for attaching a document (such as a PDF) to our WordPress pages. We'll also accept a look at how to properly remove files should we choose to delete them from our posts.

A few months ago, Christopher Davis demonstrated how to create Custom WordPress Write/Meta Boxes (https://wp.tutsplus.com/tutorials/plugins/how-to-create-custom-wordpress-writemeta-boxes/). As mentioned in his article, custom meta boxes are incredibly powerful features that permit usa to add various pieces of additional information to our WordPress posts and pages.

Of class, nosotros're non limited to text or options such as radio buttons or checkboxes. Nosotros can also attach images and files to posts, pages, and other post types by taking reward of custom meta boxes; however, dealing with file types requires a chip more than lawmaking to properly handle uploads and deletions of the file.

Before getting started, it'south important to note that this series assumes that we're working with the Twentyeleven Theme. Although the code volition piece of work with any WordPress Theme, this ensures that we're all working with the same codebase and should make it easier to follow along with the tutorial.

---

Defining The Custom Meta Box

Get-go, let'due south create the post meta box. Specifically, the meta box should…

• Be available on both posts and pages
• Appear beside the post editor
• Accept an input file

At this betoken, locate functions.php in the root of the Twentyeleven Theme directory. Nosotros'll exist making all of our changes to the lesser of the file. We'll start past defining a role called add_custom_meta_boxes and information technology will exist registered with the add_meta_boxes claw.

function add_custom_meta_boxes() {  } // finish add_custom_meta_boxes add_action('add_meta_boxes', 'add_custom_meta_boxes');

Next, let'south define our custom meta box. Showtime, we'll write the code after which I'll explain what the code is doing:

role add_custom_meta_boxes() {  	// Ascertain the custom attachment for posts 	add_meta_box( 		'wp_custom_attachment', 		'Custom Zipper', 		'wp_custom_attachment', 		'post', 		'side' 	); 	 	// Define the custom attachment for pages 	add_meta_box( 		'wp_custom_attachment', 		'Custom Zipper', 		'wp_custom_attachment', 		'page', 		'side' 	);  } // stop add_custom_meta_boxes add_action('add_meta_boxes', 'add_custom_meta_boxes');

Notice that the following two calls to add_meta_box are well-nigh identical.

• The first parameter is the ID of the meta box. This is used when saving the value.
• The second parameter is the label. This value appears in the caption in a higher place the post meta box
• The third value is the callback role that is used to really define the markup that appears in the meta box. We'll get to this momentarily.
• The fourth value tells WordPress the mail type on which this custom meta box should appear. Since we want it on both posts and pages, we've defined it twice.
• The last parameter defines where we desire the meta box to appear. It tin can exist either side, advanced, or normal. Nosotros've select side so that it appears abreast the mail editor

---

Setting Upwardly The Callback

At this indicate, the custom meta box doesn't do anything. In fact, it doesn't fifty-fifty display anything:

This is because we haven't divers the callback role that is used generate the markup for the meta box. In social club to practice that, nosotros need to define the office with the proper name that we listed it higher up. Specifically: 'wp_custom_attachment.'

The input should accept a PDF and so nosotros'll give a short clarification and the proper input element for accepting files:

role wp_custom_attachment() {  	wp_nonce_field(plugin_basename(__FILE__), 'wp_custom_attachment_nonce'); 	 	$html = '<p class="description">'; 		$html .= 'Upload your PDF here.'; 	$html .= '</p>'; 	$html .= '<input blazon="file" id="wp_custom_attachment" proper name="wp_custom_attachment" value="" size="25" />'; 	 	echo $html;  } // end wp_custom_attachment

The first line of the lawmaking defines a nonce value in society to properly validate and secure our upload.

Next, we're simply setting upwardly the markup for displaying the input field.

At this betoken, we've got a custom meta box that looks decent but doesn't really work.

---

Saving The File

Now nosotros're prepare to save the file. Kickoff, we need to create a function that hooks into the save_post hook. Let'south define that now:

function save_custom_meta_data($id) {  	/* --- security verification --- */ 	if(!wp_verify_nonce($_POST['wp_custom_attachment_nonce'], plugin_basename(__FILE__))) { 	  return $id; 	} // end if 	   	if(divers('DOING_AUTOSAVE') && DOING_AUTOSAVE) { 	  return $id; 	} // end if 	   	if('page' == $_POST['post_type']) { 	  if(!current_user_can('edit_page', $id)) { 	    render $id; 	  } // end if 	} else {    		if(!current_user_can('edit_page', $id)) { 	    	return $id; 	   	} // end if 	} // end if 	/* - end security verification - */ 	 } // finish save_custom_meta_data add_action('save_post', 'save_custom_meta_data');

Although this function doesn't actually save the value - not yet, at least - it includes a flake of lawmaking that ensures we're set to salvage the file. Specifically, the function makes certain that the expected nonce value is present, that an automatic save is non occurring, and that the user attempting to save data has permissions to do and so.

Now we're fix to begin validating and saving the file. When it comes to saving file-based custom meta data, additional lawmaking has to exist introduced to properly handle indiosynchrocies of uploading files. First, we'll define the lawmaking then we'll explain information technology. The function should look like this:

role save_custom_meta_data($id) {  	/* --- security verification --- */ 	if(!wp_verify_nonce($_POST['wp_custom_attachment_nonce'], plugin_basename(__FILE__))) { 	  render $id; 	} // finish if 	   	if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { 	  return $id; 	} // end if 	   	if('page' == $_POST['post_type']) { 	  if(!current_user_can('edit_page', $id)) { 	    return $id; 	  } // end if 	} else {    		if(!current_user_can('edit_page', $id)) { 	    	return $id; 	   	} // stop if 	} // end if 	/* - stop security verification - */ 	 	// Make sure the file array isn't empty 	if(!empty($_FILES['wp_custom_attachment']['name'])) { 		 		// Setup the array of supported file types. In this case, it's but PDF. 		$supported_types = array('application/pdf'); 		 		// Get the file type of the upload 		$arr_file_type = wp_check_filetype(basename($_FILES['wp_custom_attachment']['name'])); 		$uploaded_type = $arr_file_type['type']; 		 		// Check if the type is supported. If not, throw an mistake. 		if(in_array($uploaded_type, $supported_types)) {  			// Employ the WordPress API to upload the file 			$upload = wp_upload_bits($_FILES['wp_custom_attachment']['name'], null, file_get_contents($_FILES['wp_custom_attachment']['tmp_name'])); 	 			if(isset($upload['fault']) && $upload['error'] != 0) { 				wp_die('There was an error uploading your file. The fault is: ' . $upload['error']); 			} else { 				add_post_meta($id, 'wp_custom_attachment', $upload); 				update_post_meta($id, 'wp_custom_attachment', $upload);		 			} // end if/else  		} else { 			wp_die("The file type that y'all've uploaded is not a PDF."); 		} // end if/else 		 	} // end if 	 } // terminate save_custom_meta_data add_action('save_post', 'save_custom_meta_data');

The new block of code does several things. Comments accept been provided in order to requite clarity, but hither's what's happening:

• Starting time, we make sure the file array isn't empty
• Next, we setup an array for the supported file types and verify that the uploaded file is of that blazon
• Next, we use wp_upload_bits to copy the file to the server
• Finally, if there are whatever errors, we'll halt execution and display them to the user.

A note on wp_upload_bits(http://codex.wordpress.org/Function_Reference/wp_upload_bits). This office is an alternative to wp_handle_upload(http://codex.wordpress.org/Function_Reference/wp_handle_upload). In my experience, wp_handle_upload has yielded some problems with certain server configurations such that it gives a false negative. Past that, I hateful that information technology claims that information technology has a problem uploading the file when, in reality, the file was actually uploaded.

---

Linking Upwards the File

At this point, we should be ready to provide a link to the file on our posts and our pages. In the Twentyeleven Theme directory, locate the two files single.php and page.php. Each file contains a line of lawmaking that looks similar this:

get_template_part( 'content', 'single' );

Only below that line, nosotros'll need to request the custom post meta data by doing this:

echo get_post_meta(get_the_ID(), 'wp_custom_attachment', true);

Specifically, this function is requesting the postal service meta data identified by 'wp_custom_attachment' associated with this post ID. Clear, right? The final parameter is telling WordPress that we want the result back in a string format (the alternative is in the format of an assortment and that's across the telescopic of this tutorial).

The concluding block of code should wait like this:

get_template_part( 'content', 'unmarried' );

echo get_post_meta(get_the_ID(), 'wp_custom_attachment', true);

Now, attempt to upload a file for a folio or post. Load up the post and folio in your browser. Permitting everything has gone correctly, yous'll detect that ... oops ... you don't actually have the path to a file.

---

Update The Post Class

The problem is that, by default, the form element used to save all of the post information and its associated data doesn't have file types. This can be fixed with adding one more than function that hooks into the WordPress folio life cycle:

function update_edit_form() {     echo ' enctype="multipart/form-data"'; } // end update_edit_form add_action('post_edit_form_tag', 'update_edit_form');

This will suspend the enctype attribute to the postal service editor form element so that file uploads will non exist supported.

Now, allow'southward try to upload a file a over again. Locate your post or folio with the custom postal service meta box and attempt to upload a PDF. If all goes well, yous should exist able to navigate to the mail and/or page and come across the URL to the file.

---

Linking It Upwardly

The last footstep is the easiest. Next up, revisit the single.php and page.php files and wrap the call to the custom meta information request in an anchor such that information technology looks like this:

<?php get_template_part( 'content', 'single' ); ?> <?php $img = get_post_meta(get_the_ID(), 'wp_custom_attachment', true); ?>

<a href="<?php echo $img['url']; ?>"> 	Download PDF Here </a>

At this indicate, you should be able to attach a custom PDF to your page and have a link appear at the lesser of the folio content providing a link to the download. In the adjacent post, we'll take a look at how we tin can provide some improve styling for the download anchor also as delete the file from the page using the WordPress API.

In the meantime, try experimenting with customizing the meta box even further. For case, attempt to include a custom label to provide content for the link.

Did yous find this mail service useful?

Tuts+ Editor, Owner and Lead Developer at Pressware

Tom is a self-employed programmer who loves writing, building, and sharing WordPress-based projects. He runs Pressware where he provides WordPress appurtenances and services. You can follow him on Twitter.

milleraftecte75.blogspot.com

Source: https://code.tutsplus.com/articles/attaching-files-to-your-posts-using-wordpress-custom-meta-boxes-part-1--wp-22291

Share this post