Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Custom Post Type Metabox with fancybox WordPress

I have two Custom Post Types named: "Accommodation" & the other "Activities"

I require a metabox that looks like 1.jpg (attached) which is a label with a browse button to upload an image.

When you press browse, the standard WP uploader appears (See 2.jpg), then you find you image and press upload. Once it has completed you can fill in the Title & ALT name. Once down you press, a button "Use This Image", and that places the image url into the text label.

After you upload the 4 images into (1.jpg) I need it to generate 4 thumbnails in a 300px x 300px box as seen in (3.jpg), box has a 20px padding, and 20px gap between pics, so thumbs can be 120px x 120px each.

From each thumbnail I need it to link to the large file that will open in fancybox, see below for example of code.
<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>

I would also like each thumbnail to fade on 'mouseover' and use class of 'class="fade alignnone"'

Final product will sit right of the featured image see in (4.jpg)

I require the full .php files, for the metabox, for echoing the code & .css files.

Answers (4)


Arnav Joy answers:

see these two links for creating it

Arnav Joy comments:

so here is my answer for the meta boxes , i have slightly modified it in look , please see the attached screenshot for it.

now create a js file and named it as custom-js.js , place it in js folder of your theme.

put following code into custom-js.js
jQuery(function(jQuery) {

jQuery('.custom_upload_image_button').click(function() {
formfield = jQuery(this).siblings('.custom_upload_image');
preview = jQuery(this).siblings('.custom_preview_image');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
classes = jQuery('img', html).attr('class');
id = classes.replace(/(.*?)wp-image-/, '');
preview.attr('src', imgurl);
preview.attr('width', "100");
preview.attr('height', "100");
return false;

jQuery('.custom_clear_image_button').click(function() {
var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);
return false;


now in functions.php place following code:-

wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');

function add_custom_meta_box() {
'custom_meta_box', // $id
'Images', // $title
'show_custom_meta_box', // $callback
'Accommodation', // $page
'normal', // $context
'high'); // $priority
add_action('add_meta_boxes', 'add_custom_meta_box');

$prefix = 'custom_';
$custom_meta_fields = array(
'label' => 'Image1',
'name' => 'Image1',
'desc' => 'A description for the field.',
'id' => $prefix.'image1',
'type' => 'image'
'label' => 'Image2',
'name' => 'Image2',
'desc' => 'A description for the field.',
'id' => $prefix.'image2',
'type' => 'image'
'label' => 'Image3',
'name' => 'Image3',
'desc' => 'A description for the field.',
'id' => $prefix.'image3',
'type' => 'image'
'label' => 'Image4',
'name' => 'Image4',
'desc' => 'A description for the field.',
'id' => $prefix.'image4',
'type' => 'image'


function show_custom_meta_box() {
global $custom_meta_fields, $post;
// Use nonce for verification
echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';

// Begin the field table and loop
echo '<table class="form-table">';
echo '<tr><td colspan="2">Upload an image and then click "insert into post". To delete an image just prese "Remove Image".Images will automatically resized to proper width and random height.<br/>Make sure you upload image with minimum width of 900px</td></tr>';
foreach ($custom_meta_fields as $field) {
// get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
// begin a table row with
echo '<tr>
<th><label for="'.$field['id'].'">'.$field['label'].'</label></th>
switch($field['type']) {
case 'image':
$image = get_template_directory_uri().'/images/image.png';
echo '<span class="custom_default_image" style="display:none">'.$image.'</span>';
if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }
echo '<input name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" />
<img src="'.$image.'" class="custom_preview_image" alt="" width="100" height="100" /><br />
<input class="custom_upload_image_button button" type="button" value="Choose Image" />
<small> <a href="#" class="custom_clear_image_button">Remove Image</a></small>
<br clear="all" /><span class="description">'.$field['desc'].'';
} //end switch
echo '</td></tr>';
} // end foreach
echo '</table>'; // end table


function save_custom_meta($post_id) {
global $custom_meta_fields;

// verify nonce
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// check autosave
return $post_id;
// check permissions
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id))
return $post_id;
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;

// loop through fields and save the data
foreach ($custom_meta_fields as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
} // end foreach
add_action('save_post', 'save_custom_meta');

I have created this these boxes for custom post type "Accommodation" , test this and let me know if it is ok then i will create it for other post type also.