1

I am trying to use get_theme_mod option from php to load into my js file. I've used wp_localize_script to convert. The tweet_id is where I need to place the $tweet value outputted.

Any help would be great! (PS: I've registered the script in functions.php already.)

PHP FILE

<? 

$tweet = get_theme_mod( 'tweets_widget_id' );
wp_localize_script( 'twitter', 'tweet_id', $tweet ); 

?>

<? wp_enqueue_script('twitter'); ?>

JS FILE

var config2 = {
    id: "tweet_id",
    domId: "tw-widget2",
    maxTweets: 3,
    enableLinks: !0,
    showUser: !1,
    showTime: !0,
    showInteraction: !1,
    lang: "en"
};
twitterFetcher.fetch(config2);
2

PHP

wp_enqueue_scripts is a good time to localize the data. Make sure you target your script and create a name for the object as well as passing an array of data. In this case twitter_settings is the object that will be created and will hold all the data. twitter_settings.tweets_widget_id will ultimately hold your $tweet.

add_action( 'wp_enqueue_scripts', function() {

    // Get the current data
    if ( empty ( $tweet = get_theme_mod( 'tweets_widget_id' ) ) ) {
        $tweet = 'No Widget ID';
    }

    // Localize script with data to `twitter_settings` object
    wp_localize_script( 'twitter', 'twitter_settings', array( 'tweets_widget_id' => $tweet ) );

    // Enqueued script with localized data.
    wp_enqueue_script( 'twitter' );
} );

JS

Access the localized data from the twitter_settings object

var config2 = {
    id: "" + twitter_settings.tweets_widget_id, // based on comments
    domId: "tw-widget2",
    maxTweets: 3,
    enableLinks: !0,
    showUser: !1,
    showTime: !0,
    showInteraction: !1,
    lang: "en"
};
twitterFetcher.fetch(config2);

Test

(optional) Test to make sure the variable came through ok.

<script>

    (function ($) {

        alert( twitter_settings.tweets_widget_id );

    })(jQuery);

</script>
  • Thanks, the JS file is external however wp_register_script('twitter', get_template_directory_uri() .'/js/menu/twitter.js',array('jquery'),null, true); How would it work that way? – scopeak Jan 18 '16 at 22:19
  • I added the twitter_settings.tweets_widget_id into the var like so var config2={id: "twitter_settings.tweets_widget_id",domId:"tw-widget2",maxTweets:3,enableLinks:!0,showUser:!1,showTime:!0,showInteraction:!1,lang:"en"};twitterFetcher.fetch(config2); as I need the value to output within the "" of the id. Hope that makes more sense what I'm struggling to understand. Thanks. – scopeak Jan 18 '16 at 23:09
  • You don't need quotes. If you need to make sure it's a string write ""+variable. If you put quotes around it in JS you will only get the characters displayed there. – jgraup Jan 18 '16 at 23:52
  • Perfect! the config2={id: ""+twitter_settings.tweets_widget_id done the trick. Thanks for your help. – scopeak Jan 19 '16 at 0:04

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.