Abandon WordPress Admin Options Plugin & Starter Theme.

Download the plugin.Download the theme.

Usage Guide

OK, what does is it lets you easily add the most common template options you use when designing and developing a new theme. The current options provided for are:

1. Theme Style Options
   What I mean by this is you might want to give the user a choice of multiple colour schemes for the theme. This lets you add as many or as few as you like.
2. Theme Layout Options
   You might want to let the user choose between a few different layouts such as the sidebar on the left or the sidebar on the right. As with the colour options you can add as many as you like.
3. Custom Editor Styles
   This is pretty smart, it adds a style dropdown on the WordPress text editor that you can add custom styles to. When the user selects some text and then selects the style they want from the dropdown it wraps that text in a span with the class you specified. NO MORE SHORTCODES!
4. Adding & Removing Social Networks
   On the WordPress user profile page there are a few social network text boxes that let the user enter their details, for some reason they don’t include Twitter or facebook in there… what this option does is let you remove the useless ones like AIM and add in new ones. You can add any new ones you want and then you can print them out in as social network icons in your theme.
5. Site Tracking Code
   This is just a textbox to let the user enter their Google Analytics code or whatever.
6. Favicon, Apple Icon & Logo
   This lets the user upload a custom favicon, an Apple touch icon and a custom logo to the site.
7. Checkboxes, Input Boxes and Textareas
   These features let you add as many checkboxes, input boxes or textareas as you like. You can use it to add various other options that this plugin doesn’t cover.
8. Custom Post Types & Taxonomies
   This lets you add as many custom post types and taxonomies as you want to.
9. Custom Documentation
   This lets you add custom documentation that will add a documentation page on the users site.

To get this plugin to work with your theme all you have to do is create a function in your functions.php file like this:

//set up the options for Abbans theme options plugin
function ab_set_options(){
	global $ab_options_set;
    $ab_options_set = array();
}
add_filter('init','ab_set_options',9,1);

You can call this function anything you like but make sure you hook it to the WordPress init function and give it priority 9. You must declare the variable as a global and call it ‘$ab_options_set’ though as this is how you turn on the options you want to use. I’m going to go through exactly how you set up each type of option in detail adding the code bit by bit. You will then be able to see exactly how it works. Its very easy.

1. Theme Style Options

To add your theme style options you simply add this to your function:

$styles = array('lightgreen'=>'Light Green', 'darkblue'=>'Dark Blue');

You can see it has 2 styles in there, Light Green and Dark Blue. You can add as many as you like. Then you add this snippet into the $ab_options_set array, like this:

$ab_options_set = array('template_styles'=>$styles);

So your whole function should now look like this:

//set up the options for Abbans theme options plugin
function ab_set_options(){
	$styles = array('lightgreen'=>'Light Green', 'darkblue'=>'Dark Blue');

    $ab_options_set = array('template_styles'=>$styles);
}
add_filter('init','ab_set_options',9,1);

This is more or less the method you need to use to add every option. They do change a little depending on the type of option though. A good way to use this option in your theme would be to attach a different stylesheet to it depending on the option picked. You then need to put this into the header:

<!--?php if(get_option('ab_template_styles')=='lightgreen'){ ?-->
	//YOUR LIGHT GREEN STYLESHEET CODE
<!--?php }elseif(get_option('ab_template_styles')=='darkblue'){ ?-->
	//YOUR DARK BLUE STYLESHEET CODE
<!--?php } ?-->

2. Theme Layout Options

This works in almost the same way as the Theme Style Options. You need to add the following array with the options you want into the function:

$layout = array('sidebarleft'=>'Sidebar on the left', 'sidebarright'=>'Sidebar on the right');

And into the ab_options_set array:

$ab_options_set = array('layout'=>$layout);

Your full function with both the Theme Style Options and the Theme Layout Options would look like this:

//set up the options for Abbans theme options plugin
function ab_set_options(){
    $styles = array('lightgreen'=>'Light Green', 'darkblue'=>'Dark Blue');
    $layout = array('sidebarleft'=>'Sidebar on the left', 'sidebarright'=>'Sidebar on the right');

    $ab_options_set = array('template_styles'=>$styles,
                            'layout'=>$layout);
}
add_filter('init','ab_set_options',9,1);

And to use it in your template you would do this:

<!--?php if(get_option('ab_layout')=='sidebarleft'){ ?-->
	//CODE FOR SIDEBAR LEFT
<!--?php }elseif(get_option('ab_layout')=='sidebarright'){ ?-->
	//CODE FOR SIDEBAR RIGHT
<!--?php } ?-->

