javascript - How to insert jQuery code in Avada theme? - Stack Overflow

admin管理员组

文章数量:1187682

I want to insert a simple jQuery code in my Wordpress theme (Avada), something like this:

$(function() {
    $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }});
    $( "#accordion" ).accordion();

    var btn = $('#accordion li a');
    var wrapper = $('#accordion li');

    $(btn).on('click', function() {
        $(btn).removeClass('active');
        $(btn).parent().find('.addon').removeClass('fadein');

        $(this).addClass('active');
        $(this).parent().find('.addon').addClass('fadein');
    });
});

In a page, but it doesn't work.

I tried to use different classes to all the HTML elements and to insert my code with a plugin named "CSS & Javascript Tool box", but it didn't helped.

I want to insert a simple jQuery code in my Wordpress theme (Avada), something like this:

$(function() {
    $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }});
    $( "#accordion" ).accordion();

    var btn = $('#accordion li a');
    var wrapper = $('#accordion li');

    $(btn).on('click', function() {
        $(btn).removeClass('active');
        $(btn).parent().find('.addon').removeClass('fadein');

        $(this).addClass('active');
        $(this).parent().find('.addon').addClass('fadein');
    });
});

In a page, but it doesn't work.

I tried to use different classes to all the HTML elements and to insert my code with a plugin named "CSS & Javascript Tool box", but it didn't helped.

• javascript
• jquery
• wordpress

Share Improve this question Follow edited May 17, 2016 at 10:18 vard 4,13622 gold badges2828 silver badges4949 bronze badges asked May 17, 2016 at 9:16 sahnassahnas 6311 gold badge22 silver badges66 bronze badges 5

• did you replace the '$' sign to 'jQuery'? – rafahell Commented May 17, 2016 at 9:31
• add it to wp_footer and replace $ with jQuery please and futher reading here:codex.wordpress.org/Plugin_API/Action_Reference/wp_footer – wui Commented May 17, 2016 at 9:51
• How exactly did you insert your JS "in a page"? Did you added it in a script tag inside the page template? – vard Commented May 17, 2016 at 10:21
• I trid to replace $ by JQuery, but it's do not work :( – sahnas Commented May 17, 2016 at 10:31
• I used a plugin name CSS & Javascript toolbox – sahnas Commented May 17, 2016 at 10:32

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 20

You are using Avada theme, go to theme options->Advance->Code Fields (Tracking etc.), you will see three text boxes you need to add your code in the second box (Space before ). Place code inside tags. I am attaching the screenshot.

First don't use any CSS/JS plugin, it's a terrible idea as such plugins are usually the reason for major security issues and doesn't provide any good maintainability.

Here is the proper way to add Javascript in Wordpress :

In your child theme (because you created a child theme to Avada in order to be able to update it at any time, right? :) ), add the following function in your functions.php file:

function my_theme_scripts() {
    wp_register_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', array('jquery'), '1.11.2', true);
    wp_enqueue_script('jquery-ui');
    wp_register_script('tabs-scripts', get_stylesheet_directory_uri() . '/js/tabs-script.js', array('jquery', 'jquery-ui'), '1.0', true);
    wp_enqueue_script('tabs-scripts');
    wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

This will tell Wordpress to add the appropriate script tag to link to tabs-scripts.js located in your theme js directory at the footer of every page, and to load the jQuery UI dependency. See wp_register_script documentation for reference.

Then, create your tabs-scripts.js file in your js directory and add the following script:

jQuery(document).ready(function($) {
    if($('#tabs').length && $('#accordion').length) {
        $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }});
        $( "#accordion" ).accordion();

        var btn = $('#accordion li a');
        var wrapper = $('#accordion li');

        $(btn).on('click', function() {
            $(btn).removeClass('active');
            $(btn).parent().find('.addon').removeClass('fadein');

            $(this).addClass('active');
            $(this).parent().find('.addon').addClass('fadein');
        });
    }
}

This will ensure two things:

• That $ is available and reference to jQuery
• And the appropriate DOM elements #tabs and #accordion are in the page before running the script.

If it doesn't work check that the script is added to the page, and that the ($('#tabs').length && $('#accordion').length)) is fulfilled.

Simply add your script code to your functions.php file. What this does is centralize your script code without much work. Your only requisite is that you have JQuery defined before you consume the script.

There are many ways to solve what you are asking but I tend to lean towards getting the information from the source. The link below will hopefully help.

https://codex.wordpress.org/Using_Javascript

本文标签： javascriptHow to insert jQuery code in Avada themeStack Overflow