0

I have a variable that picks up data from the theme settings like background image and such, and it's stored in a separate file with inline style like:

$style = 'style="'.$background_image.$background_color.'"';

The $background_image and $background_color are just css values for background_image and background_color that you can set in the options.

I'm using this variable in the header like

<header id="header" class="myheader" <?php echo $style; ?>>

Now this is not safe and should be sanitized, so I added esc_attr() to escape the attribute.

<header id="header" class="myheader" <?php echo esc_attr( $style ); ?>>

This, in turn, made my double quotes into &quot; and the style didn't work of course. Now I could put htmlspecialchars_decode() around the escaped value, but that kinda seems... odd.

Another solution would be to put the style directly in the header, and only put the escaped values in, which would solve the double quote issue, but in the case that no styling has been set I'm left with an empty style in my element, and that also seems kinda unnecessary.

What is the best solution out there?

Also if I use htmlspecialchars_decode() I still get a phpcs error about escaping function and that is utterly annoying...

Improve this question

2 Answers 2

Reset to default
1

Another solution would be to put the style directly in the header, and only put the escaped values in, which would solve the double quote issue, but in the case that no styling has been set I'm left with an empty style in my element, and that also seems kinda unnecessary.

You could e.g. check out wp_add_inline_style and only add the style if there exists a non empty CSS theme settings value.

Improve this answer
5
  • This could work, sure, but I think I'd have a lot of modification to do. The theme settings have settings for breadcrumbs, widget areas, footer etc. plus a whole lot of custom logic inside. Having an empty style inline is still a valid HTML, no?
    – dingo_d
    Commented Aug 25, 2016 at 11:11
  • I'm just wondering why you need the hardcoded style attribute in the HTML tags, if you define the custom/dynamic CSS within <style> e.g. via wp_add_inline_style() ? @dingo_d
    – birgire
    Commented Aug 25, 2016 at 11:16
  • 1
    I think empty style attributes like <div style=""></div> are valid, but one can prevent adding such an empty attribute with an if-check. But I think we should try to avoid "polluting" the HTML tags directly with such style attributes, if possible. It's usually harder to maintain and less flexible. @dingo_d
    – birgire
    Commented Aug 25, 2016 at 11:32
  • Well to be quite honest I am doing a code revision and it was added this way. If I'm not mistaken there was an inline css added by the customizer, and I think that the custom theme option didn't work unless it was in the element directly. I would also like to minimize the unnecessary inline styles if possible...
    – dingo_d
    Commented Aug 25, 2016 at 11:39
  • I see, good luck with the revision and cleanup ;-) @dingo_d
    – birgire
    Commented Aug 25, 2016 at 12:48
1

The correct way to handle the attribute sanitization (any attribute containing quotes) is by using wp_kses() function. In your specific case the result will look like the one below:

<header id="header" class="myheader" <?php echo wp_kses( $style, array('style' => array()) ); ?>>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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