Reusable Custom Meta Boxes Part 3: Extra Fields

Wow. This was extremely helpful. I just recently did an additional fields button with straight javascript. I like this method better though.

Nice… I was waiting for your next part. But oh dear… you still kept me waiting for “color picker”. Now that you’ve concluded your article series here, looks like the “color picker” is not on your To-Do list. :-( Tell you what… add this custom field type to your list and you will surely receive thanks from many. Custom Color for certain elements of WordPress is one of the common customization fields that Users demand these days. Needless to say, your article series is still the best, even without jQuery Color Picker! :-)

Yet another master stroke by wp.tutsplus.com. great going !

Oh wow…I’m officially set!

Thank you very much..

great job!
just a bit note for non english user:

how i can change the date format according to the wp main language?

if i change the line 159 from

$output .= ‘jQuery(“.datepicker”).datepicker();’;

$output .= ‘jQuery( “.datepicker” ).datepicker( jQuery.datepicker.regional[ "fr" ] );’;

nothing happen;

thank you

First up, thanks very much for producing such a great set of tutorials – it’s honestly the best set of tutorials on the topic I’ve found so far and it’s particularly timely for me seeing as I’ve just had a client ask for some fairly complex metabox stuff!

This is more likely to be a glitch somewhere in my code but I’ve noticed that having implemented the repeating fields type something breaks on the post list page. Specifically, the checkbox that allows the user to select all posts on that page now does not select anything ) the checkbox itself checks but nothing else happens). Also, the custom fields column is maximised (if that’s the right term) as if the user has clicked read more. Just also noticed that the new admin main menu rollovers from WP3.3 no longer function.

I’ve narrowed this down being a jQuery conflict that’s related to the custom-js.js file. In my implementation I’ve got an exact copy of your JS file and it’s enqueued in the same way (using the if is_admin conditional). However, whilst it references correctly in the head of all the admin pages it causes the glitches described above (the repeating fields in the metabox work like a charm though). When the file is removed all the glitches are gone (e.g. WP functions as it should) but of course the repeating fields no longer work.

Was wondering if anyone else had noticed this behaviour?

I just built the image uploader an I love it, my site uses very large images however and they take up a lot of real estate on my admin screen, it there a way to set a maximum height or width for the preview (just in the post page)

thanks in advance

Andi

Tammy, thanks for the resources! your time and efforts are definitely NOT unappreciated! Thank you!

Hey Tammy, thanks for the great post!

Been using your tutorial for a site that needs two custom post types, and I’d like to know how to save the data for two separate post types each with their own custom meta boxes.

I thought doubling up on the save functions and defining each one with its own name would be fine, but they are both being called when the post is actually saved.

How do I only save the data for each specific post?

I’d really like to make repeatable custom fields with file/image uploaders. I want to use them for a home page gallery. I could probably just use the repeatable text fields and make custom thumbs from the urls entered manually, but it would be nice to upload right from there.

I tried swapping the text field for the image upload in the repeatable switch case, but I know I’m missing something in the javascript. I also got an error saying there was the foreach($meta as $row) statement was invalid.

Any suggestions? Thanks!!

I have one small error when calling the media.php
the post_id parameter is not sent
it’s still works, there is just a php error
as a result we don’t get the pictures attached to this post eg with the tab : gallery (2)

it’s seems you just need to put the post_id
custom-js.js :
tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’);
become
tb_show(”, ‘media-upload.php?post_id=’+id+’&type=image&TB_iframe=true’);

where id is taken from the URL (post=…). I’m not sure it’s the right way to do it.

Thank you very much for this serie ! And all the others !

Great tutorial. I’m having some issues though.

For some reason the image uploader isn’t working and when I click on the date form the calendar that shows up has no background making it hard to see.

Any idea why I might be having those issued?

Great Tutorial
But, I do not know how to represent the custom fields on the front end, I want to include these fields in my single.php, I need help please.

I found a way of making sortable realy sort :).

This is my outputed UL so you can have a look at id’s and input names. i used.

|||

-
|||

-
|||

-
|||

-

In the javascript file you must add this lines of code in the sortable function.

