Created
December 17, 2020 23:20
-
-
Save BruceMcKinnon/333955d1ba9f10f36c0361eb99f574e9 to your computer and use it in GitHub Desktop.
Add multiple featured images to posts/pages/cpt etc - no plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Thanks to: | |
// | |
// https://stackoverflow.com/questions/36506088/upload-multiple-featured-images-in-a-custom-post-wordpress | |
//init the meta box | |
add_action( 'after_setup_theme', 'custom_postimage_setup' ); | |
function custom_postimage_setup(){ | |
add_action( 'add_meta_boxes', 'custom_postimage_meta_box' ); | |
add_action( 'save_post', 'custom_postimage_meta_box_save' ); | |
} | |
function custom_postimage_meta_box(){ | |
//on which post types should the box appear? | |
$post_types = array('post','page'); | |
foreach($post_types as $pt){ | |
add_meta_box('custom_postimage_meta_box',__( 'More Featured Images', 'yourdomain'),'custom_postimage_meta_box_func',$pt,'side','low'); | |
} | |
} | |
function custom_postimage_meta_box_func($post){ | |
//an array with all the images (ba meta key). The same array has to be in custom_postimage_meta_box_save($post_id) as well. | |
$meta_keys = array('second_featured_image','third_featured_image'); | |
foreach($meta_keys as $meta_key){ | |
$image_meta_val=get_post_meta( $post->ID, $meta_key, true); | |
?> | |
<div class="custom_postimage_wrapper" id="<?php echo $meta_key; ?>_wrapper" style="margin-bottom:20px;"> | |
<img src="<?php echo ($image_meta_val!=''?wp_get_attachment_image_src( $image_meta_val)[0]:''); ?>" style="width:100%;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" alt=""> | |
<a class="addimage button" onclick="custom_postimage_add_image('<?php echo $meta_key; ?>');"><?php _e('add image','yourdomain'); ?></a><br> | |
<a class="removeimage" style="color:#a00;cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" onclick="custom_postimage_remove_image('<?php echo $meta_key; ?>');"><?php _e('remove image','yourdomain'); ?></a> | |
<input type="hidden" name="<?php echo $meta_key; ?>" id="<?php echo $meta_key; ?>" value="<?php echo $image_meta_val; ?>" /> | |
</div> | |
<?php } ?> | |
<script> | |
function custom_postimage_add_image(key){ | |
var $wrapper = jQuery('#'+key+'_wrapper'); | |
custom_postimage_uploader = wp.media.frames.file_frame = wp.media({ | |
title: '<?php _e('select image','yourdomain'); ?>', | |
button: { | |
text: '<?php _e('select image','yourdomain'); ?>' | |
}, | |
multiple: false | |
}); | |
custom_postimage_uploader.on('select', function() { | |
var attachment = custom_postimage_uploader.state().get('selection').first().toJSON(); | |
var img_url = attachment['url']; | |
var img_id = attachment['id']; | |
$wrapper.find('input#'+key).val(img_id); | |
$wrapper.find('img').attr('src',img_url); | |
$wrapper.find('img').show(); | |
$wrapper.find('a.removeimage').show(); | |
}); | |
custom_postimage_uploader.on('open', function(){ | |
var selection = custom_postimage_uploader.state().get('selection'); | |
var selected = $wrapper.find('input#'+key).val(); | |
if(selected){ | |
selection.add(wp.media.attachment(selected)); | |
} | |
}); | |
custom_postimage_uploader.open(); | |
return false; | |
} | |
function custom_postimage_remove_image(key){ | |
var $wrapper = jQuery('#'+key+'_wrapper'); | |
$wrapper.find('input#'+key).val(''); | |
$wrapper.find('img').hide(); | |
$wrapper.find('a.removeimage').hide(); | |
return false; | |
} | |
</script> | |
<?php | |
wp_nonce_field( 'custom_postimage_meta_box', 'custom_postimage_meta_box_nonce' ); | |
} | |
function custom_postimage_meta_box_save($post_id){ | |
if ( ! current_user_can( 'edit_posts', $post_id ) ){ return 'not permitted'; } | |
if (isset( $_POST['custom_postimage_meta_box_nonce'] ) && wp_verify_nonce($_POST['custom_postimage_meta_box_nonce'],'custom_postimage_meta_box' )){ | |
//same array as in custom_postimage_meta_box_func($post) | |
$meta_keys = array('second_featured_image','third_featured_image'); | |
foreach($meta_keys as $meta_key){ | |
if(isset($_POST[$meta_key]) && intval($_POST[$meta_key])!=''){ | |
update_post_meta( $post_id, $meta_key, intval($_POST[$meta_key])); | |
}else{ | |
update_post_meta( $post_id, $meta_key, ''); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment