[Support request] Creating heading classes via customizer settings

Home Forums Support Creating heading classes via customizer settings

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1378881
    Tyler

    Hey there GP Team!

    I have a full size scale set on my h1-h6. The trouble is certain headings are too big/small, but would be semantically incorrect to use an h2 instead of an h3 for sizing only.

    I’d like to get some classes added like Bootstrap has – h1, .h1 {} so that the h1-h6 styling can be mimicked while keeping semantics, EG:

    <p class="h2">h2. Bootstrap heading</p>

    I could write these styles manually, but that’d defeat the purpose of the customizer..or, at minimum, they’d become out of sync when one was adjusted.

    My thought was to copy the inc > css-output.php to my child theme and start hacking away but wanted to double check if there was a better alternative you might have in mind.

    Thank you!

    #1379115
    David
    Staff
    Customer Support

    Hi there,

    you could try a custom function like this:

    // Generate Custom CSS from existing Customizer settings
    function db_custom_css_output() {
        if ( ! function_exists( 'generate_get_defaults' ) ) {
            return;
        }
    
        $generate_settings = wp_parse_args(
            get_option( 'generate_settings', array() ),
            generate_get_defaults()
        );
    
        if ( ! class_exists( 'GeneratePress_CSS' ) ) {
            return;
        }
    
        if ( ! function_exists( 'generate_get_font_family_css' ) ) {
            return;
        }
    
        $css = new GeneratePress_CSS;
    
        // Get custom CSS properties from database
        // Change Selctor to CSS Class instead of element tag
        // Settings from CSS-output.php 
    
        $h1_family = generate_get_font_family_css( 'font_heading_1', 'generate_settings', generate_get_default_fonts() );
        $h2_family = generate_get_font_family_css( 'font_heading_2', 'generate_settings', generate_get_default_fonts() );
        
        $css->set_selector( '.h1' );
        $css->add_property( 'font-family', $h1_family );
        $css->add_property( 'font-weight', esc_attr( $generate_settings['heading_1_weight'] ) );
        $css->add_property( 'text-transform', esc_attr( $generate_settings['heading_1_transform'] ) );
        $css->add_property( 'font-size', absint( $generate_settings['heading_1_font_size'] ), false, 'px' );
        $css->add_property( 'line-height', floatval( $generate_settings['heading_1_line_height'] ), false, 'em' );
        $css->add_property( 'margin-bottom', floatval( $generate_settings['heading_1_margin_bottom'] ), false, 'px' );
        
        $css->set_selector( '.h2' );
        $css->add_property( 'font-family', $h2_family );
        $css->add_property( 'font-weight', esc_attr( $generate_settings['heading_2_weight'] ) );
        $css->add_property( 'text-transform', esc_attr( $generate_settings['heading_2_transform'] ) );
        $css->add_property( 'font-size', absint( $generate_settings['heading_2_font_size'] ), false, 'px' );
        $css->add_property( 'line-height', floatval( $generate_settings['heading_2_line_height'] ), false, 'em' );
        $css->add_property( 'margin-bottom', floatval( $generate_settings['heading_2_margin_bottom'] ), false, 'px' );
    
        return apply_filters( 'db_custom_css_output', $css->css_output() );
    }
    
    // Enqueue custom styles within generate-style-inline-css
    add_action( 'wp_enqueue_scripts', function() {
        wp_add_inline_style( 'generate-style', db_custom_css_output() );
    }, 100 );

    Add more styles from the CSS-output.php – heres where the .h1 came from:

    https://github.com/tomusborne/generatepress/blob/cd3de8b045136141358cbf273a6efbd9fad3732a/inc/css-output.php#L407-L413

    #1379464
    Tom
    Lead Developer
    Lead Developer

    Just a heads up that this kind of thing uses internal functions and classes that may change in the future, so keep an eye on update changelogs if you end up using it 🙂

    #1379658
    Tyler

    Wow, that is slick. This is why GP’s the best. Thank you!

    Tom, any interest or solution to potentially wrapping this and other utility classes into core?

    #1379792
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It’s never come up before, but I’ll definitely consider it.

    In most cases, I think it’s likely a lot more simple to just add your custom CSS (it’s only a handful of lines).

    Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.