Help needed with inline small script in functions.php

[Aleksa Markovic]

Hello everyone and thanks for any help you can offer me.

I want to achieve this

<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

jQuery(function( $ ){ $(window).scroll(function() { var yPos = ( $(window).scrollTop() ); if(yPos > 130) { // show sticky menu after screen has scrolled down 200px from the top $(“.nav-secondary”).fadeIn(); } else { $(“.nav-secondary”).fadeOut(); } }); });

but I have a very little knowledge of PHP

I have successfully loaded jquery at the bottom of the page by modifying example from Chris (https://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/ “”) simpy by adding true for $in_footer and using cloudflare libs.

I want to inline this script because it’s so small and unnecessary to use wp_register_script .

I’ve tried this way in my functions.php

function stickymenu() {
if( wp_script_is( 'jquery', 'done' ) ) { 
    echo '<script>' ;
    echo 'jQuery(function( $ ){
    $(window).scroll(function() {
        var yPos = ( $(window).scrollTop() );
        if(yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top
        $(".nav-secondary").fadeIn();
        } else {
        $(".nav-secondary").fadeOut();
                }
                });
                    });' ;
    echo '</script>'; 
;} 
    }
add_action ( 'wp_footer' , 'stickymenu')

but I’ve crashed my site :D so I’m looking for your help.

Thanks for your time in reading this and sorry if my language was a bit hard to understand it’s not my first language :)

*edit * (http://xsmedia.rs “Reference URL”)

[Alen]

Cao Aleksa,

In your theme folder create: js folder and small-script.js and put your code inside. And place following code inside your functions.php file.

function my_cool_small_script()
{
  // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
  // Outputs small-script from theme folder: /js/small-script.js
  wp_enqueue_script( 'small-script', get_template_directory_uri() . '/js/small-script.js', array( 'jquery' ), '1', true );
}
add_action( 'wp_enqueue_scripts', 'my_cool_small_script' );

Hope that helps.

If you need the script to show up on specific pages make sure to look up appropriate WP conditional tags.

[Aleksa Markovic]

Cao Alen and thanks a lot for your reply.

That’s exactly what I did as a work around until I find a proper solution on how to inline it. The reason why I wanted to avoid enque_script for such a small script is that Google recommends to inline small javascript for better performance.

This reduces the number of requests made by a web page by inserting the contents of small external CSS, JavaScript and image files directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.

Regards.

[Alen]

duplicate…

[Alen]

Just place the code in the footer.php. Like so:

<?php
  // conditional (if necessary)
  if ( is_home() ) : ?> <!-- ESCAPE PHP -->
   <script>
   /* place your code here */
   console.log('footer');
   </script>
<?php endif; ?> <!-- END IF STATEMENT -->

[Author]

Posts