Upload Multiple Featured Images in a Post OR Page

In this tutorial, I’ll explain to you how to upload multiple featured images in any post type and pages and then show them at the front end.

We can do this with ACF (Advance custom field) plugin and with custom meta box creation.

Table of Contents

1 Add Meta Box in Post Type and Pages:

2 Load the Field in the Meta Box:

3 Save the value of meta box:

4 All code together:

Add Meta Box in Post Type and Pages:

The add_meta_box() hook used to add a meta box in posts or pages. It gives us a screen to add/edit data and save with post. We just need to pass the specific parameters and run with hook/action.

add_action( 'add_meta_boxes', 'custom_postpage_meta_box' );
function custom_postpage_meta_box(){

    $post_types = array('post');
    foreach($post_types as $pt){
        add_meta_box('custom_postpage_meta_box',__( 'More Featured Images', 'textdomain'),'custom_postpage_meta_box_func',$pt,'side','low');
    }
}

In this code, we run an action hook add_meta_boxes and this custom_postpage_meta_box is the callback function to run when add_meta_boxes action hit.
Here we declare the variable $post_types to hold the array for on which post types should the box appear? You can change the value of this variable as per your need. E.g:- array('post','page','custom-post'). add_meta_box() this function run the meta box screen in your post type. And you will see another featured image box container. You can change the label of your meta box and can set the position priority like I set in the above code.

Load the Field in the Meta Box:

