Color Picker - Theme options

Question

I've been creating a Theme off my own back just teaching myself about the in's and out's of wordpress API.

Firstly this place has been of great use to me! Now for the question, recently just incorporated the WordPress color-picker into my theme options and i'm wondering if there is a way to manipulate the colour output to effect certain bits of CSS.

For example.

I use my color picker option in theme options to change the color of the site title.

I'd just like to know where exactly the output for the color goes and how it effect that certain piece of CSS.

Answer 1

Here is a great tutorial on how to add a colorpicker to your admin page.

Regardless of how you are adding a colorbox or what plugin you are using, assuming you added it by adding a field in your options table (as provided in the link), you can use the color value anywhere in your template files with a call to get_option:

$options = get_option( 'my-theme-options' );
$bg = $options['background'];

For example, as mentioned here, to colorize your first level headings add the call in your wp_head section.

function my_wp_head() {
    $options = get_option( 'my-theme-options' );
    $color = $options['color'];
    echo "<style> h1 { color: $color; } </style>";
}
add_action( 'wp_head', 'my_wp_head' );

Make sure you validate and escape appropriately when handling user inputs.