How to create color scheme for my custom theme?

Question

Here is the answer to my question…

Add this to your functions.php

// Options Page Functions
function themeoptions_admin_menu() 
{
// here's where we add our theme options page link to the dashboard sidebar
add_theme_page("Theme Color", "Theme Color", 'edit_themes', basename(__FILE__), 'themeoptions_page');
}

function themeoptions_page() 
{
// here's the main function that will generate our options page 
if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update(); }
//if ( get_option() == 'checked'
?>
<div class="wrap">
    <div id="icon-themes" class="icon32"><br /></div>
    <h2>Theme Color</h2>
    <form method="POST" action="">
        <input type="hidden" name="update_themeoptions" value="true" />
        <h4>Colour Stylesheet To Use</h4>
        <select name ="colour">
            <?php $colour = get_option('mytheme_colour'); ?>
            <option value="red" <?php if ($colour=='red') { echo 'selected'; } ?> >Red Stylesheet</option>
            <option value="green" <?php if ($colour=='green') { echo 'selected'; } ?>>Green Stylesheet</option>
            <option value="blue" <?php if ($colour=='blue') { echo 'selected'; } ?>>Blue Stylesheet</option>
        </select>           
        <p><input type="submit" name="search" value="Update Options" class="button" /></p>
    </form>
</div>
<?php
    }
    function themeoptions_update()
   {
// this is where validation would go
update_option('mytheme_colour',     $_POST['colour']);  
if ($_POST['display_search']=='on') { $display = 'checked'; } else { $display = ''; }
update_option('mytheme_display_search',     $display);  
    }
    add_action('admin_menu', 'themeoptions_admin_menu');

Next step is to add code to header.php:

<link rel="stylesheet" type="text/css" media="all" href="https://wordpress.stackexchange.com/questions/84783/<?php bloginfo("stylesheet_url' ); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/<?php echo get_option('mytheme_colour'); ?>.css" type="text/css">

And last step is to add our css file (I will name it red.css) and style it like this:

#blog{
float: left;
width: 520px;
padding: 0 10px 10px 10px;
background-color:red !important;//now if user selects "Red Stylesheet" inside admin
                                    //area it will import an override default styling
                                    (in my case default is a white color)


   }

And you are done!! Hope this will help somebody else!!

Related Posts: