1

I was trying to store the template url (bloginfo(template_url);) into a variable so I could use it in my JavaScript. However, I realized this wasn't possible and someone alerted me to wp_localize_script and said that it could do what I wanted. I looked through the codex but I'm still unsure as to how to implement this.

Here's what I have so far:

Function

function starter_scripts() {

    wp_enqueue_script( 'jquery' );

    wp_localize_script( 'my_script', 'templateUrl', array(
        'templateUrl' => template_url()
        ) );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

JS

jQuery(document).ready(function($){

    // Fade in Contact background
    $('body.page-template-page-contact #content').css('background', 'url(templateUrl + bg-contact.jpg) 50% 0% no-repeat fixed').fadeIn(2000);

});

Where have I gone wrong?

Update:

function starter_scripts() {
    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );

    wp_enqueue_script( 'jquery' );

    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );

    wp_localize_script( 'includes', 'site', array(
        'url'         => site_url('/'),
        'theme_path'  => get_template_directory_uri(),
        'templateUrl' => template_url()
        ) );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

JS

jQuery(document).ready(function($){

    // Fade in Contact background
    $('body.page-template-page-contact #content').css('background', 'url(site.templateUrl/img/bg-contact.jpg) 50% 0% no-repeat fixed').fadeIn(2000);

});
Improve this question
1
  • I'd say that this 'url(site.templateUrl + bg-contact.jpg) is kind of wrong. 'url(' + site.templateUrl + 'bg-contact.jpg) should work a bit better though. Commented Dec 30, 2014 at 7:26

1 Answer 1

Reset to default
5

You are not enqueueing your custom JavaScript file. And calling the var (templateUrl) in JS file without the handle. Follow the following:

I'm enqueueing my custom JavaScripts file (script.js) under the dependency of jQuery, so it will enqueue jQuery library from core. And I'm using the same handle my-custom-js for both my script and localize_script to pass the variables to the JavaScripts page.

functions.php

<?php
function project_scripts() {
    wp_enqueue_script( "my-custom-js", get_template_directory_uri() . "/js/script.js", array("jquery"), "20141230", TRUE );
    wp_localize_script("my-custom-js",
                            "site",
                            array(
                                    "theme_path"    => get_template_directory_uri()
                                )
                        );
}
add_action( 'wp_enqueue_scripts', 'project_scripts' );

script.js

jQuery(document).ready(function($){

    console.log(site.theme_path);

});

Note the site handle in both localize_script and my custom JS file - it's the key with which I'm fetching the data.

Improve this answer
8
  • When you say "custom JavaScript file," are you referring to the file where I plan on using the variable created with wp_localize_script? Commented Dec 30, 2014 at 7:15
  • Yes. Please refresh the page, and see the complete answer. Commented Dec 30, 2014 at 7:16
  • I tried to follow your example but I ended up with undefined function template_url(). I updated my post with the changes. Can you help me out? Commented Dec 30, 2014 at 7:23
  • There is no such function like template_url(), use get_bloginfo('template_url') - updated my answer. Commented Dec 30, 2014 at 7:29
  • And more useful will be, if you can use the theme_path where I used get_template_directory_uri() Commented Dec 30, 2014 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.