Wordpress Custom Theme: mixing php and javaScript?

Question

I am building a custom wordpress theme and I am trying to add some JavaScript functions. The main function I want to add is a div that changes color over time. The colors it changes to are defined by the theme color settings in the Customize register. I have added those color settings boxes as show below through my functions.php:

 $wp_customize->add_setting('color1', array('default' => '#000000', 'transport'=>'refresh',));    
 $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'color1_CNTL', array(
        'label'     => __('Color 1', 'myTheme'), 
        'section'   => 'colors', 
        'settings'  => 'color1',)));

all of that works fine and I can use it in the Customize register on my admin page. Now, the only thing I'm wondering is, how do I use the value of color 1 in my javaScript code? I know that if I wanted to use it in css I would just have to use

<?php echo get_theme_mod('color1'); ?>

but that doesn't work in JavaScript. Any ideas?

random_user_name · Accepted Answer · 2014-05-20 15:12:51Z

The "WordPress way" would be to localize the script.

Utilize wp_localize_script

Overview:

Register a script in your theme (usually in your functions.php file). See here: wp_enqueue_script
Localize the script
Then, access that value via your javascript.

Minimal complete example (compiled from WP docs):

PHP:

add_action('wp_enqueue_scripts', 'my_theme_scripts');

function my_theme_scripts() {
    // Register the script first.
    wp_register_script( 'some_handle', 'path/to/myscript.js' );

    // Now we can localize the script with our data.
    $color_array = array( 'color1' => get_theme_mod('color1'), 'color2' => '#000099' );
    wp_localize_script( 'some_handle', 'object_name', $color_array );

    // The script can be enqueued now or later.
    wp_enqueue_script( 'some_handle' );
}

Javascript (in your 'myscript.js' file);

// Access the color via the object name defined in localize_script
var color = object_name.color1;

David · Accepted Answer · 2014-05-20 15:07:00Z

1

prob

var myvariable='<?php echo get_theme_mod("color1");?>';  //note the surrounding ''!

if you are having issues accessing the variable, declare it a global.

answered May 20, 2014 at 15:07

David

5,9373 gold badges26 silver badges44 bronze badges

5 Comments

user3656673 Over a year ago

I tried that, but it just saves myvariable as the actual full string, not the value of color1 itself

David Over a year ago

should be working...check you used single '' rather than double surrounding the php. other than that test the variable in php if it echos out it will do the same in js!

user3656673 Over a year ago

hmm i checked the quotes and it still doesn't work; the value of the variable is just the full string, not the actual content of the variable

random_user_name Over a year ago

It's because you don't have access to php in your script files, which is where you are working.

David Over a year ago

CALE_B is correct, you can't use php in a js file. Actually his solution will do you, i thought you were working on a php file

Collectives™ on Stack Overflow

Wordpress Custom Theme: mixing php and javaScript?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related