Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Edyta Berghauzen
Edyta Berghauzen
8,677 Points
Posted by 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,148 Points
Kevin Korte
Kevin Korte
28,148 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,148 Points
Kevin Korte
Kevin Korte
28,148 Points

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

Edyta Berghauzen
Edyta Berghauzen
8,677 Points
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.