Altering CSS

In the options panel we created previously, we defined three options: one for link color, one to add a custom header image, and a third for selecting a featured category.

Of those three, the first two only require simple CSS changes, so we'll start with them. Our options.php file has grown quite large, and so far still serves a single purpose: defining our custom options form. To keep our theme code organized, let's put the options-dependent CSS code into a separate file, which we'll call style-options.php and include in functions.php as follows:

chapter_07/v1/wicked/functions.php (excerpt)

// include style options include('library/style-options.php'

The first task in this file is to load in the saved options, or the defaults if none have been saved. We'll start a new function, and do just that:

chapter_07/v1/wicked/library/style-options.php (excerpt)

function wicked_load_custom_styles() { // load the custom options global $childoptions; foreach ($childoptions as $value) {

$$value['id'] = get_option($value['id'], $value['std']);

This is more boilerplate code: you can reuse it any time you want to load your theme options from the database. It dumps each option into a variable named after the option's id, so our wicked_link_color setting will now live in a $wicked_link_color variable.

The rest of this function simply needs to output the relevant CSS:

chapter_07/v1/wicked/library/style-options.php (excerpt)

// output a style sheet with the options ?>

<style type="text/css"> /* <![CDATA[ */ /* Color Options */ a, a:link, a:visited, #content a, #content a:link,

#content a:visited {color:#<?php echo $wicked_link_color; ?>;}

<?php if ($wicked_show_logo

background: transparent url('<?php echo *-get_bloginfo('stylesheet_directory') ?>/images/header.png') left top no-repeat; padding-left: 120px; height: 100px;

This part of the function spits out a <style> tag with our options handily included: we're echoing out the value of $wicked_link_color inside a rule, and testing for $wicked_show_logo to determine whether or not the header.jpg image should be shown.

To insert this <style> tag into our theme, we just have to hook the function into the wp_head action:

chapter_07/v1/wicked/library/style-options.php (excerpt) add_action('wp_head', 'wicked_load_custom_styles');

With this in place, the output of our function will be injected into the document's head, dropping the styles right where they need to be. At this point, you should already be able to change your theme's link color and header image (assuming you have a header.jpg file in the images directory). Sweet, eh?

Was this article helpful?

0 0

Post a comment