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

Home Forums Support How can i create a child theme that comprehends customizer settings?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #114779
    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 🙂

    #114781
    Tom
    Lead Developer
    Lead Developer

    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.

    #114784
    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?

    #114785
    Tom
    Lead Developer
    Lead Developer

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

    #114787
    Roberto Enrique

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

    #114789
    Tom
    Lead Developer
    Lead Developer

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

    #162568
    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 . . .

    #162599
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.