Expand use of Primary Color to include h2 and border under hero image

My theme (Esteem) uses Wordpress Customizer to select a Primary Color. Right now the Primary Color is applied to links and buttons. I would like to expand its use to the border below the hero image and the H2 tag. How can I do this? Yes, I am using a Child Theme, and expect that these changes will go in the functions.php file of the child theme.

  • Adam Czajczyk
    • Support Gorilla

    Hello Larry,

    I hope you're well today and thank you for your question!

    I downloaded and checked Esteem theme and I think a small snippet of a customized code added to your child theme's "functions.php" file should do the job.

    I'm not sure however about the "border under hero image" element. Is that the border marked on the screenshot below?

    Assuming that this is the element you'd like to affect than both this element and H2 tags should be affected with this code:

    add_action('wp_head', 'esteem_additional_custom_css');
    /**
     * Hooks the additional Custom Internal CSS to head section
     */
    function esteem_additional_custom_css() {
    
    	$esteem_internal_css = '';
    
    	$primary_color = get_theme_mod( 'esteem_primary_color', '#ED564B' );
    	if( $primary_color != '#ED564B' ) {
    		$esteem_internal_css .= '
    		.header-image {border-bottom-color:'.$primary_color.';}
    		h2 {color:'.$primary_color.';}
    		';
    	}
    
    	if( !empty( $esteem_internal_css ) ) {
    		?>
    		<style type="text/css"><?php echo $esteem_internal_css; ?></style>
    		<?php
    	}
    
    	$esteem_custom_css = get_theme_mod( 'esteem_custom_css', '' );
    	if( !empty( $esteem_custom_css ) ) {
    		?>
    		<style type="text/css"><?php echo $esteem_custom_css; ?></style>
    		<?php
    	}
    }

    This code should be added to "functions.php" of a child theme and should pick up and apply the primary color selected using Customizer.

    I hope that helps!
    Best regards,
    Adam

  • Larry Levenson
    • Recruit

    Adam,

    I like the code -- except it doesn't seem to work. I note that you need a period in the line h2 {color:'.$primary_color.';} I added a period after $primary_color. Your code makes sense, it just isn't displaying the primary color.

    If you see an adjustment that needs to be made, please go ahead and do that. Otherwise, I will test further on a new, clean esteem child theme tomorrow.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.