In a previous post, I was showing a way to add repeating image inputs to a WordPress post or page. Now let’s do something more simple.
Let’s say I only need to add a few separate image inputs to a custom template used for my homepage. But I want the code to be easily extensible, so I can add any number of images to this template, and maybe apply the same code to other templates. Here’s the simplest method I found which also allows perfect extensibility.
The first step is to add a couple of image inputs to my homepage’s edit screen in WP-admin. Add this code to functions.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
// Register custom meta boxes add_action( 'add_meta_boxes_page', 'add_sections_homepage_page' ); // Implement custom meta boxes function add_sections_homepage_page(){ global $post; if ( 'page-homepage.php' == get_post_meta( $post->ID, '_wp_page_template', true ) ) { add_meta_box( 'homepage_top_section', 'Homepage - Top Section', 'display_homepage_top_section', 'page', 'normal', 'high' ); } } // Define custom meta box - Top Section function display_homepage_top_section ( $page ) { $homepage_top_image = get_post_meta( $page->ID, 'homepage_top_image', true ); $homepage_top_image_id = get_post_meta( $page->ID, 'homepage_top_image_id', true ); $homepage_bot_image = get_post_meta( $page->ID, 'homepage_bot_image', true ); $homepage_bot_image_id = get_post_meta( $page->ID, 'homepage_bot_image_id', true ); ?> <table id="images-container" style="width: 100%"> <tr> <td style="width: 50%;"> <label>Homepage Top Image</label> <input type="hidden" name="homepage_top_image" id="featured_image1" value="<?php echo $homepage_top_image; ?>" /> <input type="hidden" name="homepage_top_image_id" id="featured_image_id1" value="<?php echo $homepage_top_image_id; ?>" /> <?php if ( '' == $homepage_top_image ) { ?> <p><img class="featured_img1" src="" style="display: none" /></p> <input type="button" class="featured_image1 button" value="Upload Visit a Showroom Image " /> <input style="display:none;" type="button" class="remove_featured_image1 button" value="Remove Image " /></p> <?php } else { ?> <p><img class="featured_img1" src="<?php echo $homepage_top_image; ?>" /></p> <input style="display:none;" type="button" class="featured_image1 button" value="Upload Image " /> <input type="button" class="remove_featured_image1 button" value="Remove Image " /> <?php } ?> </td> <td style="width: 50%;"> <label>Homepage Bottom Image</label> <input type="hidden" name="homepage_bot_image" id="featured_image2" value="<?php echo $homepage_bot_image; ?>" /> <input type="hidden" name="homepage_bot_image_id" id="featured_image_id2" value="<?php echo $homepage_bot_image_id; ?>" /> <?php if ( '' == $homepage_bot_image ) { ?> <p><img class="featured_img3" src="" style="display: none" /></p> <input type="button" class="featured_image2 button" value="Upload Visit a Showroom Image " /> <input style="display:none;" type="button" class="remove_featured_image2 button" value="Remove Image " /></p> <?php } else { ?> <p><img class="featured_img3" src="<?php echo $homepage_bot_image; ?>" /></p> <input style="display:none;" type="button" class="featured_image2 button" value="Upload Image " /> <input type="button" class="remove_featured_image2 button" value="Remove Image " /> <?php } ?> </td> </tr> </table> <?php } |
If we take a look in WP-admin it looks pretty neat:
Before it works we’ll need to add a bit of javascript. But first let’s add this final piece of code to functions.php, so the ‘saving’ part is handled:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// Implement save post function function save_homepage_fields( $post_id, $post ) { if ( !current_user_can( 'edit_post', $post_id ) ) return $post_id; if ( 'page-homepage.php' == get_post_meta( $post->ID, '_wp_page_template', true ) ) { // Store data in post meta table if present in post data $save_elements = array(' homepage_top_image' => 'noautop', 'homepage_top_image_id' => 'noautop', 'homepage_bot_image' => 'noautop', 'homepage_bot_image_id' => 'noautop', ); foreach ( $save_elements as $save_elem_name => $autop ) { if ( isset( $_POST[$save_elem_name] ) ) { $save_elem_data = get_post_meta( $post_id, $save_elem_name, true ); if ( 'wpautop' == $autop ) { $new_save_elem_data = wpautop($_POST[$save_elem_name]); } else { $new_save_elem_data = $_POST[$save_elem_name]; } if ( $new_save_elem_data != $save_elem_data ) update_post_meta( $post_id, $save_elem_name, $new_save_elem_data ); elseif ( '' == $new_save_elem_data && $save_elem_data ) delete_post_meta( $post_id, $save_elem_name, $save_elem_data ); } } } } // Register save post function add_action( 'save_post', 'save_homepage_fields', 10, 2 ); |
Right, so the magic is done by a single javascript function, which hooks into wordpress’ mediauploader script. Add this code to a new file meta-box-image.js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
jQuery(document).ready(function($) { var mediaUploader = []; jQuery('input[id^="featured_image"]').each(function(index, element) { var i = index + 1; $('.featured_image' + i).click(function(e) { e.preventDefault(); // If the uploader object has already been created, reopen the dialog if (mediaUploader[i]) { mediaUploader[i].open(); return; } // Extend the wp.media object mediaUploader[i] = wp.media.frames.file_frame = wp.media({ title: 'Choose Image', button: { text: 'Choose Image' }, multiple: true }); // When a file is selected, grab the URL and set it as the text field's value mediaUploader[i].on('select', function() { attachment = mediaUploader[i].state().get('selection').first().toJSON(); $('#featured_image' + i).val(attachment.url); $('#featured_image_id' + i).val(attachment.id); $('.featured_img' + i).attr("src",attachment.url).show(); $('.featured_image' + i).hide(); $('.remove_featured_image' + i).show(); }); // Open the uploader dialog mediaUploader[i].open(); }); // Remove file $('.remove_featured_image' + i).click( function() { $('#featured_image' + i).val(''); $('.featured_img' + i).attr("src","").hide(); $('.featured_image' + i).show(); $(this).hide(); }); }); }); |
Final step is to load this script into our wp-admin. Add this code to functions.php :
1 2 3 4 5 6 7 8 9 |
/* Add support for 3 extra image fields */ function custom_featured_image_enqueue() { wp_enqueue_media(); // Registers and enqueues the required javascript. wp_register_script( 'meta-box-image', get_stylesheet_directory_uri().'/scripts/meta-box-image.js', array( 'jquery' ) ); wp_enqueue_script( 'meta-box-image' ); } add_action( 'admin_enqueue_scripts', 'custom_featured_image_enqueue' ); |
Now that we have all pieces in place, let’s take a minute to notice how extensible this code is. So we are using this input:
1 |
<input type="hidden" name="homepage_top_image" id="featured_image1" value="<?php echo $homepage_top_image; ?>" /> |
And notice the jquery .each loop:
1 |
jQuery('input[id^="featured_image"]').each(function(index, element) { |
So you can add as many featured_imageX fields as you like, just increment the X number. The code also saves the image ID ( featured_image_id1) so you can use wp_get_attachment_image in your template files.
[…] In the next post I’ll continue with an even simpler method to add a few custom image boxes. […]