0

OK so I am working on a theme that utilizes the customizer a lot.

When you change a color for example, the necessary css gets added to the header, but when you click default, the css with the default value remains in the header.

So I went looking for a solution and discovered there was one under my nose the entire time. I found what I was looking for in the custom-header.php file of my theme. I used Twenty Twelve to make this theme so if you can take a look. I took the "twentytwelve_header_style" and changed it to this:

function wpforge_customize_css() {
$header_container = esc_attr(get_theme_mod( 'header_container_background_color' )); 
if ( $header_container == get_theme_mod( 'header_container_background_color', '#e6e6e6' ) ) 
return;
?>
<!--Customizer CSS-->
<style type="text/css" id="wpforge-customizer-css">
.header_container{background-color:<?php echo $header_container; ?>;}
</style>
<!--/Customizer CSS-->

I was surprised when it actually worked. No customizer-css showed in the header but when I selected a background color in the customizer, the proper css style showed in the header. Now when I set th value back to default, the css disappeared from the header. I thought to myself AWESOME!!!

So I tried to add another value to the same function and this is what I got:

function wpforge_customize_css() {
  $header_container = esc_attr(get_theme_mod( 'header_container_background_color' )); 
  if ( $header_container == get_theme_mod( 'header_container_background_color', '#e6e6e6' ) ) 
    return;
  $header_wrap_width = esc_attr(get_theme_mod( 'header_width' )); 
  if ( $header_wrap_width == get_theme_mod( 'header_width', '64rem' ) ) 
    return;
  ?>
<!--Customizer CSS-->
<style type="text/css" id="wpforge-customizer-css">
.header_container{background-color:<?php echo $header_container; ?>;}
.header_wrap{max-width:<?php echo $header_wrap_width; ?>;}
</style>
<!--/Customizer CSS-->

It worked perfect or so I thought. So I tried to add another to it and found that nothing would display until I selected something for one of the other elements, meaning I had to select something for the header container in order for the header wrap to work or show.

I'm no php expert and I cannot write a lick of code to save my life, but I do kind of understand it, enough to the point where I can tinker with it.

So I was wondering if anyone could show me how to write this function properly, so I can add multiple items to it and it will work. Where I can take this:

function wpforge_customize_css() {
  $header_container = esc_attr(get_theme_mod( 'header_container_background_color' )); 
  if ( $header_container == get_theme_mod( 'header_container_background_color', '#e6e6e6' ) ) 
    return;
  ?>
<!--Customizer CSS-->
<style type="text/css" id="wpforge-customizer-css">
.header_container{background-color:<?php echo $header_container; ?>;}
</style>
<!--/Customizer CSS-->

and make itit like this:

function wpforge_customize_css() {
  $header_container = esc_attr(get_theme_mod( 'header_container_background_color' )); 
  if ( $header_container == get_theme_mod( 'header_container_background_color', '#e6e6e6' ) ) 
    return;
  $header_wrap_width = esc_attr(get_theme_mod( 'header_width' )); 
  if ( $header_wrap_width == get_theme_mod( 'header_width', '64rem' ) ) 
    return;
  ?>
<!--Customizer CSS-->
<style type="text/css" id="wpforge-customizer-css">
.header_container{background-color:<?php echo $header_container; ?>;}
.header_wrap{max-width:<?php echo $header_wrap_width; ?>;}
</style>
<!--/Customizer CSS-->

and it works without having to select a value for the header_container just so the header_wrapper will appear

any help is greatly appreciated and thank you in advance.

  • Please correct your post title so that it is inline with your actual question. Thank you :-) – Pieter Goosen Feb 16 '15 at 11:32
  • I believe the title conveys what I am looking for, it's about a function which I got working to a certain degree, however I can't "wrap" my head around getting it do what I want it to do. However, do you have something in mind that you believe would be a better title? – tsquez Feb 16 '15 at 15:02
0

Your problem is that you return nothing if some of the options doesn't meet your criteria. For example, you are doing this:

if ( $header_container == get_theme_mod( 'header_container_background_color', '#e6e6e6' ) ) 
    return;

So, if $header_container is equal to #e6e6e6, the function return and stop further execution. You have to change that logic. For example (just a quick example):

function wpforge_customize_css() {

    $output = '';

    $header_container = esc_attr(get_theme_mod( 'header_container_background_color' )); 
    if ( $header_container != get_theme_mod( 'header_container_background_color', '#e6e6e6' ) ) {
        $output = '.header_container{background-color: '.$header_container.'}';
    }

    $header_wrap_width = esc_attr(get_theme_mod( 'header_width' )); 
    if ( $header_wrap_width != get_theme_mod( 'header_width', '64rem' ) ) {
        $output = '.header_wrap{background-color: '.$header_wrap_width.'}';
    }

    if( !empty($output) ) {

    ?>
        <!--Customizer CSS-->
        <style type="text/css" id="wpforge-customizer-css">
           <?php echo $output; ?>
        </style>
        <!--/Customizer CSS-->
    <?php
    }
}
?>
  • Thanks @cybmeta, bits and pieces of what you provided above worked and everything seems to be working good so far. I am testing each one as I add them in. If I run into an issue I will def come back here and ask for help ;) – tsquez Feb 19 '15 at 23:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.