Check if the_content is empty

In this short tutorial I am going to show you how you can easily check if the_content is empty or not. Well sometimes adding demo content in all page is really a big headache. But you don’t have a choice if your clients says it to do so. Adding demo content in all page to see everything look fill. We will do that in a page.php or any other cms page template you have defined.

Check if the_content is empty


if($post->post_content=="")
{
//whatever you want to be there if there is no content
} else {
the_content();
}

Detect duplicate image

Hi folks, today in this tutorials I am going to show you how anyone can easily detect duplicate image inside the page and remove one of them. I am writing this tutorial because recently I have been working in a inbuilt wordpress project where the content and images was already loaded. My job was to create a new theme with existing content. When I import those content in the new theme I found that in all post there were same image repeating. One is coming from feature image and another one was hard coded inside the page. Both the image was coming form the same path. With trying with some simple jQuery script I was able to accomplished this job.

This is how I detect duplicate image with the help of jQuery.

Detect duplicate image with jQuery


$(function(){
    var srcs = [],
        temp;
    $("body img").filter(function(){
        temp = $(this).attr("src");
        if($.inArray(temp, srcs) < 0){
            srcs.push(temp);   
            return true;
        }
        return false;
    }).remove();
});

I hope you find this tutorial helpful. Thanks for reading.

conditional statement featured image

WordPress featured image allow you to upload an image inside your dashboard post and pages. The featured image box is usually on the bottom right corner(may be you need to scroll down to see the box when you land to add new page).
Sometimes we don’t have feature image and our area for the feature image remain blank. In this tutorial I am going to show you how we can use conditional statement featured image to fill up the area in the absences of Featured image.

Conditional statement featured image

Copy below code and paste it inside the function.php of your theme folder.


function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];

//no image found display default image instead
   if(empty($first_img)){
   $first_img = "/images/default.jpg";
}
return $first_img;
}

Now go to the loop page where the feature image is displaying.


<figure>
<?php if(has_post_thumbnail() ) { ?>
twentyfifteen_post_thumbnail();
<?php } else { ?>
<a href="<?php the_permalink();?>">
<img src="<?php echo catch_that_image()?>" alt="<?php the_title();?>" />
</a>
<?php } ?>
</figure>

Hope it helps. 🙂
Thank you for reading this article.

Enable source map config.rb

Source map is a sass 3.3 latest features that allow you to inspect the css inside the sass file directly in the web browser’s inspect element. Using source map and compiling, it will generate a new file named with an extension .map
For eg: If your css file name is style.css then in the same css directory there will be another new file created by compiler called style.css.map.

How to enable source map config.rb

Demo folder structure for sass and css.


sass/style.scss
css/style.css
css/style.css.map
config.rb

Add this line at the bottom of config.rb
sourcemap = true

This file is what you need to make source map working via compass. Now we have the required files needed to work with source map.

The second step is to activate the source map working for the browsers. Right now this is available only in chrome. In order to activate this feature in your chrome browsers you need to open the “inspect element” bar by hitting F 12 or click on mouse right button and then click on Inspect Element.

Click on the setting gear icon on the top right corner of Inspect Element. Under the “Source” tick the checkbox that says “Enable CSS source maps”

enable source map

Now edit your sass file and compile it. Go to your browser and inspect the website, you should see your sass file name coming with line numbers instead of css file.

Thank you for reading this tutorials.