[Resolved] How can i create a child theme that comprehends customizer settings?

[Roberto Enrique]

I would like to create child themes from the mods I make with the customizer plus the custom code I’m adding.

Is there a way to do this?

Thanks in advance 🙂

[Tom]

You can use filters just like our child themes do:
https://wordpress.org/themes/freelancer/
https://wordpress.org/themes/mantle/
https://wordpress.org/themes/exhibit/
https://wordpress.org/themes/forefront/

For example, here’s one of the functions in the Mantle child theme:

if ( !function_exists( 'mantle_new_defaults' ) ) :
add_filter( 'generate_option_defaults','mantle_new_defaults' );
function mantle_new_defaults()
{
	$new_defaults = array(
		'hide_title' => '',
		'hide_tagline' => '',
		'logo' => '',
		'container_width' => '1100',
		'header_layout_setting' => 'fluid-header',
		'nav_alignment_setting' => 'center',
		'header_alignment_setting' => 'center',
		'nav_layout_setting' => 'fluid-nav',
		'nav_position_setting' => 'nav-above-header',
		'nav_search' => 'enable',
		'content_layout_setting' => 'separate-containers',
		'layout_setting' => 'left-sidebar',
		'blog_layout_setting' => 'left-sidebar',
		'single_layout_setting' => 'left-sidebar',
		'post_content' => 'full',
		'footer_layout_setting' => 'fluid-footer',
		'footer_widget_setting' => '2',
		'background_color' => '#222222',
		'text_color' => '#222222',
		'link_color' => '#1e73be',
		'link_color_hover' => '#222222',
		'link_color_visited' => '',
	);
		
	return $new_defaults;
}
endif;

So the idea behind it is:

'option_name' => 'option_value'

For colors:

if ( !function_exists( 'mantle_get_color_defaults' ) ) :
	add_filter( 'generate_color_option_defaults','mantle_get_color_defaults' );
	function mantle_get_color_defaults()
	{
		$mantle_color_defaults = array(
			'header_background_color' => '#ffffff',
			'header_text_color' => '#222222',
			'header_link_color' => '',
			'header_link_hover_color' => '',
			'site_title_color' => '#222222',
			'site_tagline_color' => '#999999',
			'navigation_background_color' => '#1e72bd',
			'navigation_text_color' => '#FFFFFF',
			'navigation_background_hover_color' => '#4f8bc6',
			'navigation_text_hover_color' => '#ffffff',
			'navigation_background_current_color' => '#4f8bc6',
			'navigation_text_current_color' => '#ffffff',
			'subnavigation_background_color' => '#4f8bc6',
			'subnavigation_text_color' => '#ffffff',
			'subnavigation_background_hover_color' => '',
			'subnavigation_text_hover_color' => '#06529e',
			'subnavigation_background_current_color' => '',
			'subnavigation_text_current_color' => '#06529e',
			'content_background_color' => '#FFFFFF',
			'content_text_color' => '#3a3a3a',
			'content_link_color' => '',
			'content_link_hover_color' => '',
			'content_title_color' => '',
			'blog_post_title_color' => '#1E72BD',
			'blog_post_title_hover_color' => '#222222',
			'entry_meta_text_color' => '#888888',
			'entry_meta_link_color' => '#666666',
			'entry_meta_link_color_hover' => '#1E72BD',
			'h1_color' => '',
			'h2_color' => '',
			'h3_color' => '',
			'sidebar_widget_background_color' => '#FFFFFF',
			'sidebar_widget_text_color' => '#3a3a3a',
			'sidebar_widget_link_color' => '#686868',
			'sidebar_widget_link_hover_color' => '#1e72bd',
			'sidebar_widget_title_color' => '#000000',
			'footer_widget_background_color' => '#ffffff',
			'footer_widget_text_color' => '#222222',
			'footer_widget_link_color' => '',
			'footer_widget_link_hover_color' => '',
			'footer_widget_title_color' => '#222222',
			'footer_background_color' => '#1e72bd',
			'footer_text_color' => '#ffffff',
			'footer_link_color' => '#ffffff',
			'footer_link_hover_color' => '#f5f5f5',
			'form_background_color' => '#FAFAFA',
			'form_text_color' => '#666666',
			'form_background_color_focus' => '#FFFFFF',
			'form_text_color_focus' => '#666666',
			'form_border_color' => '#CCCCCC',
			'form_border_color_focus' => '#BFBFBF',
			'form_button_background_color' => '#666666',
			'form_button_background_color_hover' => '#606060',
			'form_button_text_color' => '#FFFFFF',
			'form_button_text_color_hover' => '#FFFFFF'
		);
		
		return $mantle_color_defaults;
	}
endif;

Typography:

if ( !function_exists('mantle_get_default_fonts') ) :
	add_filter( 'generate_font_option_defaults','mantle_get_default_fonts' );
	function mantle_get_default_fonts()
	{
		$mantle_font_defaults = array(
			'font_body' => 'Open Sans',
			'body_font_weight' => 'normal',
			'body_font_transform' => 'none',
			'body_font_size' => '15',
			'font_site_title' => 'inherit',
			'site_title_font_weight' => '300',
			'site_title_font_transform' => 'none',
			'site_title_font_size' => '60',
			'font_site_tagline' => 'inherit',
			'site_tagline_font_weight' => 'normal',
			'site_tagline_font_transform' => 'none',
			'site_tagline_font_size' => '15',
			'font_navigation' => 'inherit',
			'navigation_font_weight' => 'normal',
			'navigation_font_transform' => 'none',
			'navigation_font_size' => '15',
			'font_widget_title' => 'inherit',
			'widget_title_font_weight' => '300',
			'widget_title_font_transform' => 'none',
			'widget_title_font_size' => '20',
			'widget_content_font_size' => '15',
			'font_heading_1' => 'inherit',
			'heading_1_weight' => '300',
			'heading_1_transform' => 'none',
			'heading_1_font_size' => '50',
			'font_heading_2' => 'inherit',
			'heading_2_weight' => '300',
			'heading_2_transform' => 'none',
			'heading_2_font_size' => '40',
			'font_heading_3' => 'inherit',
			'heading_3_weight' => '300',
			'heading_3_transform' => 'none',
			'heading_3_font_size' => '30',
			'font_heading_4' => 'inherit',
			'heading_4_weight' => '300',
			'heading_4_transform' => 'none',
			'heading_4_font_size' => '20',
		);
		
		return $mantle_font_defaults;
	}
