[Support request] Creating heading classes via customizer settings

[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!

[David]

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

[Tom]

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 🙂

[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?

[Tom]

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!

[James]

Hi folks, Piggy-backing on this older post because I have the same question.

I want to use GP/GB for an upcoming client project, but I need css classes for heading styling I can use semantically as needed, but I want them to respect the GP typography settings.

Is there a better way to do it than duplicating the typography settings both for a hX tag as well as a custom class? Ideally, I would like to avoid that duplication in a reliable way.

[Ying]

but I want them to respect the GP typography settings.

If the custom CSS for specific CSS classes doesn’t include typography CSS, then they will inherit the customizer settings.

Is there a better way to do it than duplicating the typography settings both for a hX tag as well as a custom class?

I don’t think this is a bad way. This is actually how Global style (a GB pro feature) works.

[James]

Hi Ying,

Thanks for the reply. I may have explained the respecting customizer part of my question poorly.

I have GP and GB Pro, so can access all features. Here is an example.
Say I have a h2 heading, but need it to visually look like an h4. In css that I write myself, I often define the h2 tag and .h2 class with the same styling, so that I can apply h2 style to non-h2 elements when needed. This is the same thing the original poster was asking about. So inheriting in the way you described doesn’t apply here. So ideally, when GP defines the hX tag css in the background, it would include a corresponding utility class as well – even if that is an optional feature.

I have used GB global styles for larger elements like sections but no for typography related stuff, so I will take a look at that option and see if it would help my use case.

[Ying]

If I understand correctly, you can use the Global style for it.

I made an example here.

1. Create a global style for the headline block which would look like an H4:
https://www.screencast.com/t/4kBsQmdwy

2. In the post, I added an H2 headline and assign the Global style h4 to it.
https://www.screencast.com/t/wK3SqtyBzlr5

Let me know if I miss anything 🙂

[Author]

Posts