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 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!!

share|improve this question
1  
Please include in your question your Theme's entire Settings API implementation. Otherwise, this question cannot reasonably be answered. –  Chip Bennett Feb 6 '13 at 15:31
    
I am not that good with php so I really didn't implement Settings API because i don't know what I must done to achieve that functionality ,is there any tutorial (from scratch and step by step instructions) regrading that issue? –  Dejo Dekic Feb 6 '13 at 15:42
    
WPSE really isn't the place for "from scratch and step by step instructions", as such questions are considered as work for me for free, overly-broad questions. But, I can point you to a Settings API tutorial I wrote some time ago, that should get you started. –  Chip Bennett Feb 6 '13 at 15:48
    
Thank you sir... –  Dejo Dekic Feb 6 '13 at 15:53

1 Answer 1

up vote 0 down vote accepted

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!!

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.