Integrating a Compiler

This article deals specifically with integrating a basic compiler hook for any Redux field. For an in depth article on how to use the compiler hook to dynamically generate a CSS file, please view the Updating a CSS File Dynamically article.

Setting up the Field

Each and every Redux field has a `compiler` argument. By setting this argument to true, a specified hook will fire whenever one of those field’s value changes.

Creating this magic is really quite easy. Let’s begin with this basic field:

array(
    'id'       =>'text',
    'type'     => 'text',
    'title'    => __('Test Compiler', 'redux-framework-demo'),
    'subtitle' => __('This is to test the compiler hook.', 'redux-framework-demo'),
    'desc'     => __('Each time this field is set, a flag is set. On save, that flag initiates a compiler hook!', 'redux-framework-demo'),
    'compiler' => true,
    'default'  => 'Test Compiler'
),

Note the 'compiler' => true argument. This sets the compiler flag. Now we need to hook into the fired hook. Add this snippet to your code:

Setting up the Compiler Function

Next, the compiler function itself needs to be set up. It requires two parts. The add_filter statement, and the actual function. Ideally, these codes would be placed within your config php file, however, it can be used anywhere in your code provided the opt_name portion of the add_filter line is replaced with the value specified in your opt_name argument. For this example, we’ll be using the example found in the sample-config.php.

In the initSettings section of the sample-config.php, sure the following line is included and/or uncommented:

add_filter('redux/options/' . $this->args['opt_name'] . '/compiler', array( $this, 'compiler_action' ), 10, 3);

Now, add (or uncomment) the following function to the Redux_Framework_sample_config class. This is our test function that will allow you see when the compiler hook occurs. It will only fire if a field set with 'compiler' => true is changed.

Please note that for this example, $css will return empty as this is only a basic compiler hook.

function compiler_action($options, $css, $changed_values) {
    echo '<h1>The compiler hook has run!</h1>';
    
    print_r ($options);
    print_r ($css);
    print_r ($changed_values);
}

If all has been set up correctly, you will see the compiler hook message and the passed values on your options panel after the field with the active compiler hook’s value has changed and settings saved.

Please note that if the output_tag argument is set to to false, Redux will not auto-echo a tag into the page header.

Tagged: