3

I have a question I would like to ask to the WordPress developers, Usually when creating a shortcode that need to generate custom css how do you proceed?

For example a simple button shortcode with the following options :

  • text
  • link
  • text color
  • background color
  • hover text color
  • hover background color

The problem is the hover color option, I would like to generate it dynamically directly to a css file without having to put any custom css in the head or inline <style></style> block in the page.

The shortcode need of course to work when used several time in the same page.

I am thinking about using wp_add_inline_style or wp_filesystem.

The main goal of this question is to create a shortcode with custom css added in a dynamic css file or a way to not add custom css directly in the page but to stil be able to add hover attribute.

If possible I would like to achieve this with only php html and css but if there is no solution I am also thinking to use javascript.

Any advice would be awesome.

Regards

  • wp_add_inline_style() would be my choice in most cases. Why the hover option is the problem and not the other? – cybmeta May 16 '16 at 8:18
  • As @cybmeta says, there should be no problem with hover states if you write css statements to a virtual file and add it dynamically. If you want to use inline style statements like <a style="color:red;"> there is a trick to enable hover states on that and still validate your page. – cjbj May 16 '16 at 8:31
  • Thanks for your answer, in fact using wp_add_inline_style would be the last option cause it still write css in the head of the page, also maybe I am not using it like I should but I am getting an error when generating two buttons in the same page. – Lucas Selsek May 16 '16 at 9:09
  • So you want to use inline styles? What error are you getting on the buttons? – cjbj May 16 '16 at 9:23
  • If possible I want to avoid inline styles on the page and put everything in css file dynamically, but I can't find a good way to do this, if this is not possible I would like to be able to put all the css in the head in 1 style block even if the shortcode is used "n" times. The problem I got with wp_add_inline_style() is a fatal error that tell me I can't redeclare my function that creates the inline style. – Lucas Selsek May 16 '16 at 9:43
3

The closest to a reference technique in core would be [gallery] shortcode.

If you look at the source of implementing gallery_shortcode() function you'll see that it:

  1. Generates instance number (so multiple shortcodes can be distinguished).
  2. Outputs dynamic CSS inline into a page source, for each instance.

I wouldn't consider it particularly neat solution, but it is about as close as it gets within constraints of WP shortcodes architecture.

  • Thanks for your reply, I was doing something similar before but I ended with too much dynamic css in the page. That's why I am try to find a way to generate the css in a css file if possible and not directly in the page or at least in the head in only one <style> block. Regards – Lucas Selsek May 16 '16 at 10:03
  • Generating dynamic CSS as separate HTTP request would be horrible on server load. You can certainly try to adjust technique to output CSS in the head, but many third party shortcodes break if post content is processed early. – Rarst May 16 '16 at 10:10

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.