Support » Developing with WordPress » How to insert a jQuery script in a wordpress page?

  • I need to use a toggle function in a part of a page, but isn’t working.
    The code I’m trying to use is:

    <script type=”text/javascript”>
    jQuery.fn.toggleText = function(a,b) {
    return this.html(this.html().replace(new RegExp(“(“+a+”|”+b+”)”),function(x){return(x==a)?b:a;}));
    }

    $(document).ready(function(){
    $(‘.tgl’).before(‘<span>Revelar conteúdo</span>’);
    $(‘.tgl’).css(‘display’, ‘none’)
    $(‘span’, ‘#box-toggle’).click(function() {
    $(this).next().slideToggle(‘slow’)
    .siblings(‘.tgl:visible’).slideToggle(‘fast’);
    // aqui começa o funcionamento do plugin
    $(this).toggleText(‘Revelar’,’Esconder’)
    .siblings(‘span’).next(‘.tgl:visible’).prev()
    .toggleText(‘Revelar’,’Esconder’)
    });
    })
    </script>

    <div id=”box-toggle”>

    <div class=”tgl”>
    <h2>Conteúdo um</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer…</p>
    </div>

    <div class=”tgl”>
    <h2>Conteúdo dois</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer…</p>
    </div>

    <div class=”tgl”>
    <h2>Conteúdo três</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer…</p>
    </div>

    </div>

    My questions is, Where do I need to put this codes?
    I’m personalizing a page in html editor, because I need some contents to be organized as a toggle menu. I never used codes like that, so I need help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    For simple scripts like that, you can put it on the template where it’s needed. When you need to alter template files, you should create a child theme or else your changes will be overwritten during theme updates.

    But you may not be done yet. The jQuery library needs to be loaded on the page as well. If other scripts on the page also use jQuery, it may be already loaded. Whether it’s loaded or not, change all the $ shortcuts to jQuery or wrap the entire thing in a “noConflict wrapper“.

    If jQuery is not otherwise loaded, you need to load it using wp_enqueue_script(). (scroll to the top of the previously linked page). This is called from a callback added to the “wp_enqueue_scripts” action. This part of the code can go on functions.php of your child theme.

    Placing your jQuery code inside a script tag directly on a page is a bit of a cheat. The proper way is to place your code in it’s own file and enqueue it like you do for the jQuery library. Then you specify ['jquery'] as a dependency of your script. When a file is listed as a dependency like this, you don’t have to enqueue it as well. WP can work out what’s required and load things in the right order on its own.

    Hi there,
    after searching for hours without finding a solution to my problem I’ll ask my question here. It concerns this topic, so I’ll just put it here.

    I developed a simple plugin using jquery. I cannot find a way to get it running with the jquery libraries included by wordpress. When I dequeue WordPress-jQuery and enqueue jQuery again from google it works (except the “jquery is undefined” error).

    The code in my jquery file has the following structure:

    $(function($){
    [code of the document ready functions]
    })(jquery);
    
    function xy(){
      $(#id).doSomething; ...
    };
    

    In my Plugins PHP file I enqueue my scripts this way:

    function add_paketkonfigurator_scripts(){
        wp_register_script('paketkonfigurator_script',plugins_url( 'js/paketkonfigurator.js', __FILE__ ), array( 'jQuery' ),'1.0', true);
        wp_enqueue_script('paketkonfigurator_script');	
    
        wp_register_style('paketkonfigurator_style',plugins_url( 'css/paketkonfigurator_style.css', __FILE__ ));
        wp_enqueue_style('paketkonfigurator_style');
    }
    add_action( 'wp_enqueue_scripts', 'add_paketkonfigurator_scripts' );

    When looking at the pages source code they are included (in the header?) directly after jquery (before the content code of the page – shouldn’t they be loaded below?):

    <script type='text/javascript' src='https://homepage.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
    <script type='text/javascript' src='https://homepage.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
    <script type='text/javascript' src='https://homepage.com/wp-content/plugins/Stb%20Gebühren%20Plugin/js/gebuehrenrechner.js?ver=4.8.3'></script>
    <script type='text/javascript' src='https://homepage.com/wp-content/plugins/Stb%20Gebühren%20Plugin/js/paketkonfigurator.js?ver=4.8.3'></script>

    I already tried different things. Replaced all ‘$’ with ‘jQuery’, put a’$’ before the “jQuery in no conflict mode wrapper” (somewhere I read that you have to put one at the beginning when the scripts are loaded in the header). I also wrapped all functions between

    (function( $ ) {
     
        "use strict";
         
        // javascript code here. i.e.: $(document).ready( function(){} ); 
    
        //my other functions function xy(){}; following
     
    })(jQuery);

    as told in your link. This version doesn’t throw any errors at least. But the program doesn’t work either… In the other cases i alwas get the error “ReferenceError: jquery is not defined” and “TypeError: a.indexOf is not a function” in ”
    jquery.min.js:4:18892″. These errors also come up when I enqueue Googles jQuery….

    So i have no idea where my mistake / misunderstanding is and running out of time :/
    I hope someone can help.

    Best regards,
    Jeannette

    • This reply was modified 1 week, 3 days ago by  schnettchen.
    • This reply was modified 1 week, 2 days ago by  bcworkz. Reason: code fixed, 1st backtick must be in col 0
    Moderator bcworkz

    (@bcworkz)

    Hi Jeanette ( @schnettchen ),

    You certainly need a noConflict wrapper to avoid needing to change all $ shortcuts to jQuery, though changing all of them is equally valid.

    Please try changing the dependency argument in your enqueue script call to all lowercase: array('jquery'). Whether that makes a difference depends on the situation, and I don’t pretend to even try to keep track of when it does or doesn’t make a difference. It’s good practice to assume all PHP code is always case-sensitive. It doesn’t help that in jQuery we use camelCase, but we’re not in jQuery, we are passing a PHP argument that’s used by WP core code and core code for whatever reason is expecting all lowercase.

    I’m not a jQuery expert so this may not matter, but I’d try wrapping all of your jQuery in the noConflict wrapper — even the function declarations. If you still have trouble after these adjustments, you’ll need to figure out what’s going wrong in your code. It’s not unheard of for code to be dependent on a specific jQuery version, but such code is inherently weak and should be corrected.

    If there are no errors logged in your console, it’s difficult to debug code that’s not working. It may come down to repeatedly halving the code until you’ve zeroed in on the problem. Place debug output roughly halfway through your code. The output needs to indicate whether the code prior to this point worked correctly or not, so you know if the problem is before or after this point. Then divide the problem half in half again and repeat until the problem code is isolated.

    I hope this is enough to get your code working. Now for some forum administration issues…

    If you have further questions, please start a new topic instead of replying in this thread. While you are correct in that your topic relates to the OP’s topic, the solution is going to be different. You are thus diverting attention from the OP’s issue. Frankly, it’s kinda rude. I’m sure that was not your intention. It is why we ask all members to always start their own topics, even when the problem appears to be the same. It’s extremely rare when the solutions are the same. We realize this is opposite of common practice in other forums which are loathe to add any more topics than needed.

    The best reason for starting a new topic is more people will see your post. When you tag onto other’s topics, your post is buried in the forum listings, only to be seen by those subscribed to the topic. New topics appear on the “No Replies” list, which nearly all the experts here use to find those still needing help.

    Thanks for making use of backticks (or code button) to demarcate code, it really does help. One of your code blocks failed to format correctly because the initial backtick was not the very first character on the line, there was an intervening space. I fixed it, I mention this just so you are aware next time you post some code. It’s really a flaw in the forum’s parser, no one should be expected to be sure their backticks don’t have intervening characters on a line. But if you can do so in the future, it would be appreciated. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.