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

Improve this question
8
  • wp_add_inline_style() would be my choice in most cases. Why the hover option is the problem and not the other?
    – cybmeta
    Commented May 16, 2016 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
    Commented May 16, 2016 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
    Commented May 16, 2016 at 9:09
  • So you want to use inline styles? What error are you getting on the buttons?
    – cjbj
    Commented May 16, 2016 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
    Commented May 16, 2016 at 9:43

1 Answer 1

Reset to default
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.

Improve this answer
2
  • 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
    Commented May 16, 2016 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
    Commented May 16, 2016 at 10:10

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.