Selectbox in admin panel function linking to CSS

Question

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.

Answer 1

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');

Answer 2

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.