Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
    
Thanks Chip, that's a fine comprehensive answer which I guess will be of benefit to others in the future as well as me now ... a veritable mini tutorial even ! –  byronyasgur Nov 27 '12 at 0:14
add comment

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.

share|improve this answer
    
Thanks, I was thinking about the customizer too but am I wrong in thinking that to use the customizer I would first have to have it working the traditional way via the theme options. I have a few customizer settings and that's how I've done them ( ie implement a regular theme option and then get it working in the customizer ) –  byronyasgur Nov 27 '12 at 0:12
    
Sort of, it would be easier to implement the Theme API, then if you have another custom area that needs those values use get_theme_mod and/or set_theme_mod, or just forget the theme API and hook your settings into wp_head. –  Wyck Nov 27 '12 at 5:29
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.