How to add Lightbox Effect in Embedded Photos in WordPress Without Any Plugin

There are many websites based on WordPress which comes with lightbox effect. Clicking on post images opens Images in a cool lightbox. If your theme does not have this lightbox effect for images, you can manually add this effect in theme with few lines of code

For this, we are going to use popular lightbox plugin by lokesh Dhakar. I also used this lightbox plugin in my recently launched free personal portfolio template. Download the lightbox plugin from official website. Now upload the js file and css file of the plugin to themes folder. Include both JS and CSS files in header.php of your theme. Be sure to check the path of files.

<script src="lightbox/js/lightbox-2.6.min.js"></script>
<link href="lightbox/css/lightbox.css" rel="stylesheet" />

Next step is to add rel=”lightbox” in all images which you want to open in lightbox. You can use the following code to automatically add rel=”author” in all post images.

Now add this code in functions.php file of your theme.

add_filter('the_content', 'add_lightboxrel');
function add_lightboxrel($content) {
       global $post;
       $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
}

If you do not want to edit theme manually, you can install freely available plugins for this. There are many WordPress plugins which automatically add lightbox effect in WordPress websites.