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

Posted by Stu Cowley
Stu Cowley
26,287 Points

JavaScript and WordPress

Hey guys,

The Problem

So I'm finally building out my HTML prototype into WordPress and I have hit my first snag that I just cannot put a finger on.

The problem I am having as the title suggests relates to JavaScript.

I'm using a couple of jQuery plugins that require additional code just before the close body tag. I have successfully added the plugins required inside of the functions.php.

The Code

The code that I need to implement in order for the plugin to work correctly I need to added the below code at the end of each page.

$(document).ready(function() {
    $('.nav-pills li.dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
});

// other code to follow on, but I won't include to save on space

I'm using a Bootstrap's Nav-Pills and I need to add the functionality of the sub-menus to open on hover instead of clicking on them to open (if that makes sense).

I would be incredibly thankful of any advice on how I can successfully go about this.

Thanking you in advance

Stu : )

4 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Are you wrapping everything in no conflict tags?

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Maybe I'm not understanding your question exactly, but what I understood was you're trying to get that jQuery, and a few other bits of code to activate some plugins added just before the close of the body tag.

If so, the easiest is to just start a new JS file, and add these bits of code to it. How you list the order of your JS files in your function that enqueues them determines the order at which the are on the page.

So you'd want add this JS file with this code as the last file to get enqueued.

Refer back to this documentation: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

The last argument you can pass into this function to enqueue your JS script is whether to put it in the footer. If you set it to true it will put the file just before the closing body tag.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Stu, just to clarify, you need this code:

  $(document).ready(function() {
                $('.nav-pills li.dropdown').hover(function() {
                    $(this).addClass('open');
                }, function() {
                    $(this).removeClass('open');
                });
    });

to show up at the bottom of very page?

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

I won't try and pretend I know what I'm doing so I'll try and describe what I'm trying to do the best I can (again) as this sort of thing is out of my usual comfort zone.

I have my HTML prototype and I need to add a few things after the jQuery plugin has been included into my HTML page in order for the plugin to work correctly.

        HTML page content above
        <!-- javascript -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/simpleWeather.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('.nav-pills li.dropdown').hover(function() {
                    $(this).addClass('open');
                }, function() {
                    $(this).removeClass('open');
                });
            });
        </script>
    </body>
</html>

If this makes no sense once again, I think I will need to go over and do some more WordPress courses.

Stu : )

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I think that my suggestion still fits here. The code you need to add at the bottom to initiate the plugins I would have that code in it's own JS file, just like the plugins have their own, and I would enqueue that JS files as the very last file in your functions.php file. That should give you the desired results.

I think Zac is looking at the other side of it. If you do that, and you get this code included in your source page, and it's still not working, than follow Zac's advice with the no conflict tags.

If you're still confused, Zac does something similar in the lesson where he builds a custom theme, and if memory serves me correct the file he uses he just calls app.js to hold all of this kind of code.

Stu Cowley
Stu Cowley
26,287 Points

Awesome stuff Kevin Korte! That makes perfect sense, I don't know why I didn't think of doing that.

I might take a look again at the "Build a Custom Theme" course again, but I can't seem to find it, could it be because you guys are doing a new version of it?

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

No problem. It's in this video Zac does what you're trying to do http://teamtreehouse.com/library/how-to-build-a-wordpress-theme/preparing-to-code-wordpress-templates/linking-javascript-2

Although the theme file he uses is theme.js not app.js -- however the name of the file isn't important, it could be called anything that is a valid file name.

Stu Cowley
Stu Cowley
26,287 Points

Cool, thanks for that, I'll jump over there right away and hopefully I can make some sense of it all! : )