0

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

});
  • 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. – Ionut Staicu Dec 30 '14 at 7:26
3

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|||||
  • When you say "custom JavaScript file," are you referring to the file where I plan on using the variable created with wp_localize_script? – Desi Dec 30 '14 at 7:15
  • Yes. Please refresh the page, and see the complete answer. – Mayeenul Islam Dec 30 '14 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? – Desi Dec 30 '14 at 7:23
  • There is no such function like template_url(), use get_bloginfo('template_url') - updated my answer. – Mayeenul Islam Dec 30 '14 at 7:29
  • And more useful will be, if you can use the theme_path where I used get_template_directory_uri() – Mayeenul Islam Dec 30 '14 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.