Hi, you've just installed Abban's theme options plugin, what you're looking at is the documentation for Web Designers and Web Developers. This documentation will detail exactly how to set it up, its pretty easy to do and you should be up and running in about 10 minutes.
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 is provides for are:
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.
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 } ?>
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 Them 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 } ?>
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.
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 } ?>
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.
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')): ?>
<img src="<?php echo get_option('ab_logo'); ?>">
<?php endif; ?>
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:
$dropdowns['Portfolio Columns'] = array('1_col'=>'1 Column', '2_cols'=>'2 Columns', '3_cols'=>'3 Columns', '4_cols'=>'4 Columns');
$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('dropdowns'=>$dropdowns,
'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. For dropboxes you need to specify a separate key name for each dropdown box you want. 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; ?>
You can also add groups of these options. If, for example, you wanted to group together some options for the layout of a portfolio page you can add something like the following to the ab_options_set array:
$portfoliodropdowns['Dropdown One'] = array('test_dropdown'=>'Test Dropdown');
$portfolioinputs = array('test_one'=>'Test One');
$portfoliotextareas = array('test_2'=>'Test Two');
$portfoliocheckboxes = array('test_three'=>'Test Three');
$groups[] = array('name'=>'Portfolio Options', 'description'=>'Here is where you can pick your portfolio options.', 'inputs'=>$portfolioinputs, 'textareas'=>$portfoliotextareas, 'checkboxes' => $portfoliocheckboxes, 'dropdowns' => $portfoliodropdowns);
And add it to the ab_options_set array like this:
$ab_options_set = array('groups'=>$groups);
It will then display those options in their own separate section on the theme options page of the admin panel, the name being passed is the name of the section and a description will be displayed too if passed. You can then print them in the theme the same way as normal. Remember that the $groups variable is an array containing arrays, so you can add as many groups to it as you like.
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.
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 here instead of this setup guide.
There is a fancy version of the admin panel available, this looks a lot nicer than the standard panel but doesn't feel as integrated into WordPress. You can turn it on by adding the following the the ab_options_set array:
$ab_options_set = array('fancy_admin'=>true);
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);
$portfoliodropdowns['Dropdown One'] = array('test_dropdown'=>'Test Dropdown');
$portfolioinputs = array('test_one'=>'Test One');
$portfoliotextareas = array('test_2'=>'Test Two');
$portfoliocheckboxes = array('test_three'=>'Test Three');
$groups[] = array('name'=>'Portfolio Options', 'description'=>'Here is where you can pick your portfolio options.', 'inputs'=>$portfolioinputs, 'textareas'=>$portfoliotextareas, 'checkboxes' => $portfoliocheckboxes, 'dropdowns' => $portfoliodropdowns);
$ab_options_set = array('template_styles'=>$styles,
'layout'=>$layout,
'fancy_admin'=>true,
'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,
'groups'=>$groups);
}
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);
If you have any feedback or would like to suggest a new feature please drop me a mail to himself@abandon.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.