How to create color scheme for my custom theme?

1 Views

I would like to create color scheme for my custom template that can be changed inside my admin panel. According to this thread it can “easily” be done.

Author quotes: “create your color styles in seperate style sheets and name them like so. blue.css – black.css – brown.css – ect…. Then in your admin options panel you could add something simple like this”: 

array( "name" => "Color Scheme",  //color scheme
"desc" => "Select the color scheme for the theme",
"id" => $shortname."_color_scheme",
"type" => "select",
"options" => array("black","blue","brown","green","grey","orange","purple","red","white","yellow"),
"std" => "blue/blue"),

Now what I don’t understand is Where to add that code? I tried adding this to my: functions.php and index.php but it breaks my theme! This is my first time I am trying to create something like this so i am sorry for my noob question.
Can somebody help me how to add this functionality?
Thank you guys!!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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="<?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!!