WordPress.org

Ready to get started?Download WordPress

Forums

Where Does jQuery Go? (12 posts)

  1. coreymj78
    Member
    Posted 2 years ago #

    This is not a theme related question.

    I am using Headway Theme, which in it's developer options has an option to automatically activate several jQuery libraries site-wide (which automatically are included into the header of every page).

    Now I posted originally on Headway's support forum and received an extremely cryptic answer and I was told to come here.

    My questions are as follows:

    1. Since my theme automatically activates the libraries, that means that all I have to do is add my jQuery function scripts to my site right? In other words, there is no reason to use wp_enqueue function in custom functions.php to register jQuery for various pages right?

    2. Where do the PHP conditional page tags go and where do the jQuery scripts go? Do they all go in custom functions.php?

    Such as this jQuery script...

    $(document).ready(function() {
    $("div.headway-leaf-inside:has(div.page)").addClass("cj-pagepad");
    });

    ...which adds some padding to the interior of an element based on whether or not it has an ancestor of div.page. Which as of now can only be done using the :has selector in jQuery (and of course I will need jQuery for many other functions).

    Or these PHP conditional tags (these are just a wild guess):

    <?php
    if( !is_page(5) ) wp_enqueue_script ( 'myjquery', get_bloginfo(' what goes here?').'/myjquery.js', array('jquery') );
    ?>

    or...

    <?php
    if( is_page( 5 ) ) {   ?>
    <scrpt type=' something here ' src= '/myjquery.js'> </scrpt>

    3. How would I use conditional page tags in conjunction with it so that I can apply certain functions only to certain pages?

    4. How would the sample code blocks be written (in full) so I can get a complete picture so my code blocks validate without error?

    Excuse my ignorance, but I'm just getting started with jQuery and WordPress.

  2. coreymj78
    Member
    Posted 2 years ago #

    After a bit of research, I know for sure that because my theme adds jQuery automatically by activating it through the configuration, this is not needed in custom functions:

    <?php
    function insert_jquery(){
       wp_enqueue_script('jquery');
    }
    add_filter('wp_head','insert_jquery');
    ?>

    And although I looked at that tutorial and it helped me understand better, but I still don't know how to write up the function for my situation. I have written up a hypothetical script. Could someone look at it and see if everything is ok? Also, the parts I'm unsure about for my situation are shown in a "whatgoeshere":

    <?php if( is_page(5) ) function whatgoeshere (){
    wp_enqueue_script('jquery');
    ?>
    <script type="text/javascript">
    
    jQuery(document).ready(function(){
    
    jQuery("div.headway-leaf-inside:has(div.page)").addClass("cj-pagepad");
    })
    });
    
    </script>
    <?php
    }
    add_filter(' whatgoeshere ');

    Or is this the right way:

    <?php if( is_page(5) ) { ?>
    
    <script type="text/javascript">
    
    jQuery(document).ready(function(){
    
    jQuery("div.headway-leaf-inside:has(div.page)").addClass("cj-pagepad");
    })
    });
    
    </script>
    <?php
    }
    add_filter(' whatgoeshere ');

    If I can just get corrections on this code, I think I'll have it. I'm almost there. Thanks so much for any help you can give me. I really appreciate it.

  3. coreymj78
    Member
    Posted 2 years ago #

    Why is it so difficult for me to find the answers I need? This is ridiculous. I have this in my header:

    <?php wp_enqueue_script( 'jquery' ); ?>
    <?php wp_head(); ?>

    I have this in my functions:

    function load_jquery_google() {
    wp_deregister_script( 'jquery' );
    wp_register_script(' jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
    }
    add_action('init', 'load_jquery_google');

    And I guess I know I should use this somewhere as well (but dont know where):

    jQuery(document).ready(function({
    // you code here
    });

    And I have no idea what goes into " // you code here "

    This is what I need to know. Please someone, for all that is good and right, help a brother out. Please?

  4. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    First try removing the extra space in:

    wp_register_script('SPACEjquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');

    Probably don't need them here either:

    wp_deregister_script(SPACE'jquery'SPACE);

  5. fonglh
    Member
    Posted 2 years ago #

    Probably don't need them here either:

    wp_deregister_script(SPACE'jquery'SPACE);

    Those spaces aren't needed but are part of WordPress coding standards.

    See 'Space Usage'.
    http://codex.wordpress.org/WordPress_Coding_Standards

    @coreymj78
    Take a look at this tutorial on how to load scripts.
    http://scribu.net/wordpress/optimal-script-loading.html

    jQuery is loaded by default in WordPress. What you need to do is to put your custom code into a separate .js file and then enqueue it in your theme's functions.php file.

    Note that wp_register_script() doesn't actually enqueue the script.

    jQuery(document).ready(function({
    // you code here
    });

    What goes into "//you code here" is whatever you want to use jQuery for. In your case, it looks like it should be

    jQuery(document).ready(function(){
    
    jQuery("div.headway-leaf-inside:has(div.page)").addClass("cj-pagepad");
    })
    });

    or whatever it is you want to accomplish with jQuery.

  6. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    fonglh, I actually reviewed that and all the examples did not show the spaces, but good information to know!

  7. fonglh
    Member
    Posted 2 years ago #

    Which examples are you referring to? The spaces for function calls are there on the coding standards page.

  8. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    In the code on my sites.

  9. coreymj78
    Member
    Posted 2 years ago #

    Ok, so since register_script doesn't enqueue it, then I should be enqueuing it from funtions.php, along with conditional php tags to tell it what page to enqueue it for? Also, does that mean I don't need that enqueue code in my themes header? cuz i was told to put it there if i wanted to use google's version of jquery to be sure its always up do date.

    I read the tutorial and im still lost. I really just need someone to literally just give me sample code and tell me where it goes. I'm really sorry for my ignorance, but I'm getting so many different types of code, etc. that im just plain confused now.

    That tutorial didn't even tell me where that code goes. And what goes into the area where it said " // Actual short code handling here " What is shortcode? Why do I need that? See? Now there is a new thing I don't know about again, shortcode. Now I'm even more confused.

    First off, could someone first tell me if the code I have in my header and functions.php (above) is correct? If not, how do I correct it? How should it look? How do I call for my .js file in functions.php? Then, how would a sample script look in my actual .js file... and I need the whole thing, the complete text, how to start it, how to end it.

    Also, since I now know that I need to refer to my .js file from my functions.php, does that mean every time I want to add another custom jquery feature that I need to call for it again in my functions.php as well as create yet another .js file for it?

    Also, I only want certain scripts on certain pages, so what is a crystal clear, no-nonsense method of using conditional tags to add only certain scripts to certain pages?

    Thanks for any help, you guys rock.

  10. coreymj78
    Member
    Posted 2 years ago #

    Ok, over at Headway I was just told everything could go into the header.php. Is this what it would look like:

    function my_scripts_method() {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
        wp_enqueue_script( 'jquery' );
    }
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    
    jQuery(document).ready(function(){
    jQuery("div.headway-leaf-inside:has(div.page)").addClass("cj-pagepad");
    });

    Don't I need the <script> tags somewhere? And if I don't use this method and put the google enqueue code in my custom_functions.php file (which is what I was told to use for the theme), along with my enqueue for my custom script and my custom script into a separate .js file, how could I make it conditional to only run my custom scripts on certain pages?

    THanks.

    Thanks.

  11. coreymj78
    Member
    Posted 2 years ago #

    Ok I finally got this alert to work on my front page:

    <script type="text/javascript">
    jQuery(document).ready(function(){
      alert('test');
    });
    </script>

    .. by placing the above code in the the header. So jQuery is loading and functional on my site. So why then do none of the below scripts work in place of the alert?

    <script type="text/javascript">
    jQuery("div.content:has(div.page)").css("border","3px solid red");
    </script>
    
    <script type="text/javascript">
    jQuery("div.content").css("border","3px solid red");
    </script>
    
    <script type="text/javascript">
    jQuery("a").css("border","3px solid red");
    </script>

    I must be missing something basic here.

  12. coreymj78
    Member
    Posted 2 years ago #

    Figured out everything except for how to make these scripts load conditionally (only on certain pages). Hmph.

Topic Closed

This topic has been closed to new replies.

About this Topic