2. Theme Integration

If you are a theme author you may want to integrate QuadMenu right into your WordPress theme.

The QuadMenu integration is a really simple process that involves tree steps: the implementation of the plugin in your theme’s code, the integration within your theme and the customization to match your theme’s style.

2.1. Plugin Integration

To meet new theme submission requirements on themeforest you have to include the plugin with the TGM plugin.

Download the TGM Activation class from here and include it into your theme functions.php file.

require_once dirname( __FILE__ ) . '/class-tgm-plugin-activation.php';

Hook your theme with the tgmpa_register action and include the next function in your themes functions.php file.

add_action('tgmpa_register', 'quadmenu_required_plugin');

Add settings for TGM Activation class to activate or install the QuadMenu plugin in your themes activation. Make sure you upload the quadmenu.zip file in your themes folder.

For more information about TGMA please check this Github Repo

<?php

function quadmenu_required_plugin() {

$plugins = array(
array(
'name' => 'QuadMenu',
'slug' => 'quadmenu',
'source' => '/quadmenu.zip',
'required' => true,
'force_activation' => true,
'force_deactivation' => true,
),
);

$config = array(
'default_path' => get_template_directory(), // Default absolute path to pre-packaged plugins.
'menu' => 'tgmpa-install-plugins', // Menu slug.
'has_notices' => true, // Show admin notices or not.
'dismissable' => true, // If false, a user cannot dismiss the nag message.
'dismiss_msg' => '', // If 'dismissable' is false, this message will be output at top of nag.
'is_automatic' => false, // Automatically activate plugins after installation or not.
'message' => '', // Message to output right before the plugins table.
'strings' => array(
'page_title' => __('Install Required Plugins', 'liquidatheme'),
'menu_title' => __('Install Plugins', 'liquidatheme'),
'installing' => __('Installing Plugin: %s', 'liquidatheme'), // %1$s = plugin name
'oops' => __('Something went wrong with the plugin API.', 'liquidatheme'),
'notice_can_install_required' => _n_noop('This theme requires the following plugin: %1$s.', 'This theme requires the following plugins: %1$s.'), // %1$s = plugin name(s)
'notice_can_install_recommended' => _n_noop('This theme recommends the following plugin: %1$s.', 'This theme recommends the following plugins: %1$s.'), // %1$s = plugin name(s)
'notice_cannot_install' => _n_noop('Sorry, but you do not have the correct permissions to install the %s plugin. Contact the administrator of this site for help on getting the plugin installed.', 'Sorry, but you do not have the correct permissions to install the %s plugins. Contact the administrator of this site for help on getting the plugins installed.'), // %1$s = plugin name(s)
'notice_can_activate_required' => _n_noop('The following required plugin is currently inactive: %1$s.', 'The following required plugins are currently inactive: %1$s.'), // %1$s = plugin name(s)
'notice_can_activate_recommended' => _n_noop('The following recommended plugin is currently inactive: %1$s.', 'The following recommended plugins are currently inactive: %1$s.'), // %1$s = plugin name(s)
'notice_cannot_activate' => _n_noop('Sorry, but you do not have the correct permissions to activate the %s plugin. Contact the administrator of this site for help on getting the plugin activated.', 'Sorry, but you do not have the correct permissions to activate the %s plugins. Contact the administrator of this site for help on getting the plugins activated.'), // %1$s = plugin name(s)
'notice_ask_to_update' => _n_noop('The following plugin needs to be updated to its latest version to ensure maximum compatibility with this theme: %1$s.', 'The following plugins need to be updated to their latest version to ensure maximum compatibility with this theme: %1$s.'), // %1$s = plugin name(s)
'notice_cannot_update' => _n_noop('Sorry, but you do not have the correct permissions to update the %s plugin. Contact the administrator of this site for help on getting the plugin updated.', 'Sorry, but you do not have the correct permissions to update the %s plugins. Contact the administrator of this site for help on getting the plugins updated.'), // %1$s = plugin name(s)
'install_link' => _n_noop('Begin installing plugin', 'Begin installing plugins'),
'activate_link' => _n_noop('Activate installed plugin', 'Activate installed plugins'),
'return' => __('Return to Required Plugins Installer', 'liquidatheme'),
'plugin_activated' => __('Plugin activated successfully.', 'liquidatheme'),
'complete' => __('All plugins installed and activated successfully. %s', 'liquidatheme'), // %1$s = dashboard link
'nag_type' => 'updated' // Determines admin notice type - can only be 'updated' or 'error'
)
);

tgmpa($plugins, $config);
}

2.2. Menu Integration

QuadMenu allows you to use more than one menu. This is possible through the theme locations that are in your theme.

Each “theme location” can has its own instance of options under the configuration tab. Here you can activate the QuadMenu magic in the theme location and set the menu theme.

That’s why QuadMenu allows you to modify the style of each theme location by creating a theme of settings options.

