How do I use a color from theme options?

Question

I am building a theme, and in the options I have created a place for link color. I cant seem to get this into the theme in any reasonable way. The best I can do is to put it after wp_head ... but that doesn't seem right. The color will be a hex color so I cant just set up style sheets for a fixed number of colors and enqueue one of those conditionally. I suppose I could do this with jQuery but I really hope to not have to resort to that. I imagine all I am looking for is some way to enqueue an inline style, but does such a concept exist and if not what is the best way to go about it. I really thought link color options and the like would be commonplace and easy to implement.

Answer 1

You would simply call that option inside of a callback, and hook it into wp_print_styles or wp_head (either one is semantically correct in this case).

First, set up your callback, which will print an inline style sheet:

function wpse74013_print_custom_styles() {
    ?>
<style type="text/css">

</style>
    <?php
}
add_action( 'wp_head', 'wpse74013_print_custom_styles' );

The next step is to access your Theme option:

$options = get_option( 'my_theme_options' );

Now you need to apply the link color, which I'll assume is $options['link_color'], to your CSS. Let's assume that your link color is defined in style.css like so:

a { color:#0000FF; }

Simply replace the HEX value as appropriate:

a { color:#<?php echo $options['link_color']; ?>; }

Putting it all together in your callback:

function wpse74013_print_custom_styles() {
// Get Theme options
$options = get_option( 'my_theme_options' );
    ?>
<style type="text/css">
a { color:#<?php echo $options['link_color']; ?>; }
</style>
    <?php
}
add_action( 'wp_head', 'wpse74013_print_custom_styles' );

And that's it! You should see your inline stylesheet output in your document head, with the user's setting output for the link color HEX value.

Answer 2

wp_head is typically how it is done, at least for small cosmetic changes. What you should check out is the Theme Customization API, specifically the WP_Customize_Color_Control and the tuturials links at the bottom of that page. That way you can hook into a preview and change colors on the fly with a build in color wheel, then save which color you want.