Pre-create cutom controls via theme functions

Same question here, please let me know if you find something.

Obviously this isn’t the answer to your question, but maybe a reasonable 2nd choice. You can use the built-in WP export/import functionality to move the settings from site to site. Much easier than recreating by hand.

Thanks MarcGuay, that may be useful as a fallback for us. I did not realise you could export/import the settings.

I’m still hoping this can be done via functions/plugin though. I spent some time looking at the hooks/filters but haven’t had any luck yet. I’ll post here if I’m able to make any progress.

Hopefully the devs of EGF will have a good solution ??

Hi MarcGuay and quirkymaz,
Brace yourself this is going to be a long post! So in order to integrate this into your theme you probably would want to:

• De-register any default controls in the plugin
• Create your own font controls
• Group these font controls together

So to do this you would need to hook into the appropiate actions and filters to:

• Create a new tab/section to the typography panel (by hooking into the ‘tt_font_get_settings_page_tabs’ filter).
• Create a new font control and add it to that tab/section (by hooking into the ‘tt_font_get_option_parameters’ filter).

So here is a code example for you:

<?php
/**
 * How to add a new tab
 *
 * This function shows you how to add a new
 * tab/section to the typography panel in the
 * customizer.
 *
 * @param   array $tabs - Existing Tabs.
 * @return  array $tabs - Tabs with new tabs added.
 *
 * @since 1.0
 * @version 1.0
 *
 */
function custom_theme_add_tab_to_panel( $tabs ) {

    // Do this for each tab you want to create.
    // Make sure the array index matches the
    // 'name' array property.
    $tabs['theme-header'] = array(
        'name'        => 'theme-header',
        'panel'       => 'tt_font_typography_panel',
        'title'       => 'Custom Header Panel',
        'description' => 'This description will appear in the customizer. Use it to display a helpful message',
        'sections'    => array(),
    );

    // Return the tabs.
    return $tabs;
}
add_filter( 'tt_font_get_settings_page_tabs', 'custom_theme_add_tab_to_panel' );

/**
 * How to add a font control to your tab
 *
 * @see  parse_font_control_array() - in class EGF_Register_Options
 *       in includes/class-egf-register-options.php to see the full
 *       properties you can add for each font control.
 *
 *
 * @param   array $controls - Existing Controls.
 * @return  array $controls - Controls with controls added/removed.
 *
 * @since 1.0
 * @version 1.0
 *
 */
function custom_theme_add_control_to_tab( $controls ) {

    /**
     * 1. Here is an example on how to unset
     *    the defaults controls. comment or
     *    uncomment as necessary.
     */
    unset( $controls['tt_default_body'] );
    unset( $controls['tt_default_heading_1'] );
    unset( $controls['tt_default_heading_2'] );
    unset( $controls['tt_default_heading_3'] );
    // unset( $controls['tt_default_heading_4'] );
    // unset( $controls['tt_default_heading_5'] );
    // unset( $controls['tt_default_heading_6'] );

    /**
     * 2. Here is a small example on registering
     *    a font control to the theme's header tab.
     *    Again, make sure the array index matches
     *    the 'name' array property for this control.
     *    Rememeber each index in this array must be
     *    unique.
     *
     */
    $controls['theme_h1_control'] = array(
        'name'       => 'theme_h1_control',
        'title'      => 'Custom H1 Control',
        'tab'        => 'theme-header',
        'properties' => array(
                'selector'   => '.entry h1',
                'font_color' => '#FF0066',
                'font_size'  => array( 'amount' => 32, 'unit' => 'px' ),
        ),
    );

    // Return the controls.
    return $controls;
}
add_filter( 'tt_font_get_option_parameters', 'custom_theme_add_control_to_tab' );

Please Note: These kind of requests are normally outside the support I would provide, but I thought I’d give you guys a hand. Let me know how you get on. Cheers

Sunny

Sunny! Thank you so much!

I’ll have a play around with this over the next few days and report back ??

…ok it was too tempting to drop what I was doing and try this out straight away. It works perfectly Sunny, exactly what I needed. I’ve been able to add our default fonts options for users and haven’t come across any issues.

Again, thank you so much!

Glad I could help! Also if you could rate this plugin when you get a moment that would be great. Cheers

Sunny

No problem Sunny, already did that straight after trying this out ??

Thanks a lot Sunny! Are the font_color and font_size control properties supposed to be setting defaults? I don’t see any effect with or without them. (Just curious, I don’t need default settings.)

After looking at a var_dump of an existing selector I see that those properties would have to be inside of the “default” index like so:

$controls['theme_h1_control'] = array(
        'name'       => 'theme_h1_control',
        'title'      => 'Custom H1 Control',
        'tab'        => 'theme-header',
        'properties' => array(
                'selector'   => '.entry h1'
         ),
         'default' => array(
                'font_color' => '#FF0066',
                'font_size'  => array( 'amount' => 32, 'unit' => 'px' ),
         ),
    );

Hi MarcGuay,
Good catch! Apologies for that mistake, you are 100% right on that (I wrote that code freehand). To get an idea of what you can use as properties and default values take a look at the parse_font_control_array() static function in the file: class-egf-register-options.php (around line 536)

Cheers

Sunny

Dear Mr. Johal:

I have read this support thread with great interest, particularly your post on “How to add a new tab” and Mr. MarcGuay’s contribution. Although it has been said before, the code works flawlessly. Thanks a bunch for this and for your generosity.

I would like to abuse your generosity more, but will understand if you can not help me with the following:

1. I was able to build several font controls for my 2016 child theme. However, when I expand a font control, there’s no way to collapse it; you have to crash the customizer.

2. Instead of hard-coding a font size, I would like to have a way to create a slider for the control.

3. Except for the font drop down and the slider, I would like to eliminate the other options that appear.

Once again, any guidance is appreciated. Thanks and the best for you and yours.