Ytdyklly

Adding Featured Image after getting inside of the post is not that hard. But some people want it to do that outside the loop. So is there a way to add a button on post columns to add a featured image in the post list without going inside the post and doing it like the old ways?? It's a simple thing but it may be hard to code. Maybe with AJAX, it can be done.

I've used the plugin Admin Columns Pro for this — in addition to many useful & time-saving features, it allows you to add a column to the Posts list (or any post type list) showing the featured image. If you set it up to allow inline editing for that column, you can add the featured image directly from the list view. It's saved me loads of time, and clients find it easy to use too.

Yes, it can be done very easily. There is a great tutorial by Misha Rudrastyh on how to add Featured Images to Quick Edit. I recently applied it and can confirm that it works. You will be able to see the featured images in the admin area post lists and easily change them using Quick Edit. It is a very good alternative to using a plugin.

Copy and paste the following to your functions.php file:

/*

*

* Add Featured Image Column to Admin Area and Quick Edit menu

* Source: https://rudrastyh.com/wordpress/quick-edit-featured-image.html

*

*/



/*

 * This action hook allows to add a new empty column

 */

add_filter('manage_post_posts_columns', 'misha_featured_image_column');

function misha_featured_image_column( $column_array ) {



    // I want to add my column at the beginning, so I use array_slice()

    // in other cases $column_array['featured_image'] = 'Featured Image' will be enough

    $column_array = array_slice( $column_array, 0, 1, true )

    + array('featured_image' => 'Featured Image') // our new column for featured images

    + array_slice( $column_array, 1, NULL, true );



    return $column_array;

}



/*

 * This hook will fill our column with data

 */

add_action('manage_posts_custom_column', 'misha_render_the_column', 10, 2);

function misha_render_the_column( $column_name, $post_id ) {



    if( $column_name == 'featured_image' ) {



        // if there is no featured image for this post, print the placeholder

        if( has_post_thumbnail( $post_id ) ) {



            // I know about get_the_post_thumbnail() function but we need data-id attribute here

            $thumb_id = get_post_thumbnail_id( $post_id );

            echo '<img data-id="' . $thumb_id . '" src="' . wp_get_attachment_url( $thumb_id ) . '" />';



        } else {



            // data-id should be "-1" I will explain below

            echo '<img data-id="-1" src="' . get_stylesheet_directory_uri() . '/placeholder.png" />';



        }



    }



}



add_action( 'admin_head', 'misha_custom_css' );

function misha_custom_css(){



    echo '<style>

        #featured_image{

            width:120px;

        }

        td.featured_image.column-featured_image img{

            max-width: 100%;

            height: auto;

        }



        /* some styles to make Quick Edit meny beautiful */

        #misha_featured_image .title{margin-top:10px;display:block;}

        #misha_featured_image a.misha_upload_featured_image{

            display:inline-block;

            margin:10px 0 0;

        }

        #misha_featured_image img{

            display:block;

            max-width:200px !important;

            height:auto;

        }

        #misha_featured_image .misha_remove_featured_image{

            display:none;

        }

    </style>';



}



add_action( 'admin_enqueue_scripts', 'misha_include_myuploadscript' );

function misha_include_myuploadscript() {

    if ( ! did_action( 'wp_enqueue_media' ) ) {

        wp_enqueue_media();

    }

}



add_action('quick_edit_custom_box',  'misha_add_featured_image_quick_edit', 10, 2);

function misha_add_featured_image_quick_edit( $column_name, $post_type ) {



    // add it only if we have featured image column

    if ($column_name != 'featured_image') return;



    // we add #misha_featured_image to use it in JavaScript in CSS

    echo '<fieldset id="misha_featured_image" class="inline-edit-col-left">

        <div class="inline-edit-col">

            <span class="title">Featured Image</span>

            <div>

                <a href="#" class="misha_upload_featured_image">Set featured image</a>

                <input type="hidden" name="_thumbnail_id" value="" />

                <a href="#" class="misha_remove_featured_image">Remove Featured Image</a>

            </div>

        </div></fieldset>';



        // please look at _thumbnail_id as a name attribute - I use it to skip save_post action



}



add_action('admin_footer', 'misha_quick_edit_js_update');

function misha_quick_edit_js_update() {



    global $current_screen;



    // add this JS function only if we are on all posts page

    if (($current_screen->id != 'edit-post') || ($current_screen->post_type != 'post'))

        return;



        ?><script>

        jQuery(function($){



            $('body').on('click', '.misha_upload_featured_image', function(e){

                e.preventDefault();

                var button = $(this),

                 custom_uploader = wp.media({

                    title: 'Set featured image',

                    library : { type : 'image' },

                    button: { text: 'Set featured image' },

                }).on('select', function() {

                    var attachment = custom_uploader.state().get('selection').first().toJSON();

                    $(button).html('<img src="' + attachment.url + '" />').next().val(attachment.id).parent().next().show();

                }).open();

            });



            $('body').on('click', '.misha_remove_featured_image', function(){

                $(this).hide().prev().val('-1').prev().html('Set featured Image');

                return false;

            });



            var $wp_inline_edit = inlineEditPost.edit;

            inlineEditPost.edit = function( id ) {

                $wp_inline_edit.apply( this, arguments );

                var $post_id = 0;

                if ( typeof( id ) == 'object' ) { 

                    $post_id = parseInt( this.getId( id ) );

                }



                if ( $post_id > 0 ) {

                    var $edit_row = $( '#edit-' + $post_id ),

                            $post_row = $( '#post-' + $post_id ),

                            $featured_image = $( '.column-featured_image', $post_row ).html(),

                            $featured_image_id = $( '.column-featured_image', $post_row ).find('img').attr('data-id');





                    if( $featured_image_id != -1 ) {



                        $( ':input[name="_thumbnail_id"]', $edit_row ).val( $featured_image_id ); // ID

                        $( '.misha_upload_featured_image', $edit_row ).html( $featured_image ); // image HTML

                        $( '.misha_remove_featured_image', $edit_row ).show(); // the remove link



                    }

                }

        }

    });

    </script>

<?php

}

If you want more details on how this works and what each part of code does, refer to the tutorial by Misha Rudrastyh.