function custom_postpage_meta_box_func($post){

    $meta_keys = array('second_featured_image');

    foreach($meta_keys as $meta_key){
        $image_meta_val=get_post_meta( $post->ID, $meta_key, true);
        ?>
        <div class="custom_postpage_wrapper" id="<?php echo $meta_key; ?>_wrapper" style="margin-bottom:20px;">
            <img onclick="custom_postpage_add_image('<?php echo $meta_key; ?>');" src="<?php%20echo%20(%24image_meta_val!=''?wp_get_attachment_image_src(%20%24image_meta_val)%5B0%5D:'');%20?>" style="width:100%;cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" alt="">
            <a class="addimage" style="cursor:pointer;" onclick="custom_postpage_add_image('<?php echo $meta_key; ?>');"><?php _e('Set featured image','textdomain'); ?></a><br>
            <a class="removeimage" style="cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" onclick="custom_postpage_remove_image('<?php echo $meta_key; ?>');"><?php _e('Remove featured image','textdomain'); ?></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_postpage_add_image(key){

        var $wrapper = jQuery('#'+key+'_wrapper');

        custom_postimage_uploader = wp.media.frames.file_frame = wp.media({
            title: '<?php _e('select image','textdomain'); ?>',
            button: {
                text: '<?php _e('select image','textdomain'); ?>'
            },
            multiple: false
        });
        custom_postpage_uploader.on('select', function() {

            var attachment = custom_postpage_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_postpage_uploader.on('open', function(){
            var selection = custom_postpage_uploader.state().get('selection');
            var selected = $wrapper.find('input#'+key).val();
            if(selected){
                selection.add(wp.media.attachment(selected));
            }
        });
        custom_postpage_uploader.open();
        return false;
    }

    function custom_postpage_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_postpage_meta_box', 'custom_postpage_meta_box_nonce' );
    ?>
}

Look at the above code, we declare the meta key for each box to save in the backend against post ID and field for upload/delete the image with the javascript function of wp.media. This will allow you to open wp media in the popup and select the featured image which you want to select.

And after this, you will see the box appears in the backend of the post or page.

Save the value of meta box:

We will use save_post action hook to save the meta box value against the post or page value.

add_action( 'save_post', 'custom_postimage_meta_box_save' );
function custom_postimage_meta_box_save($post_id){

    if ( ! current_user_can( 'edit_posts', $post_id ) ){ return 'You have no permission to edit this post types'; }

    if (isset( $_POST['custom_postimage_meta_box_nonce'] ) && wp_verify_nonce($_POST['custom_postimage_meta_box_nonce'],'custom_postimage_meta_box' )){

        $meta_keys = array('second_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, '');
            }
        }
    }
}

Now, in this function, first we checked that the user has permission to edit that specific post type or not. If it not allowed then it will return the message “You have no permission to edit this post types”. If the user has permission then it will check the wp_nonce_field() for what data is coming from the same source and verify it. Then it will pass the value to update_post_meta() to save in the database.

After saving the value of the meta box (another featured image) you can access it with this code.

wp_get_attachment_image(get_post_meta( get_the_ID(), 'second_featured_image', true),'single_thumb');

wp_get_attachment_image() this function used for get the image source with html generated. And inside this I used get_post_meta() function. I think you already know this how to get the post meta with this function. So use this and show on your post where you want.

All code together:

//Add meta box in the post or page
add_action( 'add_meta_boxes', 'custom_postpage_meta_box' );
function custom_postpage_meta_box(){

    $post_types = array('post');
    foreach($post_types as $pt){
        add_meta_box('custom_postpage_meta_box',__( 'More Featured Images', 'textdomain'),'custom_postpage_meta_box_func',$pt,'side','low');
    }
}

//Load the field in meta screen
function custom_postpage_meta_box_func($post){

    $meta_keys = array('second_featured_image');

    foreach($meta_keys as $meta_key){
        $image_meta_val=get_post_meta( $post->ID, $meta_key, true);
        ?>
        <div class="custom_postpage_wrapper" id="<?php echo $meta_key; ?>_wrapper" style="margin-bottom:20px;">
            <img onclick="custom_postpage_add_image('<?php echo $meta_key; ?>');" src="<?php%20echo%20(%24image_meta_val!=''?wp_get_attachment_image_src(%20%24image_meta_val)%5B0%5D:'');%20?>" style="width:100%;cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" alt="">
            <a class="addimage" style="cursor:pointer;" onclick="custom_postpage_add_image('<?php echo $meta_key; ?>');"><?php _e('Set featured image','textdomain'); ?></a><br>
            <a class="removeimage" style="cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" onclick="custom_postpage_remove_image('<?php echo $meta_key; ?>');"><?php _e('Remove featured image','textdomain'); ?></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_postpage_add_image(key){

        var $wrapper = jQuery('#'+key+'_wrapper');

        custom_postimage_uploader = wp.media.frames.file_frame = wp.media({
            title: '<?php _e('select image','textdomain'); ?>',
            button: {
                text: '<?php _e('select image','textdomain'); ?>'
            },
            multiple: false
        });
        custom_postpage_uploader.on('select', function() {

            var attachment = custom_postpage_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_postpage_uploader.on('open', function(){
            var selection = custom_postpage_uploader.state().get('selection');
            var selected = $wrapper.find('input#'+key).val();
            if(selected){
                selection.add(wp.media.attachment(selected));
            }
        });
        custom_postpage_uploader.open();
        return false;
    }

    function custom_postpage_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_postpage_meta_box', 'custom_postpage_meta_box_nonce' );
    ?>
}

//Save the meta box
add_action( 'save_post', 'custom_postimage_meta_box_save' );
function custom_postimage_meta_box_save($post_id){

    if ( ! current_user_can( 'edit_posts', $post_id ) ){ return 'You have no permission to edit this post types'; }

    if (isset( $_POST['custom_postimage_meta_box_nonce'] ) && wp_verify_nonce($_POST['custom_postimage_meta_box_nonce'],'custom_postimage_meta_box' )){

        $meta_keys = array('second_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, '');
            }
        }
    }
}

That’s it. We learned how to Upload multiple featured images with custom code without any plugin.
Have any query please let me know in the comment box.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Upload Multiple Featured Images in a Post OR Page

Add Meta Box in Post Type and Pages:

Load the Field in the Meta Box:

Save the value of meta box:

All code together:

About Aman Mehra

Leave a Comment Cancel reply

Add Meta Box in Post Type and Pages:

Load the Field in the Meta Box:

Save the value of meta box:

All code together:

Related Posts

How to Check if Element Exists Using jQuery?

Top 100+ React JS Interview Questions And Answers

How to Print a Page using jQuery?

How to Bind Dynamically Added Elements with jQuery?

When to Use Traits in PHP – A Comprehensive Guide

Can PHP be used for Mobile Applications Development?

About Aman Mehra

Leave a Comment Cancel reply