Welcome To Snippets.Cloud - The Biggest Code Snippets Library For WordPress
One-Click “Set as Featured Image” Button for Any Image Block (Classic & Custom Themes)
Why it’s new and useful:
WordPress 6.8 introduced the ability to set any image block as the featured image directly from the editor interface, streamlining workflows for content creators. However, in classic themes or custom workflows, this feature may not be as visible or you might want to offer a similar shortcut in the admin post list or a custom meta box. This snippet adds a “Set as Featured Image” button below every image in the post editor (Classic Editor), making it super easy for editors to set the featured image without scrolling or switching panels.
1. Add the Snippet to Your Theme’s functions.php or a Custom Plugin
// Add "Set as Featured Image" button below images in the Classic Editor
add_filter('the_content', function($content) {
if (!is_admin() || !current_user_can('edit_posts')) return $content;
// Add button after each <img> tag in the editor
$content = preg_replace_callback(
'/<img[^>]+src="([^"]+)"[^>]*>/i',
function($matches) {
$img = $matches[0];
$src = esc_url($matches[1]);
$button = '<button class="set-featured-image-btn" style="display:block;margin:6px 0 18px 0;padding:4px 10px;font-size:12px;cursor:pointer;" data-img="' . $src . '">Set as Featured Image</button>';
return $img . $button;
},
$content
);
return $content;
});
// Enqueue the JS to handle the button click
add_action('admin_footer', function() {
global $pagenow;
if ($pagenow !== 'post.php' && $pagenow !== 'post-new.php') return;
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.set-featured-image-btn').forEach(function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
var imgUrl = btn.getAttribute('data-img');
// AJAX call to set featured image
var data = new FormData();
data.append('action', 'set_featured_image_by_url');
data.append('img_url', imgUrl);
data.append('post_id', document.getElementById('post_ID').value);
fetch(ajaxurl, { method: 'POST', credentials: 'same-origin', body: data })
.then(response => response.json())
.then(res => {
if(res.success) {
btn.innerText = 'Featured Image Set!';
setTimeout(() => { btn.innerText = 'Set as Featured Image'; }, 2000);
} else {
alert('Failed to set featured image.');
}
});
});
});
});
</script>
<?php
});
// AJAX handler to set featured image by URL
add_action('wp_ajax_set_featured_image_by_url', function() {
if (!current_user_can('edit_posts')) wp_send_json_error();
$post_id = intval($_POST['post_id']);
$img_url = esc_url_raw($_POST['img_url']);
// Try to get attachment ID by URL
$attachment_id = attachment_url_to_postid($img_url);
if ($attachment_id && get_post($attachment_id)) {
set_post_thumbnail($post_id, $attachment_id);
wp_send_json_success();
} else {
wp_send_json_error();
}
});
PHP2. How It Works
- In the Classic Editor, every image in your post will have a “Set as Featured Image” button below it.
- Clicking the button instantly sets that image as the post’s featured image (if it’s in your media library).
- Works for editors and admins, and is a huge time-saver for content-heavy sites.
. Features
- No plugins required—just a code snippet.
- Streamlines editorial workflow for classic and custom themes.
- Instant feedback when the featured image is set.
- Leverages WordPress 6.8’s focus on workflow improvements for content creators.
