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 want to link the selectbox to my CSS.

Like if I click an item on the list, the background of my header will change - the header's color is in the CSS.

The selectbox isn't in the html but it's in the options.php in the theme file and partly in the functions.php file.

So the point here is that if I click on the selectbox then there will appear 3 names and if I click one and save it then it should change the color to that "theme style".

Anyone have an idea how to get this done?

This is the related part on the header.php file :

<div id="theme-main">
<div class="cleared reset-box"></div>
<div class="theme-box theme-sheet">
<div class="theme-box-body theme-sheet-body">
    <div class="theme-header">
    <div class="theme-logo">
        <?php if(theme_get_option('theme_header_show_headline')): ?>
        <?php $headline = theme_get_option('theme_'.(is_single()?'single':'posts').'_headline_tag'); ?>
        <<?php echo $headline; ?> class="theme-logo-name"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></<?php echo $headline; ?>>
        <?php endif; ?>
        <?php if(theme_get_option('theme_header_show_slogan')): ?>
        <?php $slogan = theme_get_option('theme_'.(is_single()?'single':'posts').'_slogan_tag'); ?>
        <<?php echo $slogan; ?> class="theme-logo-text"><?php bloginfo('description'); ?></<?php echo $slogan; ?>>
        <?php endif; ?>
    </div>
    </div>

This is the related part of the options.php file :

$header_styles_options = array(
  'style1'        =>  __('Style 1', THEME_NS),
  'style2'        =>  __('Style 2', THEME_NS),
  'style3'        =>  __('Style 3', THEME_NS),
);

array(
  'id'    =>  'theme_style_options',
  'name'  =>  __('Theme styles', THEME_NS),
  'type'  =>  'select',
  'options'   =>  $header_styles_options
  ),
);

So if I select "Style 1" and save the options, then when I go on the site the header's color is changed.

share|improve this question

2 Answers 2

Not Recommended

  <?php if(theme_get_option('theme_style_options') == 'style1'): ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style1.css" />
    <?php elseif(theme_get_option('theme_style_options') == 'style2'): ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style2.css" />
    <?php elseif(theme_get_option('theme_style_options') == 'style3'): ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style3.css" />
    <?php endif;?>

OR

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/<?php echo theme_get_option('theme_style_options');?>.css" />

Use wp enqueue style instead

function my_theme_styles(){ 
    $style = theme_get_option('theme_style_options');
    wp_register_style( 'custom-style', get_template_directory_uri() . '/css/'.$style);

    // enqueing:
    wp_enqueue_style( 'custom-style' );
}
add_action('wp_print_styles', 'my_theme_styles');
share|improve this answer
2  
Please, no! Use wp_enqueue_style()! –  toscho Jun 19 '12 at 14:53
    
Thanks. how I vote you? –  Gembel Intelek Jun 19 '12 at 15:03
    
Thanks, I will try it tomorrow and let you know if it worked :) –  Potatohead Jun 19 '12 at 16:55
    
It works, Just a question though, why are there warnings when i try to login? And it doesnt show up like it should on IE :/ –  Potatohead Jun 20 '12 at 9:39

I think that using a lof of CSS files makes it difficult to maintain, mainly when you have one file with the Responsive Design. Also, to have one file with the basics and then another file with different colors isn't good because it makes more requests to the server, when making only one request would be enough.

In that case, my solution:

Use wp_enqueue_style in functions.php to insert your CSS stylesheet. Remove the style that you want to make it variable, for example:

body{/*color:blue*/}

In your header.php file:

<style type="text/css">
body{color:<?php echo get_option('option_id', 'blue'); ?>}
</style>

And yes, to use CSS code out of a CSS stylesheet is not perfect, but it will generate only one request to the server. It is worth.

share|improve this answer

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.