Category Archives: PHP MySQL

WordPress : Set first image of the content as featured image

If you’ve migrated your blog from another platform to WordPress or changed your theme, you may be wondering why some post thumbnails aren’t being displayed anymore. This could be because the featured image for that particular blog-post isn’t set. If you’ve very few posts, you can do it by editing those posts and set a featured image manually, but what if you’ve hundreds or thousands of blog-posts?

In that case, rather than to edit each post and set a featured image manually, you can use the following code snippet. This snippet will set the first embedded image from the content as the featured image – only if there is no featured image been set. For any external images, it also creates a media file and stores it in a WordPress Media Library. This is very useful to generate and set featured images in bulk.

Add the below code snippet in the functions.php file of your active WordPress theme, and load All Posts ( {YOUR-DOMAIN}/wp-admin/edit.php ) page or any single post page, and it will do the magic.

// Get the first embedded image from the content
function catch_the_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
if ( isset( $matches[1][0] ) ) {
$first_img = $matches[1][0];
}
return $first_img;
}
// Set auto featured image
function set_featured_image() {
global $post;
$post_id = $post->ID;
if ( strlen( catch_the_first_image() ) >= 5 && get_the_post_thumbnail( $post_id ) == '' ) {
$image_url = get_site_url() . catch_the_first_image();
$arrContextOptions = array(
"ssl" => array(
"verify_peer"=>false,
"verify_peer_name"=>false,
),
);
$upload_dir = wp_upload_dir();
if ( is_ssl() ) {
$image_data = file_get_contents( $image_url, false, stream_context_create( $arrContextOptions ) );
}
else {
$image_data = file_get_contents( $image_url );
}
$filename = basename( $image_url );
if( wp_mkdir_p( $upload_dir['path'] ) ) {
$file = $upload_dir['path'] . '/' . $filename;
}
else {
$file = $upload_dir['basedir'] . '/' . $filename;
}
file_put_contents( $file, $image_data );
$wp_filetype = wp_check_filetype( $filename, null );
$attachment = array(
'post_mime_type' => $wp_filetype['type'],
'post_title' => sanitize_file_name( $filename ),
'post_content' => '',
'post_status' => 'inherit'
);
$attach_id = wp_insert_attachment( $attachment, $file, $post_id );
require_once( ABSPATH . 'wp-admin/includes/image.php' );
$attach_data = wp_generate_attachment_metadata( $attach_id, $file );
wp_update_attachment_metadata( $attach_id, $attach_data );
set_post_thumbnail( $post_id, $attach_id );
}
}
// Use it temporary to generate all featured images
add_action('the_post', 'set_featured_image');

view raw
functions.php
hosted with ❤ by GitHub

Once you verify that all the featured images been set properly, you can remove the above code snippet from the functions.php.

* Photo credit: Guilherme Vasconcelos on Unsplash

Get browser window size using jQuery (useful for responsive web design)

I am sharing a very useful bit of code I use to get the window width when making responsive sites.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get browser window size using jQuery (useful for responsive testing)</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).bind({
load:function(){
var windowSize = $(window).width();
$('p.window-width').text('Window width = ' + windowSize + 'px');
},
resize:function(){
var windowSize = $(window).width();
$('p.window-width').text('Window width = ' + windowSize + 'px');
},
});
</script>
</head>
<body>
<h1>Resize your browser window to get width:</h1>
<p class="window-width"></p>
</body>
</html>

view raw
responsive.html
hosted with ❤ by GitHub

Please comment below if you have any better solution.

Debug WordPress White Screen of Death and other Errors

After so many requests asking about “WordPress white screen of death”, I would like to quickly share my strategy I use in most of the WordPress installs I manage which allow me to quickly switch on debug mode when required.

In the file wp-config.php, which can be found in your WordPress root, search for variable WP_DEBUG and replace it with

if (isset($_GET['debug']) && $_GET['debug']=='debug_mode') {
    error_reporting(E_ALL); ini_set('display_errors', 1);
    define('WP_DEBUG', true);
}

Now you can open any page, and if something goes wrong there, like a white screen of death, you can add ?debug=debug_mode to the end of its URL and check what’s causing the trouble. Eg. http://www.mywordpresssite.com?debug=debug_mode

I hope this helps.