Premium Customizer Plugin/Theme Rider

The Premium Customizer is a php file that allows theme designers to easily add customization features for their designs, so the users of the designs can quickly make a few simple changes to change the look of the blog. It’s not really a “plugin” per se, so I’m calling it a “theme rider” since it rides along with your theme to do its job.

Current Version: 1.0 (January 31st 2008)

Download: Download Premium Customizer Here

Wordpress Compatibility: Tested on 2.3.2, but should work on 2+

History:

When I was writing the What Makes A Premium Theme Premium? post, I started thinking about the fact that most designs are not easy to customize if you’re not a designer, or if you don’t know HTML. Then, I thought I could make a plugin that would help make it easier for users to change the designs (colors, layout, anything)

I was also concerned about the simplicity factor here - I didn’t want to create a WYSIWYG editor, and I definitely didn’t want to make users learn how to use one of those, so I decided that I’d leave the customizability up to the designers.

What I came up with was a pseudo plugin/theme code that you don’t have to activate, but you do have to include in your theme directory.

The best part? Once it’s set up, it’s KILLER easy to use

Installation Instructions:

When you’re designing your theme, you’ll need to download Premium Customizer and put the premiumcustomizer.php file in your theme directory (the same directory as the functions.php file). Then, add the following lines to your functions.php file:

require_once('premiumcustomizer.php');
$themeName = "YourThemeNameHere"; //No spaces allowed
if ($_GET['activated'] == ‘true’) {
    //Add Theme Options Here
}

Once you do that, PC will be up and running, but won’t do much of anything yet.

Usage:

Now that you have PC installed, you need to add your customization variables to it. You do that by adding the following code under where it says “//Add Theme Options Here” in the code you just pasted into the functions.php file:

$newOption = array('Name'=>'[Option Name]‘,’Type’=>’[Input Type]‘,’Style’=>’[Styling]‘,[Option Choices]);
    addThemeOption(’optionName’, $newOption, ‘[Default Value]‘);

In the code above, you’ll have to replace the following things: (In all of these values, the [ and ] aren’t needed in your code, you should remove them)

[Option Name] = The name you want displayed in the options page to describe this option. (IE: Text Color)
[Input Type] = The type of input you want to use. Available options include: Text, Select, Checkbox, and TextArea
    - Text displays a textbox, Select displays a drop down box, CheckBox displays a checkbox, and TextArea displays a text area (for entering lots of text)
[Styling] = Any CSS you want to use to display the Input box. IE - for TextArea, you will want to set a height and width here, so the box isn’t tiny.
[Option Choices] = If the Input Type is set to Select, then you can keep adding array items here to fill the drop down with choices for your users
[Default Value] = The default value for this option (the value it’s automatically set to when the user first activates the theme)

Example 1:
$textColors = array('Name'=>'Text Color','Type'=>'Select','White'=>'white','Black'=>'black','Blue'=>'blue');
addThemeOption('textcolor', $textColors, 'blue');

Will display a drop down box on the options page like this: 

WhiteBlackBlue

Example 2:
$Blogtitle = array('Name'=>'Titlebar Text','Type'=>'Text');
addThemeOption('title', $Blogtitle, 'Classic Blog');

Will display a text box on the options page like this:

Example 3:
$copyright = array('Name'=>'Copyright Info','Type'=>'textarea', 'Style'=>'height: 50px; width: 200px;');
addThemeOption('copyright', $copyright, 'Copyright © 2008 - Your Name');

Will display a text area on the options page like this: (I’m displaying the HTML here because of the limitations of the Wordpress WYSIWYG editor in displaying the textarea tag)<textarea style=”width: 200px; height: 50px”>Copyright © 2008 - Your Name</textarea>

Using The Options In Your Theme

When you have the options set up, now it’s time to use them in your theme! Using these values in your theme is very easy, but the usage will depend on what you need. Here are a few options:

(In all of the code below, [Option Name] should be replace with the name of the option you want to use - the [ and ] aren’t needed in your code)

Echo Text
    - You can easily display the text using the following code:

<?php echo getThemeOption('[Option Name]‘); ?>

This is great for the text, select, and textarea types

If Statements
    - You can use your option in an if statement using the following code:

<?php
if (getThemeOption('[Option Name]‘) == ’someValue’) {
    //Code for when the option is true goes here
}
?>

This is great for the checkbox and select option types.

Switch
    - If you’re using the select drop down box, you can either echo the text out, or you could use the value in a “switch statement” if you need to know which value the user selected

<?php
switch (strtolower(getThemeOption('[Option Name]‘))) {
             Case ‘value1′:
                //What to do when the case is value1 goes here
                break;
             Case ‘value2′:
                //What to do when  the case is value2 goes here
                break;
             Case ‘value3′:
                //What to do when the case is value3 goes here
                break;
        }
?>

You can use this for any number of Case statements, just add another one to the end, like I did for value2 and value3. Make sure you include the “break;” line before going on to the next Case statement, though, or you’ll have some problems!

The True Power of Premium Customizer

There are a number of things you can do with the options. I’m going to try to keep an all-encompasing list of them here, so you can benefit from the thoughts and ideas of others when you’re opening your design up with these customizations.

1) Customizable text areas, headers, titles, footers, etc.
     - Some themes have text areas, headers, and titles that aren’t directly related to current blog options. You can include custom options that the user can edit in the theme options page, without having them edit your theme at all - Use Echo Text for this

2) Changes to CSS styles, without changing the .css file (This is the real power of Premium Customizer)
    - Use the If or Switch statements to allow the user to choose certain aspects of your design. For instance, text color, background color, sidebar widths, sidebar location/placement, nubmer of sidebars, etc

3) AdSense areas
    - Use the textarea to let the user enter his/her own AdSense code quickly and easily

Leave a comment with your own ideas/experiences, and I’ll try to add them here on a regular basis!

For Your Users:

Your users simply activate your theme, then edit the options on the “ThemeName Theme Options” page under the Presentation Tab (it only shows up when the theme is activated)

The Options page will include all of your variables for them to edit to their hearts’ content! 

Known Bugs:
None