jQuery(‘.custom_repeatable’).sortable({
opacity: 0.6,
revert: true,
cursor: ‘move’,
handle: ‘.sort’,
update: function(event,ui){
var i = 0;
jQuery(‘#aa_repeatable-repeatable li input’).each(function() {
jQuery(this).attr(‘name’, ‘aa_repeatable['+ i++ +']‘);
});
}
});

After you move one of the element this piece of code will rename you inputs NAME attribute from first to last.
So in conclusion when you will save the custom_post it will swap values.

Simple as that :).

Hi,
how can i call values from individual fields (metaboxes)? I want to call text from text field and i used this code but it display text “array”. What do I do wrong?

ID, $field['custom_text'], true); ?>

Hello -
First of all – Tammy, this post series is incredible helpful. The reusable fields concept is something I’ve been searching for for a long time.

On to my question – I am trying to combine the reusable insert field with a checkbox. Basically I want the user to be able to add an li that has both a text insert field and a checkbox. This custom field is going to be used for “answers”, the overall custom post type is “questions.” I want the checkbox essentially to be how the user designates the correct answer(s).

My code is below. I am able to add and remove text and it saves correctly. Basically what is happening is if any box is checked, they are all checked after saving. I understand why this is happening – something to do with the $c_meta and not saving each box value separately.

Admittedly I am no expert in any of this and would appreciate any help anyone could provide.

Thank you!

function add_custom_meta_box() {
add_meta_box(
‘answer_box’, // $id
‘Answers’, // $title
‘show_custom_meta_box’, // $callback
‘questions’, // $page
‘normal’, // $context
‘high’); // $priority
}
add_action(‘add_meta_boxes’, ‘add_custom_meta_box’);

$prefix = ‘kn_’;

$kn_checkbox = array(

‘label’ => ‘Checkbox Input’,
‘desc’ => ”,
‘id’ => $prefix.’checkbox’,
‘type’ => ‘checkbox’
);
$kn_answer = array (

‘label’ => ”,
‘desc’ => ‘Enter each possible answer. For true/false questions, enter true in one field, false in a second field. Check the box next to the correct answer(s).’,
‘id’ => $prefix.’answer’,
‘type’ => ‘text’
);

// The Callback
function show_custom_meta_box() {
global $kn_checkbox, $kn_answer, $post;

// Use nonce for verification
echo ‘<input type=”hidden” name=”custom_meta_box_nonce” value=”‘.wp_create_nonce(basename(__FILE__)).’” />’;

$c_meta = get_post_meta($post->ID, $kn_checkbox['id'], true);
$a_meta = get_post_meta($post->ID, $kn_answer['id'], true);

// Begin the field table and loop
echo ‘<table class=”form-table”>’;
echo ‘<tr>

<th><label for=”‘.$kn_answer['id'].’”>’.$kn_answer['label'].’</label></th>
<td>’;
echo ‘<a class=”repeatable-add button” href=”#”>+</a>
<ul id=”‘.$kn_answer['id'].’-repeatable” class=”custom_repeatable”>’;
$i = 0;
if ($a_meta) {
foreach($a_meta as $row) {
echo ‘<li><span class=”sort hndle”>|||</span>
<input type=”text” name=”‘.$kn_answer['id'].’['.$i.']” id=”‘.$kn_answer['id'].’” value=”‘.$row.’” size=”30″ />
<a class=”repeatable-remove button” href=”#”>-</a>’;

echo’<input type=”checkbox” name=”‘.$kn_checkbox['id'].’['.$i.']” id=”‘.$kn_checkbox['id'].’” ‘,$c_meta ? ‘ checked=”checked”‘ : ”,’/>
<label for=”‘.$kn_checkbox['id'].’”>’.$kn_checkbox['desc'].’</label></li>’;

$i++;
}
} else {
echo ‘<li><span class=”sort hndle”>|||</span>
<input type=”text” name=”‘.$kn_answer['id'].’['.$i.']” id=”‘.$kn_answer['id'].’” value=”" size=”30″ />
<a class=”repeatable-remove button” href=”#”>-</a></li>’;
}
echo ‘</ul>
<span class=”description”>’.$kn_answer['desc'].’</span>’;

echo ‘</td></tr>’;
echo ‘</table>’; // end table
}

