How to access or pass php variable into JavaScript?

Question

I am new to Stackoverflow and relatively new to WordPress as well. I have been trying to build a custom WordPress theme that also allows you to insert images for categories in the WordPress Dashboard. So far, I have been able to get the image URL saved into the database using the following code:

update_term_meta($term_id, 'custom_image_data', $image_data);

($image_data is an array with the elements: ID, and URL for the image)

However, now I would like to retrieve these two pieces of information and share them with my coresponding Javascript file. So far I have this code:

function image_uploader_js() {
  wp_register_script('image_file_uploader_js', get_template_directory_uri() . '/js/image_uploader.js', array('jquery', 'media-upload'));
  wp_enqueue_script('image_file_uploader_js');


  wp_localize_script('image_file_uploader_js', 'customUploads', array('imageData' => get_term_meta(get_queried_object_id(), 'custom_image_data', true)) );   //**

}
add_action('admin_footer', 'image_uploader_js');

However, when I go into the Google Chrome console and type in CustomUploads it just shows an empty string. But if I were to replace the code get_queried_object_id() with a static number 1 (which corresponds to the $term_id of the category) I get CustomUploads { id: ##, URL: HTTPS://..... } which is the desired result.

My question is why doesn't the original code work and how would I be able to share the id and URL or my category image with my Javascript file?

Bhautik · Accepted Answer · 2021-10-23 07:02:01Z

Make sure that you are on the category page then get_queried_object_id() will return term id. in other pages you will get a different id corresponding to that page.

You can use is_category() to check whether you are on the category page.

function image_uploader_js() {
    if( is_category() ){
        wp_register_script('image_file_uploader_js', get_template_directory_uri() . '/js/image_uploader.js', array('jquery', 'media-upload'));
        wp_enqueue_script('image_file_uploader_js');
        wp_localize_script('image_file_uploader_js', 'customUploads', array('imageData' => get_term_meta(get_queried_object_id(), 'custom_image_data', true)) );   //**
    }
}
add_action('admin_footer', 'image_uploader_js');

Or you can get all terms and push to an array and then you can access to js file.

function image_uploader_js() {
    
    $category = get_terms( array(
        'taxonomy' => 'category', // your custom taxonomy name
        'hide_empty' => false
    ) );
    
    $imageData = array();

    if( !empty( $category ) ){
        foreach ( $category as $key => $cat ) {
            $imageData[$cat->term_id] = get_term_meta( $cat->term_id, 'custom_image_data', true );
        }
    }

    wp_register_script( 'image_file_uploader_js', get_template_directory_uri() . '/js/image_uploader.js', array('jquery', 'media-upload') );
    wp_enqueue_script( 'image_file_uploader_js');
    wp_localize_script( 'image_file_uploader_js', 'customUploads', array( 'imageData' => $imageData ) );   //**
    

}
add_action('admin_footer', 'image_uploader_js');

Thank you so much for your response! I was finally able to get it working!

Collectives™ on Stack Overflow

How to access or pass php variable into JavaScript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related