3. Custom Editor Styles

The Custom Editor Styles are also easy to set up. What you need to to is declare a variable like this:

$mce_styles='DROPDOWN_NAME=CLASS_NAME';

DROPDOWN_NAME is the name you want displayed in the WordPress text editor and CLASS_NAME is the name it will give the class. So:

$mce_styles='Tooltip=tooltip';

Would show Tooltip in the dropdown menu and then wrap a span class tooltip around what was selected. To add multiple classes to it you simply declare it like:

$mce_styles='Tooltip=tooltip&Second Style=secondstyle';

You then need to add it to your ab_option_set array like this:

$ab_options_set = array('mce_styles'=>$mce_styles);

Then all you have to do is write css classes for the custom styles and add them to the themes stylesheet.

4. Add & Remove Social Networking Widgets

This lets you control what social networking fields are on the user profile page for them to enter. You need to add 2 new variables to the function to get this to work, one for adding new networks, one for removing ones you don’t want. You add it like this:

$custom_contact = array('twitter'=>'Twitter','facebook'=>'Facebook');
$contact_remove = array('yim','aim','jabber');

And the following to the array:

$ab_options_set = array('custom_contact'=>$custom_contact,
                        'contact_remove'=>$contact_remove);

To add new ones you need to provide an array key for them and a display name. To remove them you just need to specify the WP name for them. You will then see that the extra fields are in the profile page and the ones you wanted to remove are gone. You can print them out in your theme like this:

<?php if(get_the_author_meta('twitter')): ?>
	//SOME TEXT OR A LINK TO AN IMAGE
<?php } ?>

5. Site Tracking Code

Site tracking code is easy to add. All you need to do is add this to the ab_options_set array:

$ab_options_set = array('tracking'=>true);

And it will add a textarea into your custom options page. It then hooks whatever is put in there to the wp_footer() function.

6. Favicon, Apple Icon & Logo

Favicon works similar to the tracking code except it gives you a custom image upload field on the options page. You turn it on like this:

$ab_options_set = array('favicon'=>true, 'apple_icon'=>true, 'logo'=>true);

And apply them to the header and body of your theme by adding something like this:

<head>
    <?php if(get_option('ab_favicon')): ?>
        <link rel="shortcut icon" href="<?php echo get_option('ab_favicon'); ?>">
    <?php endif; ?>
    <?php if(get_option('ab_apple_icon')): ?>
        <link rel="apple-touch-icon" href="<?php echo get_option('ab_apple_icon'); ?>">
    <?php endif; ?>
</head>
</body>
    <?php if(get_option('ab_logo')): ?></pre>
        <img src="<?php echo get_option('ab_logo'); ?>" alt="" />
    <?php endif; ?>

7. Checkboxes, Input Boxes and Textareas

There is functionality built in for allowing you to add as many checkboxes, input boxes and textareas as you like. This will allow you to add the majority of miscellaneous options you need. Checkboxes to turn stuff on and off and inputs and textareas for any bits of text that you can’t fit in using built in WordPress functionality. To turn these features on you need to add this to the ab_options_set variable:

$checkboxes = array('show_photos'=>'Show Photos on front', 'option_2'=>'Option 2');
$inputs = array('copyright'=>'Copyright text for footer', 'option_3'=>'Option 3');
$textareas = array('footer_copy'=>'Footer Copy', 'option_4'=>'Option 4');
$ab_options_set = array('checkboxes'=>$checkboxes,
                        'inputs'=>$inputs,
                        'textareas'=>$textareas);

The keys array being set in the checkboxes, inputs and textareas variables is the input name and the values are what appears as the label when they’re printed. To print them in your theme you need to add ‘ab_’ to the key for example the ‘show_photos’ checkbox one would be printed as:

<?php if(get_option('ab_show_photos')): ?>
    //DO SOME SHOW PHOTOS STUFF
<?php endif; ?>

And the inputs and textareas such as copyright would be printed as:

<?php if(get_option('ab_copyright')): ?>
    <?php echo get_option('ab_copyright'); ?>
<?php endif; ?>

8. Custom Post Types & Taxonomies

This is probably the most difficult feature of the plugin to set up. This lets you set up as many custom post types as you like. What you need to do is save an array with the post type name as the key into the ab_otions_set variable. In this array you set up the various options. I’m going to set up a portfolio post type by adding the following code:

$supports = array('title', 'editor', 'custom-fields', 'revisions', 'excerpt', 'thumbnail', 'comments');
$post_types['Portfolio'] = array('singular'=>'Portfolio','plural'=>'Portfolio Items', 'supports'=>$supports, 'categories'=>TRUE, 'tags'=>TRUE);

What you need to set up is the singular name, the plural name, the options that the post type supports and if you want it to have its own categories and tags taxonomies. You can find out what options the post type supports here. You can add multiple post types by adding more items to the $post_types array. Adding both a portfolio post type and a skill feed post type would look like this:

$supports = array('title', 'editor', 'custom-fields', 'revisions', 'excerpt', 'thumbnail', 'comments');
$post_types['Portfolio'] = array('singular'=>'Portfolio','plural'=>'Portfolio Items', 'supports'=>$supports, 'categories'=>TRUE, 'tags'=>TRUE);
$supports = array('title', 'editor');
$post_types['Skill Feed'] = array('singular'=>'Skill Feed','plural'=>'Feed Items', 'supports'=>$supports, 'categories'=>TRUE, 'tags'=>TRUE);

You can see that the skill feed only supports the title and editor options. The all you have to do is add it to he ab_options_set array:

$ab_options_set = array('post_types'=>$post_types);

To add templates into you theme for these post types you need to add taxonomy-feed-items.php, taxonomy-portfolio-items.php, single-portfolio.php and single-feed-item.php into you theme folder. Take a look at the WordPress Template Hierarchy for more info.

9. Adding Your Custom Documentation

Adding your own documentation is also easy. You just create a page called documentation.html and save it into your theme. It will then appear in the documentation tab of the admin panel instead of the setup guide.

Full Function Printout

If you were to add every single feature I’ve documented above your function should look something like this:

//set up the options for Abbans theme options plugin
function ab_set_options(){
    global $ab_options_set;
    $styles = array('lightgreen'=>'Light Green', 'darkblue'=>'Dark Blue');
    $layout = array('sidebarleft'=>'Sidebar on the left', 'sidebarright'=>'Sidebar on the right');
    $mce_styles='Tooltip=tooltip';
    $custom_contact = array('twitter'=>'Twitter','facebook'=>'Facebook');
    $contact_remove = array('yim','aim','jabber');
    $checkboxes = array('show_photos'=>'Show Photos on front', 'option_2'=>'Option 2');
    $inputs = array('copyright'=>'Copyright text for footer', 'option_3'=>'Option 3');
    $textareas = array('footer_copy'=>'Footer Copy', 'option_4'=>'Option 4');
    $supports = array('title', 'editor', 'custom-fields', 'revisions', 'excerpt', 'thumbnail', 'comments');
    $post_types['Portfolio'] = array('singular'=>'Portfolio','plural'=>'Portfolio Items', 'supports'=>$supports, 'categories'=>TRUE, 'tags'=>TRUE);
    $supports = array('title', 'editor');
    $post_types['Skill Feed'] = array('singular'=>'Skill Feed','plural'=>'Feed Items', 'supports'=>$supports, 'categories'=>TRUE, 'tags'=>TRUE);
    $ab_options_set = array('template_styles'=>$styles,
                            'layout'=>$layout,
                            'tracking'=>true,
                            'favicon'=>true,
                            'logo'=>true,
                            'apple_icon'=>true,
                            'checkboxes'=>$checkboxes,
                            'inputs'=>$inputs,
                            'textareas'=>$textareas,
                            'mce_styles'=>$mce_styles,
                            'custom_contact'=>$custom_contact,
                            'contact_remove'=>$contact_remove,
                            'post_types'=>$post_types);
}
add_filter('init','ab_set_options',9,1);

There you have it, that code above is everything you need to set up your own awesome WordPress admin pages. Oh, one last thing, as I’m giving this plugin away for free I’ve added a donate button. If your theme is a free theme I’d appreciate if you would leave it turned on. But if it’s a premium theme or one for a client you can easily hide the box with:

$ab_options_set = array('remove_donation'=>true);

Feedback & Suggestions

This plugin is currently in beta so there may be a couple of bugs I’ve missed. If you find one or have any feedback or would like to suggest a new feature please drop me a mail to plugins[at]abandon[dot]ie or tweet me at @abbandunne.

I will be adding this to the WordPress plugin repo when I have it tested and then I will be adding new features over time. All the current features will be 100% backwards compatible though.

• 12th Jul 11
• Abban
• 3 comments