I am wondering how do you do when you have to create a shortcode with multiple hover or complex options ( gradient, boxshadow etc, thing that can't be inline ). How do you generate the css.

I don't want to generate a <style></style> block because for a simple shortcode used 10 times in the page would generate 10 blocks.

All the shortcode are set from the page, by the user, so are created when the_content() is called.

I want to give the user the possibility to edit and custom the shortcode for exmample let the user choose what border-radius to use when button is hovered etc.

Looking for an option that would validate as html5 and in WC3.

Adding an ID to each shortcode and generate custom css is what I am looking to do but I can't find a way to do this properly ( without creating <style></style> block everywhere )

Any advice and examples are welcome.

Thanks in advance!

  • Add a class with necessary styles. Am i missing something here?
    – bravokeyl
    May 24, 2016 at 8:27
  • Thanks for your reply. If you want the user to be able to change the hover color etc to custom color when creating the shortcode, having a class with the necessary styles won't be enough. May 24, 2016 at 8:50
  • what is wrong with having 10 blocks of style? May 24, 2016 at 8:58
  • inline <style> blocks don't validate as html5 (but work just fine)
    – cjbj
    May 24, 2016 at 10:40
  • Thanks for the reply, yes <style> blocks will not validate which, that's why I want to avoid this and find an other way. May 24, 2016 at 11:03

1 Answer 1


Gradient and boxshadow are fine to put inline. Your trouble will be with the hover states. Luckily there is a trick. You can put the hover styles in an outer element and force inherit on hover. Like this:

<div class="myshortcode">
<a style="color:blue;"><span style="color:red;">Content</span></a>

In your style.css you add this generic line with a transition effect as bonus:

.myshortcode a span {transition:color 1s;}
.myshortcode a:hover span {color:inherit !important;}
  • Hello Cjbj, thanks for your reply. This will works fine with a simple shortcode, but for example if I want to create a box with a heading, sub title, content and a button and let the user choose the hover color for each part I will need to create a additional div for each element which doesn't seem to be the best way to me May 24, 2016 at 11:07
  • If you want only one div for every element, there is no place to store the hover states inline. Unless you use a very dirty trick. Put the normal styles in a style tag and the hover state in a title tag on your anchor element. Then on hover, use javascript to switch the values of the two tags.
    – cjbj
    May 24, 2016 at 11:15
  • thanks again for the fast reply. I have already thought about using javascript for the inline style but in fact I am wondering if there is no other way to put everything in one single <style> block at the top of the page or to generate custom css dynamically ( which is hard because everything generated dynamically is already set before the shortcode code ). Some people advised me to use "wp_add_inline_style" but I didn't succeed to use it in my shortcode without create a fatal error. May 24, 2016 at 11:21
  • wp_add_inline_style won't work anymore, because as you say the head of the site has already been generated when you come to the shortcode. If you want to assemble all styles into one <style> block you can have your shortcode write everything to a variable in your plugin. Then include a hook in your plugin that writes the variable to the footer. Beware that this will cause your page to be rendered without the styles first, because they arrive late.
    – cjbj
    May 24, 2016 at 11:27
  • All the shortcodes will be create from the page and created when the_content() functions is called. The idea is to give a custom id to each shortcode and link custom css that need to be generated when the shortcode is called, the problem is how generate the css in a "clean" way. May 28, 2016 at 5:45

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.