Featured Images in Quick Edit
If you work with your custom theme, I hope you know that you must begin with the add_theme_support( 'post-thumbnails' )
in your functions.php
file, because it activates the featured images functionality.
Step 1. Featured Image Column, why not?
The Quick Edit option works with the help of columns. So, unless you have a column for your custom quick edit option, it won’t work.
You can copy the below code even without changes to your current theme functions.php
file.
/* * 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 some CSS to Admin Area
Actually this is not required step at all but if you want columns and your new quick edit option look beautiful, add this to your functions.php
too:
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>'; }
Once done, you should get something like this:
Step 2. Add Featured Image option to Quick Edit and update it with JavaScript
2.1 Connect the Plupload Scripts if necessary
I will use WordPress default uploader, so first of all you have to enqueue its scripts and styles, you can do it simple enough with this code.
add_action( 'admin_enqueue_scripts', 'misha_include_myuploadscript' ); function misha_include_myuploadscript() { if ( ! did_action( 'wp_enqueue_media' ) ) { wp_enqueue_media(); } }
2.2 Add Quick Edit fields (featured image in our case)
You have to notice that we do not have the code here for updating the featured image hidden field with the actual values – it is because the values will be updated via JavaScript in the step 2.3.
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 }
Did I forget something? No. But.. what about code that should update the featured image itself?
When you add your custom fields to the Quick Edit, usually you have to update the field values in save_post
action but in this case I use _thumbnail_id
value for the field name attribute, so it is the default field name for featured images:
- when I pass a number to it, the attachment with the specific ID will be set as featured image
- when I pass
-1
, the featured image will be removed.
So, it is no more action required here ๐
2.3 Some JavaScript Magic
The first part of the below code is the script for our upload button, the second part of the code will update the featured image field when you click “Quick Edit” link.
<?php 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 }
And the result. It is great, isn’t it? ๐ค
What do you think? Should I publish the complete Quick Edit tutorial?
Comments — 31
gold!
pls publish the complete Quick Edit tutorial !
Ok, next Tuesday ๐
thanks in advance! cant wait !
here it is ๐
thank you. i am using admin col pro for this purpose. just to share.
Hi, this is awesome! Please publish the complete Tutorial.
Great tut! Thanks a lot!
Very nice work, I like all you posts.
Thank you very much! ๐
How Can I add the same for custom post type?
Hi Robert,
In Step 1:
In Step 2.3
Btw, do not forget to turn on featured images for your custom post type
Hello, Misha
All right?
I’m testing this tutorial, but I noticed that the remove highlighted image function is not working in the quick edit part.
I copied and pasted your tutorial exactly.
Would you help me?
Hello Wesley,
Are there any errors in your browser console?
Thanks for the prompt return .. does not return any error.
Watch the video, it does not return any error. :)
https://youtu.be/P1K1X2jqV1s
Please sorry for such a big delay.
Yes, the closing
div
was in the incorrect place (step 2.2).It should be OK now ๐
Worked perfectly, thank you, thank you.. ;)
Always welcome ๐
Hi Misha ! First of all, thanks a lot for all your tricks, code and answers ! Best code blog I’ve seen so far.
I would just like to know if we can use the same logic as for the custom post type to show the featured image of pages ?
Hi,
Thank you so much!
Sorry I missed your comment… Yes, sure ๐
Hi Misha. Thanks for this great tutorial. One question I have: Where do I have to add the code from 2.3? Is this a separate php-file cause of the <?php tags in the code? Or did I miss something? Many thanks in advance.
Hi Gunther,
It can be your theme
functions.php
file.Ok, many thanks Misha โฆ but then without the extra php-tags of 2.3, isn’t it?
Definitely!
I followed the tutorial and the featured image column shows up in the admin editor but doesn’t show up in the quick edit nor does the set feature image link work.
WordPress 5.2.1 with classic editor plugin
Hi,
I copied the code from this tutorial to my theme right now and everything is working for me.
Hi Misha, it is working flawless, but I’d love to update an image custom field, which is like a feature image.
Following your tutorial I guess the key to update an image, other than a feature image, is this line:
Where I should use “acf[field_5ce0d387f89f1]” instead of “_thumbnail_id”.
I got this name from Edit Post page and I can update the custom field by changing the value: .
So what I mean is, as a test, if I update this number through Inspector, from my browser, and then update the post, it works.
However in Quick Edit panel it doesn’t work.
Is my approach correct?
Thanks
Hi Daniel,
I am not so familiar with acf plugins, but I can recommend you to check how your custom image field is stored in wp_postmeta table, what is its meta_key?
I missed your reply for a while. I was expecting some notification in my email :-/ Anyway, thanks for your time!
I think I figured out.
To be honest I am newbie in WordPress coding, but I’m being able to customize my website, thanks to guys like you!
Each Custom Field has a key, or a name associated and all I had to do was to use the ‘save_post’ hook and the following command:
Much easier than I was thinking!
Great tutorial :)
Thanks,
Comments are closed.