2.2.1. Activate Your Theme Locations

The first step is to enable the QuadMenu in your theme locations. To do so, you have to set the theme locations via developers or default options.

See more about developer and default options

add_filter('quadmenu_developer_options', 'my_hook_developer_options_configuration', 1);

function my_hook_developer_options_configuration($defaults) {

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

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

    //$defaults['quadmenu_viewport'] = 1;

    //$defaults['quadmenu_styles'] = 1;

    //$defaults['quadmenu_styles_normalize'] = 1;

    //$defaults['quadmenu_styles_widgets'] = 1;

    //$defaults['quadmenu_icons'] = 'fontawesome';

    //$defaults['quadmenu_styles_pscrollbar'] = 1;

    return $defaults;
}

2.2.2. Create Your Menu Themes

Then you have to create your own menu themes to style each theme location.

add_filter('quadmenu_default_themes', 'my_hook_themes', 1);

function my_hook_themes($themes) {

        $themes['custom_theme_1'] = 'Custom Theme 1';
        $themes['custom_theme_2'] = 'Custom Theme 2';

        return $themes;
    }

2.2.3. Set Responsive Settings

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.

We recommend you include them as developer options unless your theme allows users to change the responsive layout.

add_filter('quadmenu_developer_options', 'my_hook_developer_options_responsive', 1);

function my_hook_developer_options_general($defaults) {

    $defaults['gutter'] = '30';
    $defaults['screen_sm_width'] = '768';
    $defaults['screen_md_width'] = '992';
    $defaults['screen_lg_width'] = '1200';

    return $defaults;
}

2.2.4. Set Layout Settings

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.

We recommend you include them as developer options unless you want to allow users to change menu layout.

add_filter('quadmenu_developer_options', 'my_hook_developer_options_themes', 1);

function my_hook_developer_options_themes($defaults) {

	$key1 = 'custom_theme_1';
	$key2 = 'custom_theme_2';

    // Layout
    // -------------------------------------------------------------------------    
    $defaults[$key1 . '_layout'] = 'collapse';
    $defaults[$key1 . '_layout_offcanvas_float'] = 'quadmenu-offcanvas-right';
    $defaults[$key1 . '_layout_align'] = 'quadmenu-align-right';
    $defaults[$key1 . '_layout_sticky'] = 1;
    $defaults[$key1 . '_layout_sticky_offset'] = '90';
    $defaults[$key1 . '_layout_separator'] = '';
    $defaults[$key1 . '_layout_caret'] = 'quadmenu-show-carets';
    $defaults[$key1 . '_layout_trigger'] = 'hoverintent';
    $defaults[$key1 . '_layout_classes'] = 'my_class';
    $defaults[$key1 . '_layout_breakpoint'] = '768';
    $defaults[$key1 . '_layout_hover_effect'] = '';
    $defaults[$key1 . '_layout_current'] = '';
    $defaults[$key1 . '_layout_animation'] = 'quadmenu_btt';

    // Layout
    // -------------------------------------------------------------------------    
    $defaults[$key2 . '_layout'] = 'vertical';
    $defaults[$key2 . '_layout_offcanvas_float'] = 'quadmenu-offcanvas-right';
    $defaults[$key2 . '_layout_align'] = 'quadmenu-align-right';
    $defaults[$key2 . '_layout_sticky'] = 1;
    $defaults[$key2 . '_layout_sticky_offset'] = '90';
    $defaults[$key2 . '_layout_separator'] = '';
    $defaults[$key2 . '_layout_caret'] = 'quadmenu-show-carets';
    $defaults[$key2 . '_layout_trigger'] = 'hoverintent';
    $defaults[$key2 . '_layout_classes'] = 'my_class';
    $defaults[$key2 . '_layout_breakpoint'] = '768';
    $defaults[$key2 . '_layout_hover_effect'] = '';
    $defaults[$key2 . '_layout_current'] = '';
    $defaults[$key2 . '_layout_animation'] = 'quadmenu_btt';

    //Fonts
    // -------------------------------------------------------------------------   
    $defaults[$key1 . '_general_font'] = array(
        'font-family' => 'Verdana, Geneva, sans-serif',
        //'google' => true,
        'font-size' => '11',
        'font-weight' => '400',
    );

    $defaults[$key1 . '_navbar_font'] = array(
        'font-family' => 'Verdana, Geneva, sans-serif',
        //'google' => true,
        'font-size' => '11',
        'font-weight' => '400',
    );

    $defaults[$key1 . '_dropdown_font'] = array(
        'font-family' => 'Verdana, Geneva, sans-serif',
        //'google' => true,
        'font-size' => '11',
        'font-weight' => '400',
    );

    return $defaults;
}

2.3. Menu Customization

Once you set the all other settings you can start to fit your theme color pallet by editing the default options.

2.3.2. Set Style Settings

Once you set the all other settings you can start to fit your theme color pallet by editing the default options.