endif;

Spacing:

if ( !function_exists( 'exhibit_get_spacing_defaults' ) ) :
	add_filter( 'generate_spacing_option_defaults','exhibit_get_spacing_defaults' );
	function exhibit_get_spacing_defaults()
	{
		$exhibit_spacing_defaults = array(
			'header_top' => '70',
			'header_right' => '40',
			'header_bottom' => '70',
			'header_left' => '40',
			'menu_item' => '30',
			'menu_item_height' => '60',
			'sub_menu_item_height' => '10',
			'content_top' => '40',
			'content_right' => '40',
			'content_bottom' => '40',
			'content_left' => '40',
			'separator' => '10',
			'left_sidebar_width' => '25',
			'right_sidebar_width' => '25',
			'widget_top' => '40',
			'widget_right' => '40',
			'widget_bottom' => '40',
			'widget_left' => '40',
			'footer_widget_container_top' => '40',
			'footer_widget_container_right' => '0',
			'footer_widget_container_bottom' => '40',
			'footer_widget_container_left' => '0',
			'footer_top' => '20',
			'footer_right' => '0',
			'footer_bottom' => '20',
			'footer_left' => '0',
		);
		
		return $exhibit_spacing_defaults;
	}
endif;

Let me know if this helps or not.

[Roberto Enrique]

Yes, now I understand.

I think this is going to open a whole new world for me BTW.

Does it work also if you don’t have the premium add-on plugin?

[Tom]

It works for the Colors, Spacing and Typography add-ons 🙂

[Roberto Enrique]

But it works for everything else if you have the add-ons, right?

[Tom]

Right – the core GP theme just has compatibility built in for those three 🙂

[NBC]

I see what you’re doing here: Setting up the defaults for the Customizer, category by category.

If I want to tinker with the Typography options in this fashion, do I need to deactivate the Typography component of GP Premium? Do I need to activate something else?

Also, it appears that one could add attributes or even sections to the Customizer through the PHP code. For example, you could reveal additional attributes of the footer, such as typeface, or add a section to Typography to allow the use of Google Fonts on a style that you defined yourself.

Would I have to create a custom version of a plug-in to do that? The PHP code that sets up the Customizer is part of the GP Premium plug-in, not GeneratePress itself, IIRC.

The problem with @font-face and the other methods of importing in one or more of the Google fonts is that when the page loads, the text appears in a generic typeface and then reloads slowly in the desired Google Font. That does not happen with type that’s styled directly through the Customizer. Without either customizing the PHP or using the import methods, however, it looks as if you can’t use Google Fonts on custom CSS.

All I want to do is to define one or more “pull quote” styles that use handwriting typefaces for testimonials. This should be really simple . . .

[Tom]

The flash you’re talking about shouldn’t really exist anymore, as modern browsers are getting better at display @font-face.

You would have to add custom programming to an an option to the Customizer and make it actually do something.

Instead, I would just follow the regular instructions for Google Fonts.

Find your Google Font, and then grab the <link href='https://fonts.googleapis.com/css?family=Your+Chosen+Font' rel='stylesheet' type='text/css'> line of code, and add to the wp_head hook in GP Hooks.

Then add a class to your quote, like: my-quote

Then you would add your CSS:

.my-quote {
    font-family: 'My Chosen Font', sans-serif;
}

[David]

Hi, can I please just cehck that the generate_color_option_defaults, generate_font_option_defaults and generate_spacing_option_defaults modifications above (using Mantle as the example) are all still current in temrs of best practice for changing these progrmatically? Thanks…

[David]

Hi there,

wow, this is a really old topic 🙂

generate_spacing_option_defaults is still used for the spacing option in GP Premium.

For colors etc which are in the free theme:

generate_option_defaults

See here:

https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L20

[David]

Thanks David, so in terms of setting default typography programatically, do we now need to filter generate_get_default_fonts somehow? If so, is there an example? Thank you

[David]

Theres the generate_font_option_defaults hook:

https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L313

And it would be used something like this:

add_filter('generate_font_option_defaults' function(){
    $defaults['font_body'] = 'My font';
    $defaults['font_body_category'] = 'sans';
    $defaults['font_body_variants'] = '100,300,700';
    $defaults['body_font_weight'] = 'normal';
    $defaults['body_font_transform'] = 'none';
    $defaults['body_font_size'] = '17';

    return $defaults;
});

But personally, i would just write up the typography needs in my stylesheet if i had no intention for those to be changed in the customizer.

[David]

Great, thanks as always David…

[David]

Hi David, sorry, I’ve just tried your new generate_font_option_defaults function and it seems to have no effect. Everything else in my fucntions file is ok and there are no caching issues. I’ve also checked the syntax of the function and all seems ok. Thanks…

[David]

Hmmm… not sure whats going on here.
I am going to pass this over to Tom to reply if thats ok.

[Author]

Posts