Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active June 20, 2019 06:18
Show Gist options
  • Save neilgee/9bb8d424b4a0a7f2e325 to your computer and use it in GitHub Desktop.
Save neilgee/9bb8d424b4a0a7f2e325 to your computer and use it in GitHub Desktop.
wp_localize_script using Booleans & Integers
<?php
//wp_localize_script by default passes everything in as strings so for booleans and integers when being referenced in your javascript you need to do some trickery
//Example 1 - passing in booleans as strings
$options = get_option('ng_slicknavmenu');
// Add PHP plugin variables to the $params[] array to pass to jQuery
$data = array (
'ng_slicknav_menu' => $options['ng_slicknav_menu'],
'ng_slicknav_position' => $options['ng_slicknav_position'],
'ng_slicknav_parent_links' => $options['ng_slicknav_parent_links'],//boolean
'ng_slicknav_child_links' => $options['ng_slicknav_child_links'],//boolean
'ng_slicknav_speed' => $options['ng_slicknav_speed'] ,//integer
'ng_slicknav_label' => $options['ng_slicknav_label'],
);
// Pass PHP variables to jQuery script
wp_localize_script( 'slickinit', 'phpVars', $data );
wp_enqueue_script( 'slickinit' );
//Example 2 - passing in booleans and integers as the correct type by nesting the array in another for protection
//And by casting the data type such as (bool) and (int)
$options = get_option('ng_slicknavmenu');
$data = array (
'ng_slicknav' => array(//array nested to protect boolean and integer values
'ng_slicknav_menu' => $options['ng_slicknav_menu'],
'ng_slicknav_position' => $options['ng_slicknav_position'],
'ng_slicknav_parent_links' => (bool) $options['ng_slicknav_parent_links'], // this is a boolean true/false
'ng_slicknav_child_links' => (bool) $options['ng_slicknav_child_links'], // this is a boolean true/false
'ng_slicknav_speed' => (int) $options['ng_slicknav_speed'],//this is an integer
'ng_slicknav_label' => $options['ng_slicknav_label'],
),
);
// Pass PHP variables to jQuery script
wp_localize_script( 'slickinit', 'phpVars', $data );
wp_enqueue_script( 'slickinit' );
<?php
//Our Plugin Function Registering and Enqueing our needed scripts
function wpb_scripts_styles() {
//Our main JQuery init script
wp_register_script ( 'jsinit' , plugins_url( '/js/js-init.js', __FILE__ ), array( 'jquery' ), '1.0.0', false );
//Calling our stored db wp_options field
$options = get_option( 'wpb_stored_options_test' );
//Wrapping our values in an array = $data
$data = array (
//Wrapping our values in an inner array to protect boolean and integers = wpb_stored
'wpb_stored_inner' => array(
//Assigning our required values from the db
'wpb_stored_name' => esc_html( $options['wpb_stored_name'] ), //this is a string
'wpb_stored_string' => esc_html( $options['wpb_stored_string'] ), //this is a string
'wpb_stored_truth' => (bool)$options['wpb_stored_truth'], // this is a boolean true/false
'wpb_stored_number' => (int)$options['wpb_stored_number'], // this is an integer
),
);
// Pass PHP variables to jQuery init script 'jsinit'
wp_localize_script( 'jsinit', 'phpVars', $data );
// Enqueing our init script after wp_localise_script
wp_enqueue_script( 'jsinit' );
}
add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );
//Example 1 - Javascipt init file - using variables for Boolean and parseInt for Integer
//deal with the boolean
if( phpVars.ng_slicknav_parent_links === "true" )
$links = true;
else
$links = false;
if( phpVars.ng_slicknav_child_links === "true" )
$child = true;
else
$child = false;
jQuery(document).ready(function($){
ng_slicknav_speedInt = parseInt(phpVars.ng_slicknav_speed, 10); //deal with the integer
jQuery(document).ready(function($) {
$(phpVars.ng_slicknav_menu).slicknav({
prependTo:phpVars.ng_slicknav_position,
label:phpVars.ng_slicknav_label,
allowParentLinks:$links,
duration: ng_slicknav_speedInt,
showChildren: $child,
});
});
});
//results in
/* <![CDATA[ */
var phpVars = {"ng_slicknav_menu":"#menu-primary-navigation-1","ng_slicknav_position":"body","ng_slicknav_parent_links":"true","ng_slicknav_child_links":"false","ng_slicknav_speed":"400","ng_slicknav_label":"MENUGEDD0N"};
/* ]]> */
//Example 2 - Javascipt init file - values are being referenced using the nested array
jQuery(document).ready(function($) {
$(phpVars.ng_slicknav.ng_slicknav_menu).slicknav({
prependTo:phpVars.ng_slicknav.ng_slicknav_position,
label:phpVars.ng_slicknav.ng_slicknav_label,
allowParentLinks:phpVars.ng_slicknav.ng_slicknav_parent_links,
duration: phpVars.phpVars.ng_slicknav.ng_slicknav_speed,
showChildren:phpVars.ng_slicknav.ng_slicknav_child_links,
});
});
//results in
<script type="text/javascript">
/* <![CDATA[ */
var phpVars = {"ng_slicknav":{"ng_slicknav_menu":"#menu-primary-navigation","ng_slicknav_position":".navicon","ng_slicknav_parent_links":true,"ng_slicknav_child_links":true,"ng_slicknav_speed":600,"ng_slicknav_label":"ohhellomrmagoo"}};
/* ]]> */
</script>
//this returns proper formed boolean and integer values
jQuery(document).ready(function($) {
$(phpVars.wpb_stored_inner.wpb_stored_options_test).jquerysomething({
prependTo: phpVars.wpb_stored_inner.wpb_stored_name,
label: phpVars.wpb_stored_inner.wpb_stored_string,
duration: phpVars.wpb_stored_inner.wpb_stored_number,
showChildren: phpVars.wpb_stored_inner.wpb_stored_truth,
});
});
<?php
//Our Plugin Function Registering and Enqueing our needed scripts
function wpb_scripts_styles() {
//Our main JQuery init script
wp_register_script ( 'jsinit' , plugins_url( '/js/js-init.js', __FILE__ ), array( 'jquery' ), '1.0.0', false );
//Calling our stored db wp_options field
$options = get_option( 'wpb_stored_options_test' );
//Wrapping our values in an array = $data
$data = array (
//Wrapping our values in an inner array to protect boolean and integers = wpb_stored
'wpb_stored_name' => esc_html( $options['wpb_stored_name'] ), //this is a string
'wpb_stored_string' => esc_html( $options['wpb_stored_string'] ), //this is a string
'wpb_stored_truth' => $options['wpb_stored_truth'], // this is a boolean true/false
'wpb_stored_number' => $options['wpb_stored_number'], // this is an integer
);
// Pass PHP variables to jQuery init script 'jsinit'
wp_localize_script( 'jsinit', 'phpVars', $data );
// Enqueing our init script after wp_localise_script
wp_enqueue_script( 'jsinit' );
}
add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );
jQuery(document).ready(function($) {
$(phpVars.wpb_stored_options_test).jquerysomething({
prependTo: phpVars.wpb_stored_name,
label: phpVars.wpb_stored_string,
duration: phpVars.wpb_stored_number,
showChildren: phpVars.wpb_stored_truth,
});
});
@wpexplorer
Copy link

The easiest way is actually using json_encode...Ex:

$array = array(
'key' => json_encode( false ),
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment