How to call JavaScript from header to body?

Question

How can I call this into body from header, I've tried all the ways on the internet and it just simply doesn't work, am I missing something obvious? How would you go about this?

<script type="text/javascript" src="/wp-content/themes/dw-minion/assets/css/jstick/jquery.js"></script>
<script type="text/javascript" src="/wp-content/themes/dw-minion/assets/css/jstick/jquery.stickem.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {  
        $('.container').stickem(); 
    });
</script>

I should probably add that I have multiple instances of this running as I am applying the JavaScript inside content.php on WordPress. Is that the problem?

Here is my content.php file contents:

<div class="title-wrapper">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <a href="<?php the_permalink(); ?>#comments" title="<?php comments_number( 'No Comments', '1 Comment', '% Comments' ); ?>">
        <div class="commentnumber"><?php comments_number( '0', '1', '%' ); ?></div>
    </a>
</div>
<div class="container">
    <div class="stickem-container">
        <div class="thelinks stickem">
            <div class="sharelinks">
                <div class="sharepinterest">
                    <?php echo get_simple_local_avatar( $id_or_email, $size, $default, $alt ); ?>
                </div>
                <a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php the_permalink(); ?>&p[images][0]=http://www.otlcampaign.org/sites/default/files/journey-for-justice-mlk-memorial.jpg&p[title]=<?php the_title(); ?>&p[summary]=Click+to+enlarge">
                    <div class="sharefacebook"></div>
                </a>
                <a href="http://twitter.com/home?status=<?php the_title(); ?>+<?php the_permalink(); ?>">
                     <div class="sharetwitter"></div>
                </a>
                <div class="sharegoogle"></div>
            </div>
        </div>
        <div class="post-wrapper">
            <div class="entry-content">
                <a href="<?php the_permalink(); ?>"><?php the_content(); ?></a>
            </div>
        </div>
    </div>
</div><a>

"ive tried all the ways on the internet" apparently not. what you have should work, assuming you're including jQuery and it's stored in the jQuery var, and .container exists and that .stickem() works, none of which we can confirm/deny given the code you have provided. — user400654
– user400654, Commented Sep 12, 2013 at 21:17
As a sidenote, you should be using the enque_script methods to add scripts and set dependencies in Wordpress, and not hardcode in script tags. — adeneo
– adeneo, Commented Sep 12, 2013 at 21:19
First, figure out Why it doesn't work. Is the code inside the ready event being triggered? is the .container element being found? If both are yes, then the problem is with the plugin. If both are no, then there's probably a javascript error in your console. If one is yes and the other is no, then figure out Why .container doesn't exist yet. — user400654
– user400654, Commented Sep 12, 2013 at 21:24

brasofilo · Accepted Answer · 2013-09-12 22:47:17Z

Scripts should be enqueued with wp_enqueue_scripts in functions.php, not directly in other theme template files. Also, looks like the theme has jQuery bundled and that's doing_it_wrong()™.

Any Conditional Tag can be used to filter the enqueue in different pages.

add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_so_18774457' ) );

function enqueue_so_18774457()
{
    if( is_single() )
    {
        wp_enqueue_script( 
            'stickem-js', 
            get_stylesheet_directory_uri() . '/assets/css/jstick/jquery.stickem.js', 
            array( 'jquery' ) // This enqueues jQuery as a dependency
        );
    }
}

And for small scripts, like $('.container').stickem();, this can be used:

add_action( 'wp_footer', 'footer_so_18774457' );

function footer_so_18774457()
{
    if( !is_single() )
        return;

    echo "
    <script type='text/javascript'>
        jQuery(document).ready(function($) {  $('.container').stickem(); });
    </script>";
}

Collectives™ on Stack Overflow

How to call JavaScript from header to body?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related