If you have a custom theme panel maybe you can access the global $var of your theme and link the default settings of the menu with your theme’s settings.

Remember that you’ll have to compile the QuadMenu stylesheets on each change to update the CSS files.

add_filter('quadmenu_default_options_theme_{YOUR_THEME_LOCATION}', 'my_hook_default_options_theme', 1);

function my_hook_default_options_theme($defaults) {

    // Navbar
    // -------------------------------------------------------------------------    

    $defaults['navbar_logo'] = array(
        'url' => QUADMENU_URL . 'assets/frontend/images/logo.png'
    );
    $defaults['navbar_height'] = '60';
    $defaults['navbar_width'] = '260';
    $defaults['navbar_toggle_icon'] = '#ffffff';
    $defaults['navbar_toggle_hover'] = '#444444';
    $defaults['navbar_background'] = 'color';
    $defaults['navbar_background_color'] = array(
        'color' => '#333333',
        'alpha' => '1'
    );
    $defaults['navbar_background_to'] = array(
        'color' => '#000000',
        'alpha' => '1'
    );

    $defaults['navbar_background_deg'] = '17';
    $defaults['navbar_sharp'] = array(
        'color' => '#ffffff',
        'alpha' => '0.5'
    );
    $defaults['navbar_text'] = '#aaaaaa';

    $defaults['navbar_logo_bg'] = array(
        'color' => '#ffffff',
        'alpha' => '0'
    );

    $defaults['navbar_logo_height'] = '40';
    $defaults['navbar_link'] = '#f1f1f1';
    $defaults['navbar_link_hover'] = '#ffffff';
    $defaults['navbar_link_bg_hover'] = array('color' => '#111111', 'alpha' => '1');
    $defaults['navbar_scrollbar'] = '#fb88dd';
    $defaults['navbar_scrollbar_rail'] = '#ffffff';
    $defaults['navbar_button'] = '#ffffff';
    $defaults['navbar_button_bg'] = '#fb88dd';
    $defaults['navbar_button_hover'] = '#ffffff';
    $defaults['navbar_button_bg_hover'] = '#000000';
    $defaults['navbar_link_hover_effect'] = array('color' => '#fb88dd', 'alpha' => '1');
    $defaults['navbar_link_margin'] = array('border-top' => '0', 'border-right' => '0', 'border-left' => '0', 'border-bottom' => '0');
    $defaults['navbar_link_radius'] = 0;
    $defaults['navbar_link_transform'] = 'uppercase';
    $defaults['navbar_link_icon'] = '#eeeeee';
    $defaults['navbar_link_icon_hover'] = '#ffffff';
    $defaults['navbar_link_subtitle'] = '#eeeeee';
    $defaults['navbar_link_subtitle_hover'] = '#ffffff';
    $defaults['navbar_badge'] = '#fb88dd';
    $defaults['navbar_badge_color'] = '#ffffff';
    $defaults['layout_sticky_height'] = '60';
    $defaults['layout_sticky_background'] = array('color' => '#ffffff', 'alpha' => '0');
    $defaults['layout_sticky_logo_height'] = '40';

    // Dropdown
    // -------------------------------------------------------------------------
    $defaults['dropdown_margin'] = 0;
    $defaults['dropdown_radius'] = 0;
    $defaults['dropdown_border'] = array('border-all' => '3', 'border-top' => '0', 'border-color' => '#000000');
    $defaults['dropdown_background'] = array('color' => '#111111', 'alpha' => '1');
    $defaults['dropdown_scrollbar'] = '#fb88dd';
    $defaults['dropdown_scrollbar_rail'] = '#ffffff';
    $defaults['dropdown_title'] = '#ffffff';
    $defaults['dropdown_title_border'] = array('border-all' => '1', 'border-top' => '1', 'border-color' => '#fb88dd', 'border-style' => 'solid');
    $defaults['dropdown_link'] = '#cccccc';
    $defaults['dropdown_link_hover'] = '#fb88dd';
    $defaults['dropdown_link_bg_hover'] = array('color' => '#000000', 'alpha' => '1');
    $defaults['dropdown_link_border'] = array('border-all' => '1', 'border-top' => '1', 'border-color' => '#000000', 'border-style' => 'solid');
    $defaults['dropdown_link_transform'] = 'none';
    $defaults['dropdown_button'] = '#ffffff';
    $defaults['dropdown_button_bg'] = '#fb88dd';
    $defaults['dropdown_button_hover'] = '#ffffff';
    $defaults['dropdown_button_bg_hover'] = '#000000';
    $defaults['dropdown_link_icon'] = '#fb88dd';
    $defaults['dropdown_link_icon_hover'] = '#a9a9a9';
    $defaults['dropdown_link_subtitle'] = '#a0a0a0';
    $defaults['dropdown_link_subtitle_hover'] = '#cccccc';

    return $defaults;
}