0

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:

.button-blue{
    background: blue;
}
.button-green{
    background: green;
}

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

1
  • 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. Feb 16, 2014 at 14:33

1 Answer 1

0

You have multiple options.


A) Use inline-CSS:

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


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

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

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

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:

<?php
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 ?>;
    }
    <?php
}
?>


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

1
  • 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. Feb 16, 2014 at 12:31

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.