Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Edyta Berghauzen
Edyta Berghauzen
8,677 Points

Install jQuery Plugin into Wordpress Theme

Hi, I`m trying to add this jQuery plugin: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/ to my Wordpress Child theme of Responsive (http://cyberchimps.com/responsive-theme/). The problem is after some heavy research, I got lost and have no idea how to add an external jQuery to a Wordpress theme.

Here is how I've tried to do that without success:

  1. Html identical as in the plugin's exemple.

  2. functions.php.

<?php
function modify_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2');
        wp_enqueue_script('jquery');
        wp_register_script('modernizr_script', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
        wp_enqueue_script('modernizr_script');       
        wp_register_script('grid_script', get_stylesheet_directory_uri() . '/js/grid.js', array('jquery'), false, false);
        wp_enqueue_script('grid_script');
    }
}
?>
  1. sidebar-home-widgets-triple.php - at the end of the template file.
<script>
var $ = jQuery.noConflict();
jQuery(document).ready(function() {
    Grid.init();
});
</script>

Many thanks!

4 Answers

Kevin Korte
Kevin Korte
28,109 Points

First question is when you look at your source code, do you see the grid plugin file, and your grid init call?

Kevin Korte
Kevin Korte
28,109 Points

Were you able to get the HTML output to match what's there for the plugin?

Edyta Berghauzen
Edyta Berghauzen
8,677 Points

Yes. Perhaps the grind init call is wrong... I`ve tried another thing which isn't apparently the way to do it but partially worked. I put this code to the sidebar-home-widgets-triple.php:

<script type="text/javascript"> 
    var $ = jQuery.noConflict();
    </script>

    <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/modernizr.custom.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/grid.js"></script>
    <script>
    $(function(jQuery) 
    { 
        Grid.init(); 
    });
    </script>

Besides the fact it's apparently wrong way there is another problem. When I click on a thumbnail it opens the expansion div correctly. But when I click on close button the expansion folds but the gap related to the expansion doesn'`t.