I'm creating a WordPress theme and it's almost complete. I've created few shortcodes for some of the elements, including buttons with different color options like blue, green, red etc. What I want now is to allow users to be able to provide their own color hex value if they don't like the provided color options, like this for example:

[button color="#123423"]Button Text[/button]. 

Now I also know how I would get the value in the backend, but I just can't figure out how I will provide support for this in my CSS. For instance, I've got something like this:

    background: blue;
    background: green;

Now how can insert the user provided button color for that specific button?

  • First: why are you adding post-content shortcodes to a Theme? Second: please edit your question to include your shortcode callback; without seeing your actual code, there's no way to help answer your question specifically. – Chip Bennett Feb 16 '14 at 14:33

You have multiple options.

A) Use inline-CSS:

<button style="background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;">

B) Write (ID-specific) CSS styles into your page. In your shortcode function, echo a <style> tag, for instance like so:

#shortcode-button-1 {
    background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;

#shortcode-button-2 {
    background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;

For this method, you need to track your shortcode buttons, meaning: give them some unique ID that you use to target the buttons.

C) Use a dynamic style sheet (i.e., a shortcode-styles.php file that acts as a CSS file).

For this method, you need to register your shortcode buttons (e.g., in some global variable, a transient, an option etc.). Then, using some late-running hook (e.g., wp_footer, wp_print_footer_scripts etc.) you enqueue the php/CSS file, which could look something like the following:

header('Content-type: text/css');
// Suppose you are using a global variable for your shortcode buttons
global $shortcode_buttons;
foreach ($shortcode_buttons as $id => $color) {
    #shortcode-button-<?php echo $id; ?> {
        background: <?php echo $color; // maybe validate ?>;

Note: I did not test any of this, however, I hope you get the idea(s).

| improve this answer | |
  • Hi, thanks for the answer. I understood the first option, but I'm sure it's not the best method of the rest. For the second, is this the one where you use a php file to act as a css file? And for the third option, I think it is the best one as I've heard it is the best way to do it; however, is it done by using wp_add_inline_style function? which adds css to an existing stylesheet? i'm still reading about this. – user1981248 Feb 16 '14 at 12:31

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.