function remove_taxonomy_boxes() {
remove_meta_box(‘categorydiv’, ‘post’, ‘side’);
}
add_action( ‘admin_menu’ , ‘remove_taxonomy_boxes’ );

// Save the Data
function save_custom_meta($post_id) {
global $kn_checkbox, $kn_answer;

// verify nonce
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// check autosave
if (defined(‘DOING_AUTOSAVE’) && DOING_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

$old = get_post_meta($post_id, $kn_checkbox['id'], true);
$new = $_POST[$kn_checkbox['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $kn_checkbox['id'], $new);
} elseif (” == $new && $old) {
delete_post_meta($post_id, $kn_checkbox['id'], $old);
}

// loop through fields and save the data

$old = get_post_meta($post_id, $kn_answer['id'], true);
$new = $_POST[$kn_answer['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $kn_answer['id'], $new);
} elseif (” == $new && $old) {
delete_post_meta($post_id, $kn_answer['id'], $old);
}

}
add_action(‘save_post’, ‘save_custom_meta’);

Hi,
I looking a way to implementing the images uploader to my meta box, your tutorial help me a lot.

Everything works fine, but there is one odd thing I noticed. The flash uploader seem not entirely working. When I choose an image to upload, the flash uploader have no response at all. Then I try the browser uploader, and it works fine. Then I switch back to the flash uploader and try to upload image again, and strangely this time the flash uploader work like a charm.

So in my observation, the flash uploader only working after the browser uploader have uploaded image.

How is this happened?

Is it me that having this problem only?

Thanks

Hi,

Great tutorial!

I’ve been trying to make the repeatable field work with the image uploaded rather than the text field, I’ve replaced the text field code with the image code, however now when you click the ‘+’ button it doesnt do anything, furthermore I get the following error in the Chrome dev bar:

Uncaught TypeError: Cannot call method ‘replace’ of undefined

When I remove the line of code within the ‘else’ loop which inserts the upload button the ‘+’ begins to work again so I believe the error has something to do with this.

Here is the code I have modified, I have not modified any of the JS.

case ‘repeatable’:
echo ‘<a class=”repeatable-add button” href=”#”>+</a>
<ul id=”‘.$field['id'].’-repeatable” class=”custom_repeatable”>’;
$i = 0;
if ($meta) {
foreach($meta as $row) {
$image = wp_get_attachment_image_src($meta, ‘medium’); $image = $image[0];
echo ‘<li><span class=”sort hndle”>|||</span>
<input name=”‘.$field['id'].’['.$i.']” type=”hidden” class=”custom_upload_image” value=”‘.$meta.’” />
<img src=”‘.$image.’” class=”custom_preview_image” alt=”" /><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” />
<a class=”repeatable-remove button” href=”#”>-</a></li>’;
$i++;
}
} else {
echo ‘<li><span class=”sort hndle”>|||</span>
<input name=”‘.$field['id'].’['.$i.']” type=”hidden” class=”custom_upload_image” value=”" />
<img src=”" class=”custom_preview_image” alt=”" /><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” />
<a class=”repeatable-remove button” href=”#”>-</a></li>’;
}
echo ‘</ul>
<span class=”description”>’.$field['desc'].’</span>’;
break;

Thanks in advance,
Martin

Hello Tammy.

great article. I see how you have extended this idea for your Recipress plugin. Would it be possible to let us know, how to have 1 textarea & a image upload button in a row in the repeatable fields?

@Japh, this site needs subscribe to comments options. Would be really helpful :)

Is there a away to add images and text into the custom repeatable? I have tried like below but wont add new fields and I would then be unsure how to display both elements! Please help :)

case ‘repeatables’:
echo ‘+
‘;
$i = 0;
if ($meta) {
foreach($meta as $row) {
echo ‘|||

 Remove Image
‘.$field['desc'].’

-‘;
$i++;
}
} else {
echo ‘|||

 Remove Image
‘.$field['desc'].’

-‘;
}
echo ‘
‘.$field['desc'].”;
break;

How about adding a farbtastic thing? I read in the comments that people add a colorpicker by adding something completly new allthough WordPress comes along with farbtastic plugin. But I didn’t get it to work…

Im trying to do multiply custom fields (5) and make them reapeatable but i cant get this work. Anyone know how to setup repeatable field which has inside 5 custom fields ?