WordPress theme customizer – Useful custom Hooks

Ernest Marcinko Blog, Tutorials, Wordpress 2 Comments

In case you are not familiar with the WordPress customizer, I strongly recommend reading the following articles:

A few well known customizer hooks are well explained in the WordPress Theme Customization Api , however in some cases you need to dig further to achieve a more complicated task. In the next example I will show you, how to load certain scripts/styles into the site preview frame area only.

The customizer output window can be separated into three parts:
  • The customizer preview window
  • The site preview frame
  • The controlbar

custManipulating the header

After reading the API you will find, that the customize_preview_init hook will help you to add scripts and styles to the header. However this hook  modifies the whole customizer preview window header as well, and does not load  the modifications to the site preview frame.

This action hook allows you to enqueue assets (such as javascript files) directly in the Theme Customizer only. To output saved settings onto your live site, you still need to output generated CSS using the wp_head hook.Plugin API/Action Reference/wp head

In other words, the well know wp_head hook allows us to load the modifications from the controls, but this will also load on the main site! This is awkward and inconvenient. Fortunately, there is a way to check if the current site is in preview mode.

if ( !empty ( $GLOBALS['wp_customize'] ) ) {
    // We are in customize preview mode
} else {
    // We are in live mode
}

This way, you can separate the things you want to do in live mode, or in preview mode – this comes especially handy, if you are on production environment. But, let’s make a cleaner version of this:

  add_action( 'wp_head', 'custom_head_actions', 9999, 0 );

  function  custom_head_actions() {
    if ( !empty ( $GLOBALS['wp_customize'] ) ) {
       do_action("wp_head_preview");
    } else {
       do_action("wp_head_live");
    }    
  }

(I recommend putting this code  into the functions.php file of the template) How nice is this? Now you have two more actions:

wp_head_preview 
Fires when the site is in preview mode, aka. on the illustrated site preview frame
wp_head_live
Fires when the site is in live mode

Can we create similar codes for the content/footer/sidebar? Yes we can! In fact you can choose any hook that is generally loaded on the wordpress frontend. Here is an example for the wp_footer action:

  add_action( 'wp_footer', 'custom_footer_actions', 9999, 0 );

  function  custom_footer_actions() {
    if ( !empty ( $GLOBALS['wp_customize'] ) ) {
       do_action("wp_footer_preview");
    } else {
       do_action("wp_footer_live");
    }    
  }

  // Let's connect some functions with the newly created actions!

  add_action('wp_footer_preview', 'execute_in_preview', 9999, 0 );

  function execute_in_preview() {
    // This code executes in footer in preview mode :)
  }

  add_action('wp_footer_live', 'execute_in_live', 9999, 0 );

  function execute_in_live() {
    // This code executes in footer in live mode :)
  }

As you can see, the code is almost exactly the same. You can do this over and over for all available actions and filters.

If you have any questions, use the comment form below!

Comments 2

  1. Patrick

    I remember the first time I saw WordPress hooks was when I was working with JS (I’m no JS developer at all) and my god did it confuse me. I was using JobEngine and modifying it for a client. Hell :p

    Your explanation on customize_preview_init is clear though and helpful, thank you 🙂

Leave a Reply

Your email address will not be published.