How to pass PHP variables to JavaScript in WordPress

Hisman — Sun, 29 Aug 2021 11:05:45 +0000

When you're building a WordPress theme or plugin, sometimes you have JavaScript code that needs to use data/values from PHP. For instance, you need these values in your JavaScript code :

Homepage URL
Theme option values
WordPress posts data
etc

The easiest way to do that is by initializing those values into JavaScript objects in your header.php theme file or wp_head hook. For example :

<script>
var myThemeParams = {
   homeURL: <?php echo home_url(); ?>,
   themeOptions: <?php echo get_theme_mod( 'mytheme_options', false ); ?>,
}
</script>

Even though it works but WordPress has been provided us with a function for doing something like that. It's called wp_add_inline_script.

wp_add_inline_script( $handle, $data, $position = 'after' )

$handle : Name of the script to add the inline script to.
$data : String containing the JavaScript to be added.
$position : Whether to add the inline script before the handle or after.

That function will add an inline script before or after your JavaScript code. It actually can do more besides passing PHP variables to JavaScript. You can see another use case here.

So, to use wp_add_inline_script for passing variables from PHP to JavaScript, you need to set the position properties to before so that it'll add the inline script before your JS file. And then initialize a JavaScript object and set the value with data from PHP.

$myThemeParams = array(
    'homeURL' => home_url(),
    'themeOptions' => get_theme_mod( 'mytheme_options', false )
);
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js' );
wp_add_inline_script( 'my-theme-script', 'var myThemeParams = ' . wp_json_encode( $myThemeParams ), 'before' );

In your JavaScript you can access it like this:

console.log( myThemeParams.homeURL );
console.log( myThemeParams.themeOptions );

Useful WooCommerce Hooks

Hisman — Sun, 15 Aug 2021 12:56:59 +0000

Hooks in WordPress are a way to add/modify some functionalities without directly editing the core files. There are two types of hooks: actions and filters. Actions let you add some code to run at specific points, whereas filters let you modify an existing variable.

Hooks can be used by calling the add_action or add_filter function in your plugin or the functions.php file in your theme. Those functions accept a callback function that contains your custom code.

Because WooCommerce is one of the most popular eCommerce plugins for WordPress. WooCommerce also implements some hooks to let other developers extend its functionalities. Below are some useful WooCommerce hooks that you can use on your website :

Change the Number of Products per Page

function change_products_per_page() {
    return 30;
}
add_filter( 'loop_shop_per_page', 'change_products_per_page' );

Change Breadcrumb Delimiter

function change_breadcrumb_delimiter( $defaults ) {
    $defaults['delimiter'] = '&nbsp;&gt;&nbsp;';
    return $defaults;
}
add_filter( 'woocommerce_breadcrumb_defaults', 'change_breadcrumb_delimiter' );

Hide Page Title

add_filter( 'woocommerce_show_page_title', '__return_false' );

Show Free Shipping Cost

function show_free_shipping_cost( $label, $method ) {
    if ( $method->cost > 0 ) {
        return $label;
    }

    return $label .= ': ' . wc_price(0);
}
add_filter( 'woocommerce_cart_shipping_method_full_label', 'show_free_shipping_cost', 10, 2 );

Disable Out of Stock Variation

function disable_out_of_stock_variation( $active, $variation ) {
    if( ! $variation->is_in_stock() ) {
        return false;
    }

    return $active;
}
add_filter( 'woocommerce_variation_is_active', 'disable_out_of_stock_variation', 10, 2 );