1

Can someone help me utilize native wordpress jquery to run my function? The only working test i have done is to load an external jquery resouce via the chrome dev console and then add my function to the inspect element console.

WORKING TEST: add this to the console:

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE:

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

THE QUESTION: Can you help me achieve the same functionality by way of Wordpress' native jquery library? The function just needs to work on the /Lessons page. I am unsure if my function is supported by native wp jquery or if i'm just incorrrectly adding it to the page.

Assume that i have read these 2 articles: code.tutsplus.com/articles/the-complete-guide-to-proper-javascript-usage-with-wordpress--wp-32172 http://codex.wordpress.org/Function_Reference/wp_register_script#Handles_and_Their_Script_Paths_Registered_by_WordPress

Thanks so much,

Improve this question
2
  • Have you read the question about undefined $?
    – fuxia ♦
    Jun 26, 2015 at 16:58
  • Still confused. That's helpful, but please watch video and/or suggest exact steps for how to add my jQuery function to my /Lessons page, as I try (unsuccessfully) to do in the short video. Thanks so much,
    – Peter Noges
    Jun 26, 2015 at 20:01

1 Answer 1

Reset to default
-1

As toscho pointed out, use jQuery(document).ready(function($) { ... }); instead of $( function() { ... });

Edit: Main problem is WP rich text editor escaping your html <script> tags. See https://codex.wordpress.org/Using_Javascript at the bottom of the page for a plugin-based workaround to turn off formating for specific posts/pages, allowing you to insert code.

Alternately, add JavaScript to appropriate template file or enqueue in functions.php as external script.

Improve this answer
5
  • So again, thanks! But regardless of that concept how do i take the working code and "put it" into the page? I don't care to load it into the header or footer since i'm only going to use this on one page -- that is the /Lessons page. So from the WP Admin panel i click "pages" then "edit" the Lessons page. Then in the editor i click the "Text" editor (as opposed to the Visual editor) but what do i type there? <script> ... </script> or something else? Do i need to enqueue JQ first in this text area i described? How?
    – Peter Noges
    Jun 26, 2015 at 20:51
  • In this case, the code works because you're loading jQuery from CDN which defines $. The libraries included with WordPress don't define this alias to avoid conflicts. It doesn't matter where you include this code as it will only fire on document.ready, and you can define multiple document.ready callbacks. Try it and see if it works?
    – Richard Carls
    Jun 26, 2015 at 21:02
  • So from the WP Admin panel i click "pages" then "edit" the Lessons page. Then in the editor i click the "Text" editor (as opposed to the Visual editor). Then i paste the code in the format you suggested. See this link for exactly what i used: gust.box.com/s/ck35ud8ir436r4cdzok8f2wpwz9a3oft. The functionality doesn't work like it does when i load the jQuery from CDN. Any idea why? Thanks so much for the support on this, Richard and community!
    – Peter Noges
    Jun 26, 2015 at 21:31
  • It's probably escaping html entities, since WP pages are just content stored in database like posts. I would just stick the code in your footer.PHP if you have access to it. It will fire on every page so check your element match and return early if not found.
    – Richard Carls
    Jun 26, 2015 at 21:59
  • Richard, that did it! I edited footer.php and pasted the code just before the </body> tag. You are a legend.
    – Peter Noges
    Jun 26, 2015 at 22:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.