It’s possible to add extra fields for your page templates in WordPress. You can even add extra image properties that will use the Media Browser. This article will explain how.
This is a simple hack, or proof of concept on how to add extra image properties to your page template. It shouldn’t be used as-is but as a starting point.
What it does is that it creates a new meta box, just below the current box “Featured Image” and it mimics its behaviors and looks. You’ll get a another “Featured Image” property so to speak, and you can use it for whatever your want.
Simply copy the code below and add it to your functions.php. This code has been tested to work with WordPress 3.5.1
add_action( 'add_meta_boxes', 'custom_meta_boxes' );
add_action( 'save_post', 'ExtraImageProperty_save' );
function custom_meta_boxes() {
add_meta_box('ExtraImageProperty', 'Extra Image Property', 'ExtraImageProperty', 'page');
}
function ExtraImageProperty() {
global $post;
$extra_image_url = get_post_meta($post->ID, 'extra_image_url', true);
wp_nonce_field( plugin_basename( __FILE__ ), 'ExtraImageProperty_wpnonce_name' );
?>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
var image;
jQuery('#upload_image_button').click(function() {
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
jQuery('#remove_image_button').click(function() {
jQuery('#extra_image_url').val("");
jQuery('#image_display').toggle();
jQuery('#upload_image_button').toggle();
jQuery('#remove_image_button').toggle();
});
window.send_to_editor = function(html) {
img = jQuery('img',html);
jQuery('#extra_image_url').val(img.attr('src'));
jQuery('#image_display').attr("src",img.attr('src'));
jQuery('#image_display').toggle();
jQuery('#upload_image_button').toggle();
jQuery('#remove_image_button').toggle();
tb_remove();
}
});
</script>
<?php
?>
<input id="extra_image_url" name="extra_image_url" type="hidden" value="<?php echo $extra_image_url?>" />
<img <?php if (empty($extra_image_url)) echo 'style="display:none"' ?> id="image_display" src="<?php echo $extra_image_url?>" width="266" alt="" />
<p><a <?php if (!empty($extra_image_url)) echo 'style="display:none"' ?> title="Set extra image" id="upload_image_button" href="#" />Set extra image</a></p>
<p><a <?php if (empty($extra_image_url)) echo 'style="display:none"' ?> title="Remove extra image" id="remove_image_button" href="#" />Remove extra image</a></p>
<?php
}
function ExtraImageProperty_save( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( !wp_verify_nonce( $_POST['ExtraImageProperty_wpnonce_name'], plugin_basename( __FILE__ ) ) )
return;
if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ) )
return;
} else {
if ( !current_user_can( 'edit_post', $post_id ) )
return;
}
update_custom_meta($post_id, $_POST['extra_image_url'], 'extra_image_url');
}
function update_custom_meta($postID, $newvalue, $field_name) {
if (!get_post_meta($postID, $field_name)) {
add_post_meta($postID, $field_name, $newvalue);
} else {
update_post_meta($postID, $field_name, $newvalue);
}
}
?>
How to use this new property
You’ll need to get the the new property from the meta data. As the property holds the url to the image simply echo it in a image source attribute.
echo '<img alt="" src="'.$extra_image_url.'" />';