I have attempted the following a few different ways. The current way I have the functionality works fine but does NOT utilize the WP Media Uploader (which makes finding 1600+ PDF files on the site to upload cumbersome). I recently found the below snippet of code and tweaked it to work for WooCommerce products.
The only issue is that I can't seem to figure out what to call to have the URL of the PDF that's uploaded with the meta box presented on the frontend as a link (i.e. Click Here to Download Product Tearsheet).
Any help would be greatly appreciated.
/* PDF Tear Sheet on Product Pages */
//Add Metabox
add_action('add_meta_boxes', 'add_upload_file_metaboxes');
function add_upload_file_metaboxes() {
add_meta_box('swp_file_upload', 'File Upload', 'swp_file_upload', 'product', 'normal', 'default');
}
function swp_file_upload() {
global $post;
// Noncename needed to verify where the data originated
echo '<input type="hidden" name="tearsheetmeta_noncename" id="tearsheetmeta_noncename" value="'.
wp_create_nonce(plugin_basename(__FILE__)).
'" />';
global $wpdb;
$strFile = get_post_meta($post -> ID, $key = 'tearsheet_file', true);
$media_file = get_post_meta($post -> ID, $key = '_wp_attached_file', true);
if (!empty($media_file)) {
$strFile = $media_file;
} ?>
<script type = "text/javascript">
// Uploading files
var file_frame;
jQuery('#upload_image_button').live('click', function(product) {
podcast.preventDefault();
// If the media frame already exists, reopen it.
if (file_frame) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery(this).data('uploader_title'),
button: {
text: jQuery(this).data('uploader_button_text'),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When a file is selected, run a callback.
file_frame.on('select', function(){
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// here are some of the variables you could use for the attachment;
//var all = JSON.stringify( attachment );
//var id = attachment.id;
//var title = attachment.title;
//var filename = attachment.filename;
var url = attachment.url;
//var link = attachment.link;
//var alt = attachment.alt;
//var author = attachment.author;
//var description = attachment.description;
//var caption = attachment.caption;
//var name = attachment.name;
//var status = attachment.status;
//var uploadedTo = attachment.uploadedTo;
//var date = attachment.date;
//var modified = attachment.modified;
//var type = attachment.type;
//var subtype = attachment.subtype;
//var icon = attachment.icon;
//var dateFormatted = attachment.dateFormatted;
//var editLink = attachment.editLink;
//var fileLength = attachment.fileLength;
var field = document.getElementById("tearsheet_file");
field.value = url; //set which variable you want the field to have
});
// Finally, open the modal
file_frame.open();
});
</script>
<div>
<table>
<tr valign = "top">
<td>
<input type = "text"
name = "tearsheet_file"
id = "tearsheet_file"
size = "70"
value = "<?php echo $strFile; ?>" />
<input id = "upload_image_button"
type = "button"
value = "Upload">
</td> </tr> </table> <input type = "hidden"
name = "img_txt_id"
id = "img_txt_id"
value = "" />
</div> <?php
function admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
function admin_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'admin_scripts');
add_action('admin_print_styles', 'admin_styles');
}
//Saving the file
function save_tearsheet_meta($post_id, $post) {
// verify this came from the our screen and with proper authorization,
// because save_post can be triggered at other times
if (!wp_verify_nonce($_POST['tearsheetmeta_noncename'], plugin_basename(__FILE__))) {
return $post -> ID;
}
// Is the user allowed to edit the post?
if (!current_user_can('edit_post', $post -> ID))
return $post -> ID;
// We need to find and save the data
// We'll put it into an array to make it easier to loop though.
$tearsheet_meta['tearsheet_file'] = $_POST['tearsheet_file'];
// Add values of $tearsheet_meta as custom fields
foreach($tearsheet_meta as $key => $value) {
if ($post -> post_type == 'revision') return;
$value = implode(',', (array) $value);
if (get_post_meta($post -> ID, $key, FALSE)) { // If the custom field already has a value it will update
update_post_meta($post -> ID, $key, $value);
} else { // If the custom field doesn't have a value it will add
add_post_meta($post -> ID, $key, $value);
}
if (!$value) delete_post_meta($post -> ID, $key); // Delete if blank value
}
}
add_action('save_post', 'save_tearsheet_meta', 1, 2); // save the custom fields
I have attempted the following a few different ways. The current way I have the functionality works fine but does NOT utilize the WP Media Uploader (which makes finding 1600+ PDF files on the site to upload cumbersome). I recently found the below snippet of code and tweaked it to work for WooCommerce products.
The only issue is that I can't seem to figure out what to call to have the URL of the PDF that's uploaded with the meta box presented on the frontend as a link (i.e. Click Here to Download Product Tearsheet).
Any help would be greatly appreciated.
/* PDF Tear Sheet on Product Pages */
//Add Metabox
add_action('add_meta_boxes', 'add_upload_file_metaboxes');
function add_upload_file_metaboxes() {
add_meta_box('swp_file_upload', 'File Upload', 'swp_file_upload', 'product', 'normal', 'default');
}
function swp_file_upload() {
global $post;
// Noncename needed to verify where the data originated
echo '<input type="hidden" name="tearsheetmeta_noncename" id="tearsheetmeta_noncename" value="'.
wp_create_nonce(plugin_basename(__FILE__)).
'" />';
global $wpdb;
$strFile = get_post_meta($post -> ID, $key = 'tearsheet_file', true);
$media_file = get_post_meta($post -> ID, $key = '_wp_attached_file', true);
if (!empty($media_file)) {
$strFile = $media_file;
} ?>
<script type = "text/javascript">
// Uploading files
var file_frame;
jQuery('#upload_image_button').live('click', function(product) {
podcast.preventDefault();
// If the media frame already exists, reopen it.
if (file_frame) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery(this).data('uploader_title'),
button: {
text: jQuery(this).data('uploader_button_text'),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When a file is selected, run a callback.
file_frame.on('select', function(){
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// here are some of the variables you could use for the attachment;
//var all = JSON.stringify( attachment );
//var id = attachment.id;
//var title = attachment.title;
//var filename = attachment.filename;
var url = attachment.url;
//var link = attachment.link;
//var alt = attachment.alt;
//var author = attachment.author;
//var description = attachment.description;
//var caption = attachment.caption;
//var name = attachment.name;
//var status = attachment.status;
//var uploadedTo = attachment.uploadedTo;
//var date = attachment.date;
//var modified = attachment.modified;
//var type = attachment.type;
//var subtype = attachment.subtype;
//var icon = attachment.icon;
//var dateFormatted = attachment.dateFormatted;
//var editLink = attachment.editLink;
//var fileLength = attachment.fileLength;
var field = document.getElementById("tearsheet_file");
field.value = url; //set which variable you want the field to have
});
// Finally, open the modal
file_frame.open();
});
</script>
<div>
<table>
<tr valign = "top">
<td>
<input type = "text"
name = "tearsheet_file"
id = "tearsheet_file"
size = "70"
value = "<?php echo $strFile; ?>" />
<input id = "upload_image_button"
type = "button"
value = "Upload">
</td> </tr> </table> <input type = "hidden"
name = "img_txt_id"
id = "img_txt_id"
value = "" />
</div> <?php
function admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
function admin_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'admin_scripts');
add_action('admin_print_styles', 'admin_styles');
}
//Saving the file
function save_tearsheet_meta($post_id, $post) {
// verify this came from the our screen and with proper authorization,
// because save_post can be triggered at other times
if (!wp_verify_nonce($_POST['tearsheetmeta_noncename'], plugin_basename(__FILE__))) {
return $post -> ID;
}
// Is the user allowed to edit the post?
if (!current_user_can('edit_post', $post -> ID))
return $post -> ID;
// We need to find and save the data
// We'll put it into an array to make it easier to loop though.
$tearsheet_meta['tearsheet_file'] = $_POST['tearsheet_file'];
// Add values of $tearsheet_meta as custom fields
foreach($tearsheet_meta as $key => $value) {
if ($post -> post_type == 'revision') return;
$value = implode(',', (array) $value);
if (get_post_meta($post -> ID, $key, FALSE)) { // If the custom field already has a value it will update
update_post_meta($post -> ID, $key, $value);
} else { // If the custom field doesn't have a value it will add
add_post_meta($post -> ID, $key, $value);
}
if (!$value) delete_post_meta($post -> ID, $key); // Delete if blank value
}
}
add_action('save_post', 'save_tearsheet_meta', 1, 2); // save the custom fields
2 Answers
Reset to default 1The simplest way to do this is with a plugin. I use ACF (Advanced Custom Fields) to create the meta box which takes care of all the heavy lifting and displays a nice metabox on the edit product screen. I then add a function on my single product template to display the PDF link which can be done using a function or within the template itself where required. Using some conditional logic, the PDF link only displays when there is one :-)
Here is a snippet for the custom field:
$pdf_media_file = get_post_meta( $post_id, 'pdf_media_file', true);
if(isset($pdf_media_file) && !empty($pdf_media_file)){
$pdf_file = wp_get_attachment_url($pdf_media_file);
}
You can then display the link to the file like this:
<a href="<?php echo $pdf_file; ?>">View the PDF</a>
WordPress has a PDF image generator now so you can also have fun using the PDF thumbnail in the media library.
Hey all (especially @Innate), I was able to sort it out ages ago but clearly forgot to come back here and share how I did it. I ended up nixing the idea of using the Media Uploader (due to it being hit-or-miss with larger PDF uploads) and instead just used the text field. I gave the client FTP access under a specific sub-folder (in this case: "tearsheets") and instructed them how to copy and paste the URL to the PDFs they upload. Then I just added the snippet (see below) to the correct single product templates for WooCommerce for it to show on the frontend.
Thanks again for trying to help!
<a href="<?php echo get_post_meta( get_the_ID(), '_nlttearsheet', true ); ?>">Download Tear Sheet</a>