Additional custom featured Image field for every page

In wordpress generally we have one featured image section for every page. If in a case we want to add another image field for pages without using any wordpress plugin then we need to put below mentioned code in specified locations in theme..

Put below mentioned code in your theme’s function.php file :

add_action( 'add_meta_boxes', 'custom_featured_mb_add' );
function custom_featured_mb_add(){
	add_meta_box( 'custom-featured-image', 'Custom Featured Image', 'custom_featured_image_mb', 'page', 'side', 'low' );
}

function custom_featured_image_mb($post){
	$image_meta = 'custom_featured_image';
	$image_id = get_post_meta( $post->ID, $image_meta, true );
	$image_attributes = wp_get_attachment_image_src( $image_id, array(596,170));

	echo '<div class="custom_uploader">';
	echo '<img class="custom_media_image" src="'. $image_attributes[0] .'" width="254" height="72" style="'. ( ! $image_id ? 'display:none;' : '' ) .' margin: 10px 0 15px 0;" />';
	echo '<a href="#" class="custom_media_add" style="'. (! $image_id ? '' : 'display:none;') .'">Set Custom Featured image</a>';
	echo '<a href="#" class="custom_media_remove" style="'. ( ! $image_id ? 'display:none;' : '' ) .'">Remove Custom Featured image</a>';
	echo '<input class="custom_media_id" type="hidden" name="'. $image_meta .'" value="'. $image_id .'">';
	echo '</div>';
}

add_action( 'save_post', 'custom_featured_image_mb_save' );
function custom_featured_image_mb_save( $post_id ){
	//verify the metadata is set
	if ( isset ($_POST['custom_featured_image'])) {
		//save the metadata
		update_post_meta( $post_id, 'custom_featured_image', $_POST['custom_featured_image']);
	}
}

function featured_image_handler_enqueue() {
	global $typenow;
	if( $typenow == 'page' ) {
		wp_enqueue_script( 'featured-image-handler-js', get_template_directory_uri() . '/js/featured-image-handler.js', array(), '', false );
	}
}
add_action( 'admin_enqueue_scripts', 'featured_image_handler_enqueue' );

Make a “featured-image-handler.js” file with this code :

jQuery(document).ready(function ($) {
    var customMediaSelector = {
      init: function() {
        $('.custom_media_add').on('click', function (e) {
          var $el;
          e.preventDefault();
          $el = customMediaSelector.el = $(this).closest('div');
          $el.image = $el.find('.custom_media_image');
          $el.id = $el.find('.custom_media_id');
          customMediaSelector.frame().open();
        });

        $('.custom_media_remove').on('click', function (e) {
          var $el = $(this).closest('div');
          e.preventDefault();

          $el.find('.custom_media_image').attr('src', '').hide();
          $el.find('.custom_media_id').val('');
          $el.find('.custom_media_add, .custom_media_remove').toggle();
        });
      },

      // Update the selected image in the media library based on the attachment ID in the field.
      open: function() {
        var selection = this.get('library').get('selection'),
            attachment, selected;

        selected = customMediaSelector.el.id.val();

        if ( selected && '' !== selected && -1 !== selected && '0' !== selected ) {
            attachment = wp.media.model.Attachment.get( selected );
            attachment.fetch();
        }

        selection.reset( attachment ? [ attachment ] : [] );
      },

      // Update the control when an image is selected from the media library.
      select: function() {
        var $el = customMediaSelector.el,
            selection = this.get('selection'),
            sizes = selection.first().get('sizes'),
            size;

        // Insert the selected attachment id into the target element.
        $el.id.val( selection.first().get( 'id' ) );

        // Update the image preview tag.
        if ( sizes ) {
            // The image size to show for the preview.
            size = sizes['thumbnail'] || sizes.medium;
        }

        size = size || selection.first().toJSON();
        $el.image.attr( 'src', size.url ).show();
        $el.find('.custom_media_add, .custom_media_remove').toggle();
        selection.reset();
      },

      // Initialize a new frame or return an existing frame.
      frame: function() {
        if ( this._frame )
          return this._frame;

        this._frame = wp.media({
          title: 'Set Custom Featured Image',
          library: {
              type: 'image'
          },
          button: {
              text: 'Set image'
          },
          multiple: false
        });

        this._frame.on( 'open', this.open ).state('library').on( 'select', this.select );
        return this._frame;
      }
    };

    customMediaSelector.init();
});

Now place “featured-image-handler.js” file here : yourtheme/js/featured-image-handler.js

To fetch the image in front-end :

<?php if(get_post_meta($post->ID, 'custom_featured_image', true)){
  $image_id = get_post_meta( $post->ID, 'custom_featured_image', true );
  $image_attributes = wp_get_attachment_image_src( $image_id , 'full');
  ?><img src="<?php echo $image_attributes[0];?>"><?php }?>