17

I'm using jQuery at WordPress (@the HOME page) and the ready function doesn't work for me. I have a index.php which is including (php) a header, footer and a sidebar. I tested this code:

<script type="text/javascript" src="path_to_jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      alert ("test text");
   });
</script>

The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sidebar has been loaded. This means while I'm seeing the index page (sidebar is not loaded yet) I have to wait a few seconds until the sidebar has finished loading, and only then the jQuery code is executed: the alert is popping up. So the ready function just wont work. Can anybody tell me why and how I can solve this problem? Thanks.

Improve this question

4 Answers 4

Reset to default
64

within the WordPress environment, use this:

jQuery(function($){
    // now you can use jQuery code here with $ shortcut formatting
    // this executes immediately - before the page is finished loading
});


jQuery(document).ready(function($){
    // now you can use jQuery code here with $ shortcut formatting
    // this will execute after the document is fully loaded
    // anything that interacts with your html should go here
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Wow! Thank you!!! I spent hours trying to figure out why my jQuery wasn't working!
As an aside: this does answer the generic title of the question, "jQuery ready function doesnt work in wordpress", but does not solve "It's only popping up after my sitebar has been loaded".
2

The alert is popping up after the sidebar is loaded because ready() is supposed to be executed AFTER the whole page is done loading.

Improve this answer

Comments

1

The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sitebar has been loaded.

That's exactly the advantage of using ready. When you want it to popup right away, simply do

<script type="text/javascript">
  alert ("test text");
</script>
Improve this answer

Comments

0

Perhaps there is many ways to do it. I will show You my way (tested), so... In typical WordPress Theme You should have at least files like: index.php and functions.php (i repeat! -minimal, because it should be much, much more, like also search.php, single.php, and so on, and so on..).

Each of above file should contain html and php code with css for nice frontend, but here i will focus on only the most necessary php and html, so here it is:

contents of index.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>    
    <?php get_header(); ?>
        <body <?php body_class(); ?>>    
            <!-- here add Your html and php code of index.php -->
            <?php
    
            // Here is the place all magic come true.. get_footer (wp_footer)
            // where..
            // wp_footer() will call any JAVASCRIPTS code in right way, but
            // don't forget inform about it functions.php file in his right section.
            // BTW: while wp_footer will call, 
            // then add_action function will run, 
            // and will set up correctly all javascript code inside WordPress Core
            // (please look into functions.php file)
            //
            // PLEASE:
            // DO NOT ADD ANY JAVASCRIPT CODE HERE (at the end of index file) - 
            // - it could work, but it is not recommended
            //
            wp_footer(); 
            ?>               
        </body>
</html>

Now.. Let's say Your Theme is named: Michael_theme

contents of functions.php could looks like for example:

<?php
    add_action( 'after_setup_theme', 'Michael_theme_setup' );
    function Michael_theme_setup() 
        {
        register_nav_menus( array( 'main-menu' => esc_html__( 'Main Menu', 'Michael_theme' )));
        }

    // loading HEADER scripts by right WordPress way
    add_action( 'wp_enqueue_scripts', 'Michael_theme_enqueue' );
    function Michael_theme_enqueue() 
        {
        wp_enqueue_style( 'Michael_theme', get_stylesheet_uri() );   // loading css scripts
        wp_enqueue_script( 'jquery' );                              // loading jlquery.js (one of js scripts)

        // here is another option to add Your own javascript code in js file if You wish
        }
    
    // loading FOOTER scripts by WordPress way
    add_action( 'wp_footer', 'Michael_theme_footer' );
    function Michael_theme_footer() 
        {
        <script>
            jQuery(document).ready(function($)
                {
                alert("test text"); // here is Your text to show
                }
        </script>
        }
    
    if ( !function_exists( 'Michael_theme_wp_body_open' ) ) 
        {
        function Michael_theme_wp_body_open() { do_action( 'wp_body_open' ); }
        }
?>

You could also cut Your code by divide it by using for example "get_template_part()" WordPress function, and pack the each part into separate php file. I mean You could call get_template_part inside functions.php file, but.. i am afraid there is not necessary to explain it all here and now. Please ask if You wish.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.