Rendering css through a PHP file

Question

We know that in WordPress themes we often provide theme options where a layman who doesn't know the coding can also make changes in font style, color etc.

so when we generate user generated CSS in a php file how does it get implemented in the live website.

Code in css-functions.php →

function selected_typography() {
 $output='';
 $h1typography = of_get_option('h1typography');
 $h2typography = of_get_option('h2typography');
 $h3typography = of_get_option('h3typography');
 $h4typography = of_get_option('h4typography');
 $h5typography = of_get_option('h5typography');
 $h6typography = of_get_option('h6typography');


 if ($h1typography) {
   $output.='h1{
        font-family:'.tmarketo_charito_load_google_font_styles($h1typography['face']).';
        font-size:'.$h1typography['size'].';
        font-weight:'.$h1typography['style'].';
        color:'.$h1typography['color'].';
    }
    h1 a{
        font-family:'.tmarketo_charito_load_google_font_styles($h1typography['face']).';
        font-size:'.$h1typography['size'].';
        font-weight:'.$h1typography['style'].';
    }';
}

if ($h2typography) {
  $output.='h2{
       font-family:'.tmarketo_charito_load_google_font_styles($h2typography['face']).';
       font-size:'.$h2typography['size'].';
       font-weight:'.$h2typography['style'].';
       color:'.$h2typography['color'].';
       }';
   }
   return $output;
}

But the above CSS is not getting implemented on the live website. that means h2 and h1 don't show any change. Any suggestions or a Fix?

Additional information →

I purchased a premium theme → they are also doing it like this → https://www.screencast.com/t/GBvrEvqG98 and it works like a charm in their theme.

are you putting it inside a <style> block? It's not clear from the code. — ADyson
– ADyson, Commented Sep 7, 2017 at 15:55
CSS has to either be inside a style block in a HTML page, or in a .css file separately. Are you writing this into a separate file which is then sent to the browser? — ADyson
– ADyson, Commented Sep 7, 2017 at 15:57
can you show an example of the element which it's meant to style, and also an example where exactly this output gets put in the final HTML page and what it looks like? The PHP code on its own doesn't really tell us anything. If the style isn't being applied then either the final CSS syntax is wrong, or it's inserted into the page in an invalid way, or it doesn't target the elements you think it does. It's a lot easier to see those things by looking at the final HTML/CSS output than the code which tries to generate it. — ADyson
– ADyson, Commented Sep 7, 2017 at 16:03
All your sample above does is attempt to generate some standalone CSS. Outside of the context where it's meant to be applied, it's hard to say whether it's actually valid, or useful, or not. Possibly it isn't even being output to the page. Again I can't say because you've only shown a standalone function, and no context which shows how this output actually reaches the completed page. — ADyson
– ADyson, Commented Sep 7, 2017 at 16:05
ok thanks, but if you read my comments I was asking for an example of the HTML and CSS output. If we can see exactly what is wrong with the output which is causing the style not to be applied (much easier than trying to figure out that vast amount of code), then it'll be much easier to trace it to a fault in the generating code. It seems since you accepted the answer that I was potentially right and the CSS was either not being output at all, or being output without a <style> block round it. — ADyson
– ADyson, Commented Sep 7, 2017 at 16:19

David Lee · Accepted Answer · 2017-09-07 16:05:20Z

2

The user generated CSS its just 'echoed' either in the head or in the footer, using an action to do so, like this:

function hook_css() {
      $my_css = selected_typography();

      echo '<style>';
         echo $my_css;
      echo '</style>';
}
add_action('wp_head', 'hook_css');

For this to work, you need to make sure:

The values you expect from the function and from get_option are correct.
There are no syntax errors.
The style block is showing when inspecting the <head> block.
You are modifying the correct files.
There is no CSS overriding what you are trying to apply.

answered Sep 7, 2017 at 16:05

David Lee

8717 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WordCent Over a year ago

Oh my god sir. you are an angel. It worked sir. Nice!Nice!Nice!Nice!Nice!Nice! I wish I could give you 100+ upvotes.

WordCent Over a year ago

Accepted your answer sir.

Collectives™ on Stack Overflow

Rendering css through a PHP file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related