1

I know I can add a script file to the footer of theme that requires jquery with wp_enqueue_script, but i need to add dynamic javascript code to footer, somehing like this ...

if ( $body_logged_in == 'on' ) {
    $count = 60;            
} else {        
    $count = 90;        
}   
if ( $navbar_sticky == 'on' ) {

    $count = $count + 45;

}

?>

<script>

    $('.fixed-sidebar').stick_in_parent({offset_top: <?php echo $count; ?>});

</script>

<?php

I do this with WP_footer hook , is it safe and standard? or any better ways?

    function theme_wp_footer() {

    if ( $body_logged_in == 'on' ) {

        $count = 60;

    } else {

        $count = 90;    

    }

    if ( $navbar_sticky == 'on' ) {

        $count = $count + 45;

    }

    ?>

    <script>

        $('.fixed-sidebar').stick_in_parent({offset_top: <?php echo $count; ?>});

    </script>   
    <?php       
}
add_action( 'wp_footer', 'theme_wp_footer' );

How to do it?

2
  • I'm not sure what you mean by 'is it safe' when placing scripts in the footer. The larger question is, have you tested your code to see if it works? Jan 29, 2017 at 12:43
  • You've made it the best way possible, just one thing, wrap your code in jQuery(document).ready(function($) { /* your code */ }); to make it jQuery dependent, and make sure jQuery is enqueued (mostly done by your theme or a plugin, or else use wp_enqueue_script('jquery');)
    – Ismail
    Jan 29, 2017 at 13:00

1 Answer 1

4

You can obviously do it the way you did. However, there is a better way, that is much more maintainable than adding the script tag in the footer that way.

You can handle these sort of scenario (where you need dynamic variable from PHP) by using wp_localize_script() function.

For example, in functions.php:

function theme_wp_footer_scripts() {
    /* your custom CODE */
    if ( $body_logged_in == 'on' ) {
        $count = 60;
    } else {
        $count = 90;    
    }
    if ( $navbar_sticky == 'on' ) {
        $count = $count + 45;
    }

    /* add main script in footer */
    wp_enqueue_script( 'footer_script', get_stylesheet_directory_uri() . '/js/my-script.js', array( 'jquery' ), null, true );

    /* add dynamic data for your footer_script with object name footer_script_data */
    wp_localize_script( 'footer_script', 'footer_script_data',
        array( 
            'count' => $count
        )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_wp_footer_scripts' );

Then in js/my-script.js:

jQuery(document).ready(function($) {

    /* Your custom JavaScript CODE that is jQuery dependent */
    /* see how footer_script_data object name is used from external JavaScript file */
    $('.fixed-sidebar').stick_in_parent({offset_top: footer_script_data.count});    

});

Here's more about wp_localize_script.

1
  • 1
    There's a typo: read => ready
    – Ismail
    Jan 29, 2017 at 13:21

Your Answer

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

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