Grow your CSS skills. Land your dream job.

WORDPRESS: Added wp_head() to header and now my jquery scripts do not work

  • # July 1, 2013 at 2:56 pm

    I recently added the `wp_head()` tag to my header before ``, in order to get my Woocommerce custom CSS working.

    Without that tag my Woocommerce Pages are totally plain with no styling to any of the elements.

    After adding to header, my Jquery scripts stopped working.
    I currently have these scripts included//
    [http://pastebin.com/dw2FMYMZ](http://pastebin.com/dw2FMYMZ “http://pastebin.com/dw2FMYMZ”)

    When I view my page the flexslider doesn’t change slides at all. I also have a slideDown/slideUp animation on my drop down menu. But that doesn’t work either it just appears instead of animating…

    The overall issue is `wp_head()` interfering with scripts…

    I tried adding

    if( !is_admin()){
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"), false, '1.10.1');
    wp_enqueue_script('jquery');
    }

    But all that does is remove my flexslider completely, and leaves the container blank.

    What can I do to be sure that, while using `wp_head()`, my other jQuery plugins will still work?

    PLEASE, help.
    Thanks in advance!

    # July 1, 2013 at 3:37 pm

    Can you make a codepen of the header.php file that you put the wp_head() call in? It should have already had that call in there, it’s theme dependent but most of them do.That’s why I’m curious. Also what theme are you using?

    # July 1, 2013 at 4:31 pm

    @JohnMac4 I created this theme from scratch, so the `wp_head()` was not originally included…
    Here is a codepen of my [header.php]( http://codepen.io/anon/pen/Ftonehttp://codepen.io/anon/pen/Ftone“)

    # July 1, 2013 at 6:31 pm

    @JohnMac4 If any other files need to be viewed in order to try and help me fix this… please let me know.

    # July 1, 2013 at 6:33 pm

    I would guess it might be because you have not enqueued your scripts. Check out the codex here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    # July 1, 2013 at 6:44 pm

    @eristic So for flexslider I’d use//

    function my_scripts_method() {
    wp_enqueue_script(
    'flexslider',
    get_template_directory_uri() . '/inc/js/jquery.flexslider.js',
    array( 'jquery' )
    );
    }

    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

    ?

    This is all new to me.

    Thanks for your time and help by the way.

    # July 1, 2013 at 7:59 pm

    @erisitc Or am I suppose to add the Google Library some how?

    # July 2, 2013 at 3:18 am

    I managed to get my flexslider and animated drop down menu to work again…
    I have a Videos page that has a separate header and there is no flexslider included.
    There I hovered over my navigation and the drop down menu is animated.
    So that is when I came to realize it had to be the flexslider causing the issue.

    So I went to my main header.php and removed flexslider.js and easing.js.
    Visited my page, and the animation worked.
    I didn’t want a blank container though! So I went back into header.php, added the easing and flexslider again. Then instead of both I only removed the easing.js plugin…

    Visited my page once more and now the slider as well as the animated menu works.
    I have no idea why easing.js caused such a problem…
    I wish I was a programmer/developer to understand!!!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".