wp query - How to pass a php variable to js within a template?

admin管理员组

文章数量:1122846

I’m trying to pass a variable from the template to js, but with no luck.

I’ve tried using wp_localize_script, and it seems to be working fine when attached to wp_enqueue_scripts action, but it doesn’t work when called from within template. Do my only resort is to use HTML & data- for handling this?

It would be that great though, since I’m passing the whole wp_query there.

My function is basically a wrapper on a custom WP_Query that allows load more functionality on multiple loops.

function load_more_scripts() {
     wp_register_script( 'loadmore', get_stylesheet_directory_uri() . '/assets/js/myloadmore.js', array( 'jquery' ) );
     wp_enqueue_script( 'my_loadmore' );
}
 add_action( 'wp_enqueue_scripts', 'load_more_scripts' );


 // this function is later called in the template
function get_list($query_args) {
    if ( is_array( $query_args ) ) {
        $the_query = new WP_Query( $query_args ); 
    } 

    //...some more code


    $instance = wp_generate_uuid4();
    wp_localize_script( 'loadmore', 'loadmore_params_' . $instance , array(
            'ajaxurl'      => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
            'posts'        => json_encode( $the_query->query_vars ), // everything about your loop is here
            'current_page' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
            'max_page'     => $the_query->max_num_pages
        ) );
}

Update It seems the issue can be in localizing multiple scripts. If you register the script to load in the footer, version without adding an $instance to load_more_params seems to work.

I’m trying to pass a variable from the template to js, but with no luck.

I’ve tried using wp_localize_script, and it seems to be working fine when attached to wp_enqueue_scripts action, but it doesn’t work when called from within template. Do my only resort is to use HTML & data- for handling this?

It would be that great though, since I’m passing the whole wp_query there.

My function is basically a wrapper on a custom WP_Query that allows load more functionality on multiple loops.

function load_more_scripts() {
     wp_register_script( 'loadmore', get_stylesheet_directory_uri() . '/assets/js/myloadmore.js', array( 'jquery' ) );
     wp_enqueue_script( 'my_loadmore' );
}
 add_action( 'wp_enqueue_scripts', 'load_more_scripts' );


 // this function is later called in the template
function get_list($query_args) {
    if ( is_array( $query_args ) ) {
        $the_query = new WP_Query( $query_args ); 
    } 

    //...some more code


    $instance = wp_generate_uuid4();
    wp_localize_script( 'loadmore', 'loadmore_params_' . $instance , array(
            'ajaxurl'      => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
            'posts'        => json_encode( $the_query->query_vars ), // everything about your loop is here
            'current_page' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
            'max_page'     => $the_query->max_num_pages
        ) );
}

Update It seems the issue can be in localizing multiple scripts. If you register the script to load in the footer, version without adding an $instance to load_more_params seems to work.

• wp-query

Share Improve this question edited Jan 8, 2018 at 14:15 Runnick asked Jan 8, 2018 at 14:09 RunnickRunnick 1,02933 gold badges1414 silver badges2626 bronze badges 4

• You can only call wp_localize_script once for a script, so instead of doing it inside get_list, collect all query instances in a single object and call it just once before the script is output in the footer. – Milo Commented Jan 8, 2018 at 16:16
• @Milo do you mean you can only call it once from the front-end? Because it seems to work with wp_enqeue_scripts as far as object name is unique. – Runnick Commented Jan 8, 2018 at 17:13
• I mean you can only localize a script handle once, calling it multiple times on the same handle will overwrite the previous. – Milo Commented Jan 8, 2018 at 17:23
• 1 This article states that wp localize scripts must be called before wp_head. Maybe that was your issue. – D. Dan Commented Jan 11, 2018 at 8:44

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

If you would want to pass the whole wp query you could pack it up in arrays, then json encode it and just write it out in a tag.

<?php my_posts = array();
              while ( have_posts() ) : the_post(); ?>
                    <?php
                    $properties = array(
                        'title' => get_the_title(),
                        'link' => get_the_permalink()
                    );
                    $my_posts[] = $properties; ?>
            <?php endwhile; wp_reset_query(); ?>

    <script>
                var posts = <?php echo json_encode($my_posts); ?>; 
               console.log(posts);
</script>

Of course this might not be the best idea securitywise.

The purpose of wp_localize_script is to print javascript variable where the spesific javascript file is loaded, if you want to print in php template and because its specific area, I think you not need to use wp_localize_script, just print it, like

<script>
   var posts = <?php echo json_encode($my_posts); ?>; 
   var current_page = <?php echo get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;?>;
var max_page = <?php echo $the_query->max_num_pages;?>
</script>

not need to print ajaxurl, because in updated wordpress it automatically printed.

and for sure, you call dependent script in specific template, you can use

function specific_enqueue() {
  if ( is_page( 'your template' ) ) {
    wp_enqueue_script( 'my_loadmore' );
  }
}
add_action( 'wp_enqueue_scripts', 'specific_enqueue' );

No security problem I think, because wp_localize_script like echo, the function printed the var in html, and everybody can look at inspect.

本文标签： wp queryHow to pass a php variable to js within a template