If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

WordPress. How to disable lightbox effect for shortcode posts

This tutorial is going to show you how to disable lightbox effect for posts loaded via shortcodes in WordPress templates.

WordPress. How to disable lightbox effect for shortcode posts

Unfortunately, you cannot disable the lightbox effect for posts loaded via shortcodes in the WordPress admin panel. You should perform the following steps:

  1. Log into your WordPress admin panel, navigate to Pages tab and open the page that loads posts you want to edit.

    NOTE: You can use WordPress Admin Bar to access the required page from the site frontend (see the screenshot below):

    Wordpress_disable_lightbox_effect_in_shortcodes_posts1

  2. In the Text area of the post editor find the shortcode that loads posts, for example, post_grid in our case. It will look the similar way:

      [posts_grid type="team" columns="5" rows="1" order_by="date" order="DESC" thumb_width="205" thumb_height="205" meta="no" excerpt_count="0" link="yes" link_text="view info" custom_class="profiles"]
      

    In this shortcode you should find custom_class="profiles". You will use the value of the custom class attribute in the new script:

    Wordpress_disable_lightbox_effect_in_shortcodes_posts2

    NOTE: If you don’t have custom class attribute in the shortcode, add it with any value. Don’t forget to click Update button to save changes on the page.

  3. Now you should add an additional script that will disable lightbox effect for this custom class. Please connect your FTP account or open File Manager and go to /wp-content/themes/themeXXXXX/js folder (where XXXXX is the number of your theme). You will find my_script.js file there. Open this file via any code editor, for example, Notepad++.

    IMPORTANT: Always make a copy of the file that you are going to edit. It will help you to revert your changes easily, if you need it.

  4. Add the following script in the very end of the file before the closing })(jQuery) tag:

        jQuery(document).ready(function(){
    	  jQuery('.posts-grid.posts-grid-two figure a[rel*="prettyPhoto"]').attr('rel','');
    	  jQuery('.posts-grid.posts-grid-two figure a').click(function(e) {
    		e.preventDefault();
    	  });
        });
       
  5. In this script you should change "posts-grid.posts-grid-two" class to your custom class from the shortcode, "profiles" class in our case. The edited script will look the following way:

    	
        jQuery(document).ready(function(){
    		jQuery('.profiles figure a[rel*="prettyPhoto"]').attr('rel','');
    		jQuery('.profiles figure a').click(function(e) {
    			e.preventDefault();
    		});
        });
      
  6. Save changes in the file. Refresh the page to check changes on your site. We can see that the lightbox effect was disabled successfully.

  7. To remove zoom style from your images you should add the following rules in the very end of the /wp-content/themes/themeXXXXX/style.css file:

    .profiles .zoom-icon {
    background: none!important;
    }
    
    .profiles .zoom-icon:before {
    background: none!important;
    }
    

    Change the class ".profiles" to your custom class in that CSS rules. Don’t forget to save changes in the file.

    Wordpress_disable_lightbox_effect_in_shortcodes_posts3

This is the end of the tutorial. Now you know how to disable lightbox effect for posts loaded via shortcodes.

Feel free to check the detailed video tutorial below:

WordPress. How to disable lightbox effect for shortcode posts