3. Compiler Integration

The QuadMenu stylesheets are created dynamically each time the user makes a change in the administration panel.

So if you want to integrate the compiler within your backend settings you have go through this tutorial.

Here we will provide two ways to trigger the compiler on the setting change in your theme panel.

3.1. Basic Integration

This method allows you to integrate the compiler in any theme framework.

3.1.1. Load Scripts

Include this function it into your theme functions.php file to include the js files of the compiler in the WordPress backend.

quadmenu.compiler_integration();

3.1.2. Trigger Compiler

Include this function it into your theme functions.php file to trigger compiler after the admin panel reload.

This function changes the quadmenu.compiler value to 1, and the js files included before will trigger the compiler.

You’ll have to do the right validation to call this function only when the settings related to the menu are changed and make sure the panel is reloaded.

quadmenu.compiler_integration();

3.2. Redux Integration

QuadMenu allows you to integrate the compiler with the Redux Framework panel. This is possible through the redux hooks and allows you to trigger the compiler without reloading the panel.

3.2.1. Load Scripts

Include this function it into your theme functions.php file to include the js files of the compiler in your Redux admin panel.

add_action('redux/page/' . QUADLAYERS . '/enqueue', 'quadmenu.compiler_enqueue');

3.2.2. Trigger Compiler

Once you set the theme locations where you want to activate QuadMenu you have to set some general parameters to fit the responsive layout of your theme.

Include this function it into your theme functions.php file to trigger compiler on the redux settings change.

add_filter('redux/options/' . QUADLAYERS . '/compiler', 'quadmenu_do_compiler');

3.2.3. Set Variables

Once you set the all responsive and font settings you have to define the layout of QuadMenu, that depends on your theme requirements and your imagination.

Include this function it into your theme functions.php file to integrate the QuadMenu variables in your redux admin panel that will be used to compile the stylesheets.

add_filter('redux/options/' . QUADLAYERS . '/ajax_save/response', 'quadmenu.compiler_variables')

3.3. Integration Example

Once you set the all responsive and font settings you have to define the layout of QuadMenu, that depends on your theme requirements and your imagination.

class QuadLayers_QuadMenu {

    function __construct() {

        //quadmenu_do_compiler();
        //quadmenu.compiler_integration();

        add_filter('quadmenu_default_themes', array($this, 'themes'), 999);

        add_filter('quadmenu_developer_options', array($this, 'options'), 999);

        add_action('redux/page/' . QUADLAYERS . '/enqueue', 'quadmenu.compiler_enqueue');

        add_filter('redux/options/' . QUADLAYERS . '/compiler', 'quadmenu_do_compiler');

        add_filter('redux/options/' . QUADLAYERS . '/ajax_save/response', 'quadmenu.compiler_variables');
    }

    function themes($themes) {

        $themes['header-1] = 'Header 1';        
        $themes['header-2] = 'Header 2';

        return $themes;
    }

    function options($options = array()) {

        global $quadlayers;

        $options['viewport'] = 0;

        $options['styles'] = 1;

        $options['styles_normalize'] = 1;

        $options['styles_widgets'] = 1;

        $options['styles_icons'] = 'fontawesome';

        $options['styles_pscrollbar'] = 1;

        $options['css'] = '';

        $options['social'] = $quadlayers['social'];

        // Locations
        // ---------------------------------------------------------------------

        $options['header-1_integration'] = 1;
        $options['header-1_theme'] = 'header-2';

        $options['header-2_integration'] = 0;
        $options['header-2_theme'] = 'header-2';

        // Themes
        // ---------------------------------------------------------------------

        $options['header-1_integration'] = $options['header-2_integration'] = 'manual';

        $options['header-1_layout_width_selector'] = $options['header-2_layout_width_selector'] = '.container';

        $options['header-1_layout'] = $options['header-2_navbar_mode'] = 'collapse';

        $options['header-1_layout_offcanvas_float'] = $options['header-2_layout_offcanvas_float'] = 'quadmenu-offcanvas-right';

        $options['header-1_layout_align'] = $options['header-2_layout_align'] = 'quadmenu-align-right';

        $options['header-1_layout_width'] = $options['header-2_layout_width'] = 'container';

        $options['header-1_layout_hover_effect'] = $options['header-2_layout_hover_effect'] = '';

        $options['header-1_layout_breakpoint'] = $options['header-2_layout_breakpoint'] = '768';

        $options['header-1_navbar_logo'] = $options['header-2_navbar_logo'] = $quadlayers['header_logo'];

        $options['header-1_layout_breakpoint'] = $options['header-2_layout_breakpoint'] = '768';

        $options['header-1_navbar_background'] = $options['header-2_navbar_background'] = 'color';

        $options['header-1_navbar_background_color'] = $options['header-2_navbar_background_color'] = $quadlayers['scheme_background'];

        return $options;
    }

}

new QuadLayers_QuadMenu();