Creating an WordPress website and you want to push the PHP data to the external JS script! But how you gonna do that? Learn it here! It’s very simple!
PHP data to the external JS file
There is an simple answer! Use the wp_localize_script() function from WordPress!
I assume that you’re familiar with the right way to load the JS or jQuery scripts with wp_enqeue_script() function. Only than you can use wp_localize_script().
The script
This code below is special for building an WordPress Plugin, you can see that i use the plugins_url() function. For theme’s you should use get_template_directory_uri() to get the theme url.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Script functions */ function wp_exclusive_js_scripts() { wp_enqueue_script( 'jquery', plugins_url( '../js/jquery.js' , __FILE__ )); wp_enqueue_script( 'jquery_cycle', plugins_url( '../js/jquery.cycle.js' , __FILE__ ), array( 'jquery' )); wp_enqueue_script( 'maximage', plugins_url('../js/jquery.maximage.js' , __FILE__ ) , array( 'jquery' )); $exclusive_slider_fx = get_option('fx_slider_type'); $exclusive_slider_speed = get_option('speed_slider_type'); $exclusive_slider_timeout = get_option('timeout_slider_type'); $exclusive_slider_pauze = get_option('pauze_slider_type'); wp_enqueue_script( 'custom_maximage_slider', plugins_url( '../js/custom_maximage_slider.js' , __FILE__ ) , array( 'jquery' )); wp_localize_script( 'custom_maximage_slider', 'slider_setting', array( 'fx' => $exclusive_slider_fx, 'speed' => $exclusive_slider_speed, 'timeout' => $exclusive_slider_timeout, 'pauze' => $exclusive_slider_pauze, ) ); } |
If you’re check the source of the page, you should see this:
1 2 3 4 5 |
<script type='text/javascript'> /* <![CDATA[ */ var slider_setting = {"fx":"fade","speed":"2500","timeout":"0","pauze":"1"}; /* ]]> */ </script> |
So you see WordPress has the data of the setting page!
Now you need to add this data to you’re external file. In my case this is the ‘custom_maximage_slider.js’ script. There i’m gonna add some variable’s. (check below)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
jQuery(document).ready(function ($) { $('#maximage').maximage({ cycleOptions: { fx: slider_setting.fx, speed: slider_setting.speed, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33) timeout: slider_setting.timeout, prev: '#arrow_left', next: '#arrow_right', pause: slider_setting.pauze, cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size before: function(last,current){ if(!$.browser.msie){ // Start HTML5 video when you arrive if($(current).find('video').length > 0) $(current).find('video')[0].play(); } }, after: function(last,current){ if(!$.browser.msie){ // Pauses HTML5 video when you leave it if($(last).find('video').length > 0) $(last).find('video')[0].pause(); } } }, onFirstImageLoaded: function(){ jQuery('#cycle-loader').hide(); jQuery('#maximage').fadeIn('fast'); } }); // Helper function to Fill and Center the HTML5 Video jQuery('video,object').maximage('maxcover'); // To show it is dynamic html text jQuery('.in-slide-content').delay(1200).fadeIn(); }); |
Result
So now you can see that it works!
Het bericht Push PHP data to an WordPress external JS script with wp_localize_script verscheen eerst op Raymon Schouwenaar.nl.