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

Nathalie C
Nathalie C
2,594 Points
Posted by Nathalie C
Nathalie C
2,594 Points

How to build a wordpress theme and including javascripts in one file

Still ploughing my way through 'How to build a wordpress theme' In 'Linking javascript' video i am now trying to add the flex slider bit, but whichever way I include it in my js file, it breaks my accordion. Javascript is not my strongpoint so any pointers anyone? I've tried adding it after the accordion but within the jQuery document ready $ function but it doesnt work. So i thought i'd wrap it in another jQuery doc ready but that didnt work either. So that's me stumped. (i'm just adding script in another reply as it didnt work in this one.

4 Answers

Nathalie C
Nathalie C
2,594 Points
Nathalie C
Nathalie C
2,594 Points

I've managed to fix it by making sure that the flexslider.js is loaded for every page via function.php rather than just home page, as I've included the $('.flexslider').flexslider(); on the general wordpress theme js file. The accordion script did need to be within the JQuery for the $ to work with Wordpress I think. It breaks if I remove it. Anyhow, it's now working. But an alarming number of external http requests due to css and js files that wordpress seems to need. Ouch. Surely it's better to try and include all one one file?

Nathalie C
Nathalie C
2,594 Points
Nathalie C
Nathalie C
2,594 Points 
jQuery(document).ready(function($) {

function accordion() {
    $("body").addClass("enhanced");
    $(".accordion > li.top-level").find("ul").hide();

    $(".accordion > li.top-level > a").click(function() {
        if ($(this).parent().find("ul#menu-acc-menu").is(":visible")) {
            $(this).parent().removeClass("selected");
            $(this).parent().find("ul#menu-acc-menu").slideUp("slow");
        }
        else {
            $(this).parent().addClass("selected");
            $(this).parent().find("ul#menu-acc-menu").slideDown("slow");
        }
    });

}

$(accordion);

});


if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
  var viewportmeta = document.querySelector('meta[name="viewport"]');
  if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
    document.body.addEventListener('gesturestart', function() {
      viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
    }, false);
  }
}
Nathalie C
Nathalie C
2,594 Points
Nathalie C
Nathalie C
2,594 Points

The bit i'm trying to add is 

$('.flexslider').flexslider();
Chris Scott
Chris Scott
7,673 Points
Chris Scott
Chris Scott
7,673 Points

try just doing accordion(); as you don't need jQuery to call the function.

Also any associated console errors when you try to use the script?