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?
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');