6

I'm creating a WordPress theme in which I've allowed users to add some custom css from the Theme Options. This css code then directly gets echoed out in the head section of the page, with the following code:

add_action('wp_head', 'theme_dynamic_css');
function theme_dynamic_css(){
  global $my_theme_options;
  $custom_css = '';
  if (isset($my_theme_options['custom-css'])) {
    $custom_css .= $my_theme_options['custom-css']."\r\n";
  }
  echo '<style id="my-theme-custom-css">'.$custom_css.'</style>';
}

Should I be using esc_html(); here? At first I assumed if the code is between the style tags, then it shouldn't be a problem, but now I'm confused.

Please help.

  • 1
    Have you considered using wp_add_inline_style? – Tom J Nowell Jul 8 '14 at 12:42
  • I believe you should be able to use single quotes when echoing your CSS, as long as all your CSS code uses double quotes? Can you put a var_dump() of $custom_css on here? (or at least part of it) – Dan Jul 8 '14 at 13:07
  • @TomJNowell I'm actually looking into that right now. I think I tried wp_add_inline_style earlier but was having some complications. – user1981248 Jul 8 '14 at 13:45
  • I'm not aware of any appropriate escaping functions, but wordpress.stackexchange.com/q/53970/3898 has some info about CSS sanitization. – Ian Dunn Nov 22 '15 at 14:23
1

What you (and probably 99% of the theme authors) are trying to do is just wrong. Users should not be expected to know CSS to customize a theme, and if they do need to go into such a low level, the right thing for them to do is to create a child theme and insert their modifications into its CSS file.

Inputting a CSS in the way you describe is tricky as CSS is not general html and can not be escaped in the same way, but it is also impossible to sanitize and remove potentially insecure code from it. What you end up with is a situation in which you have to output the user's CSS "as is" in order to be sure you do not break it, but then in the place where such a feature is most useful - multisite, it is too insecure to be used.

1

Instead of directly printing the CSS in the header (which is not the best practice) you can add your CSS via wp_add_inline_style. Hook into the wp_enqueue_scripts and add your CSS after your theme's stylesheet.

So, this is how your code is gonna look like:

add_action('wp_enqueue_scripts', 'theme_dynamic_css');
function theme_dynamic_css(){
  global $my_theme_options;
  if (isset($my_theme_options['custom-css'])) {
    $custom_css .= $my_theme_options['custom-css']."\r\n";
  }
  wp_add_inline_style('style', $custom_css);
}

You should use this after you already enqueued your theme's main stylesheet, by using:

wp_enqueue_style( 'style', get_stylesheet_uri());

Also pay attention to the ID that you've chosen for your stylesheet.

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.