Passing boolean values with wp_localize_script

I am using wp_localize_script to pass a couple of values from my theme options to a javascript file. First I got the values from my theme options:

$options = get_option('theme');  
$flex_auto = $options["slide-auto"];
$flex_animation = $options["slide-animation"];
$flex_direction = $options["slide-direction"];

Then I used wp_localize_script to create my array of values.

wp_enqueue_script('flexslider');
wp_localize_script('flexslider', 'flex_vars', array(
    'flex_auto' => $flex_auto,
    'flex_animation' => $flex_animation,
        'flex_direction' => $flex_direction
    )
);

In my javascript file I did this:

var $anim = flex_vars.flex_animation;
var $auto = flex_vars.flex_auto;
var $dire = flex_vars.flex_direction;

jQuery('.flexslider').flexslider({
    animation: $anim,
    slideshow: $auto,
    controlNav: 'thumbnails',
    directionNav: $dire, 
    slideshowSpeed: 7000,
    animationSpeed: 1000,
    touch: true,
});

My theme options include some values that are made with checkboxes which work with 0/1 booleans while the jQuery plugin I’m using works with true/false. I tried saving the boolean value as strings by using a drop-down menu with two options, either true or false, but that doesn’t seem to work. How can I pass the boolean values from the theme options to the javascript file? Any suggestions and hints very welcome 🙂

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try this:

$options = get_option( 'theme' );

wp_localize_script( 'flexslider', 'flex_vars', array (
  'flex_auto' => ($options['slide-auto']) ? 'true' : 'false',
  'flex_animation' => $options['slide-animation'],
  'flex_direction' => $options['slide-direction']
) );

Assuming slide-auto is the option you made a boolean.

This script isn’t tested, I directly typed it in here.

Method 2

This is the right answer working for me

wp_add_inline_script('helloworld','var site_config ='.json_encode(array (<Your array>)));

wp_localize_script with boolean and init

Method 3

As stated by @bonger in the comment.

If you need boolean or integer values in the wp_localize_script function, you need to place them in a nested array.

wp_localize_script( 'script-handle', 'jsVariableName', [
    'args' => [
        'boolValue'      => true,
        'boolValueFalse' => false,
        'intValue'       => 9,
        'floatValue'     => 10.3,
        'stringValue'    => 'some string',
    ],
] );

This will result in this in your JS script.

{
    args: {
        boolValue: true
        boolValueFalse: false
        floatValue: 10.3
        intValue: 9
        stringValue: "some string"
    }
}

All the variables in the first level of your array will be converted to string (well, this is an i18n method).

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0