Being able to develop faster is what most developers strive for, and that’s no secret. With the flexibility of WordPress and a few theme frameworks, you can already develop a WordPress site with ease and speed. But what if you could streamline the entire process? Below we’ve added a few quick tips that will allow you to do just that.

[Remember to subscribe to our feed for up-to-date development articles and resources!]

Set Up An Experimental Area

When you’re developing a theme or making core changes it’s essential to set up a workspace dedicated to experimenting and testing. It’ll save you tons of time and allow you to reduce errors. With an experimental area you’ll be able to pre-publish revisions, changes, and new themes.

This will give you enough space and time to thoroughly test and debug before releasing these changes so everyone can see. You can even use your same URL, just with a different directory. In example, YourSite.com/TestEnv

Use the Ubiquity Firefox Add-On

Ubiquity is a cutting edge add-on for Firefox, developed by Mozilla Labs. Ubiquity allows you to search WordPress and PHP documentation in an instant using these two plugins: PHP Search and WP Codex Search.

Learn Your Functions

By learning all of your WordPress functions you’re able to quickly make major changes to your WP theme layout. This will easily give you a major bucket of time and flexibility as well. You should start with the more common ones and work your way up from there. Before anything, take a look at your WordPress codex for further information and more.

Don’t Mess With Your WordPress Files Till the End

You know the files I’m talking about…and if you don’t, well here they are: index.php, sidebar.php, footer.php These files should be one of the last things you touch after you’ve finished coding your WordPress theme in CSS and HTML. You should always adjust cross-browser compatibility, test, test, and test some more, and anything else static files may need from you.

Delving into these core theme files before-hand will only set you back and take up a lot of your useful time. Now, that’s not to say there aren’t those special circumstances. After-all, nothing has been set in stone yet.

Create Your Own Options Panel

If you’ve ever purchased and uploaded a premium WordPress theme then you’re more than likely familiar with a theme’s Option Panel. These options will allow the user (you) to easily and quickly make minor (and a few major) changes without having to dive into any code. You’ll definitely streamline your future developmental needs and also the ones of anyone who purchase your theme (if you plan on selling).

Visit the following link to learn how you can create your very own theme options page.

What tips to streamline your development process have we missed? Please share with everyone, and add your own below!

WordPress is a powerful blogging and content management platform. It’s one of those applications that’s just right for almost every job. And with this powerful application, it deserves that you “dress” it with the best themes you can find. But that can be hard to do if you’re on a budget and you’ve realized that more than half of the “Free WordPress Themes” post truly suck.

This is especially why we’ve compiled this unique and almost perfect list of Free WordPress Themes that make the cut and can surely outdo the rest of not-so good themes that claim to be “premium”. Hope you enjoy! Please remember to subscribe to our feed and leave us a comment with your thoughts!

Compositio

Download

Bueno

Download

Aparatus

Download

AppCloud

Download

Good Theme

Download

Obscure

Download

Structure Theme

Download

Gallery

Download

Mayumi

Download

deStyle

Download

Simple Cart

Download

WPStream

Download

75Theme

Download

LiveTwit

Download

NewsPress

Download

Smashing Multimedia

Download

Satoshi

Download

Blue Rooster

Download

Gadgetizer Theme

Download

BlueBubble

Download

I am a huge fan of WordPress. Huge. More than just a blogging platform, WordPress has evolved into a content management tool that is ideal for many small to mid-sized websites. As a designer, WordPress gives me the tools to develop a website that clients can manage without needing my help (without having to call on a programmer). It let’s me get back to being a designer as opposed to a site administrator. It empowers my clients to share content, while it frees me up to solve their design and communication problems.

Building a website using WordPress means creating a series of template files, css files, and a functions file which together form the website’s theme. These files are separate from content, therefore site owners can manipulate content via the site admin panel without interfering with design. I get to control the look, clients get to control the content. And usually, that’s about all the control I want to provide.

However, designing for the web has continually meant giving up more and more control over design. Its something every designer struggles with. We’ve learned to build flexible, adaptable designs to accommodate various users, various screen sizes, various browsers.

Is it time to start offering flexible templates that give control over our designs to our clients? Probably not. At least, not in most cases. Designers spend a significant amount of effort choosing colors, typefaces, and layouts that solve the unique communication problems of our clients based on research and experience. Chances are, we’ll keep these choices out of the hands of our clients for their own sake.

And yet there may come a time that we want or need to give them a bit more control. Oh, not colors or font size, but maybe — just maybe — there are some choices and options we want to allow them to control.

Enter WordPress Theme Options

Advanced WordPress theme developers offer Theme Options in their publicly released themes (some free, some premium) to add value — offering varying levels of customization and giving theme users presentation options. Designers of custom themes intended for a single organization can put this same functionality to use to provide additional flexibility and accessibility for our clients.

There are a number of tutorials available online describing how to set up a basic options page for a theme (see Additional Resources below for a list), so I will not attempt to recreate those tutorials here. What I want to explore are the options that can serve designers developing a custom theme for a private entity (not a publicly released theme). The code below is built upon the framework developed by Themeforest in its tutorial “Create an Options Page for Your Wordpress Theme”, which you may want to reference in order to fully grasp the following ideas.

Moving right along, here are some ideas for how to use the Theme Options page on custom sites to add value for your clients.

The Footer

One easy way to offer some control is to give clients access to the footer content without having to edit the actual template page, and its a simple enough task to complete. Create the option to display on the Theme Options page in the functions.php file (again, see this tutorial for the basics):

array( "name" => "Edit the Footer",
"desc" => "Use this textbox to edit the footer content.",
"id" => $shortname."_footer_display",
"type" => "textarea",
"std" => ""),

Assuming my $shortname is “bonsai”, I would add the following code in my footer.php template file where the content ought to go:

?php echo $bonsai_footer_stuff; ?

I’d end up with something like this on my Options page:

But this means that my client will have access to elements on the footer that ought not be touched. So, perhaps I don’t want to give the client access to the main footer content. Instead, I want to give him the ability to add an additional line of content to the footer.

This time, I will use an additional array to offer a checkbox which would determine whether or not to display this additional content:

array(  "name" => "Show Footer?",
"desc" => "Check this box if you want to show the additional footer content below.",
"id" => $shortname."_footer_show",
"type" => "checkbox",
"std" => "false"),

array( "name" => "Footer Content",
"desc" => "Use this textbox to add additional footer content.",
"id" => $shortname."_footer_content",
"type" => "textarea",
"std" => ""),

In my footer.php template, I’d perform a simple test (thank you forthelose.org for this code):

?if ($bonsai_footer_show == "false") { ?
!--DO NOTHING-->
? } else { ?>
?php echo $bonsai_footer_content; ?
? } ?

The final result in the Theme Options page would look like this:

Post Control

Another bit of control you can offer your client is the ability to determine the number of posts featured on the home page. Maybe the original design only called for two featured posts, but the client is generating some exceptional content and wants to offer more upfront. In some cases, it might be a good idea to let the client manage the number of featured posts (as long as you’re design is set up to accommodate it).

Here’s the array:

array(  "name" => "Number of Featured Posts",
"desc" => "Enter the number of posts to feature on the home page.",
"id" => $shortname."_featured_posts",
"type" => "text",
"std" => "2"),

Next up, you need to update the code in your index.php from this:

?php query_posts("showposts=2&category_name=headline"); ?>

to this (based on code from aext.net):

?php
$fpnum = get_option('bonsai_featured_posts');
query_posts("showposts=$fpnum&category_name=feature"); ?

Navigation Menu

If you’re client has been busy adding pages, he may need control over whether or not those pages ought to appear in the navigation menu. Here’s a quick an easy solution to give control to the client.

First, create the array:

array(  "name" => "Number of Featured Posts",
"desc" => "Enter the number of posts to feature on the home page.",
"id" => $shortname."_featured_posts",
"type" => "text",
"std" => "380,384"),

Next change the following code:

?php wp_list_pages('exclude=380,384'); ?

to this:

?php wp_list_pages("exclude=$bonsai_nav_exclude"); ?

With this code you can control which pages to exclude, the only caveat is your client will need to understand how to get the Page ID number.

Of course, this is only the beginning. You could actually develop a Theme Page that uses a multi-select or a set of checkboxes that lists all site pages for your client to choose from. If you want to dig deeper into using multi-selects or sets of checkboxes, this tutorial from aquoid.com promises to provide you with all the details if you’re ready to dig in a bit deeper.

Variety is the Spice of Life

Do you want to offer a little variety to your client? Give him the ability to change the header graphic for the site. You could allow a client to choose which header graphic to display for different holidays, seasons, or when running a special or a sale.

To keep things simple, let’s assume I want to have a different header for each season plus a default header image. What I need to do is create a dropdown menu with the different choices:

array(    “name” => “Header Image”,
“id” => $shortname.”_header”,
“type” => “select”,
“std” => “Default”,
“options” => array(”Default”, “Winter”, “Spring”, “Summer”, “Fall”)),

Then, I need to create artwork for each option. In this case I have created Default.gif, Winter.gif, Spring.gif, Summer.gif, and Fall.gif and I have uploaded these files to my theme’s images folder.

So far so good.

The problem now is that I control the header graphic as a background image via my stylesheet. What I need to do is use a dynamic stylesheet in conjunction with my Theme Options page to open up the control over the design. The following solution is based on the work by Jeremy Clark.

For simplicity, I have created a stylesheet just for my header style. Instead of calling it headerstyle.css though, I name it headerstyle.php. Here’s what it looks like:

?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
$css = $_GET["css"];
$css = urldecode($css);
$s = explode("|", $css);
$bonsai_header=$s[6];
echo CSS

#header {
width:760px;
height:121px;
padding: 0 0 0 20px;
overflow:visible;
background: #fff url(./images/{$bonsai_header}.gif) no-repeat;
}

CSS;
break;

There are a couple of things that are worth mentioning in the code above.

Look at the line that reads:

$bonsai_header=$s[6];

The number 6 refers to the sixth option in my Theme Options page (the first item is 0, the second item is 1, etc). You need to change that to the appropriate value.

Also, take a look at my #header rule, which should look pretty familiar. In the background property, the url has been changed from:

background: #fff url(images/Default.gif) no-repeat;

to this:

background: #fff url(./images/{$bonsai_header}.gif) no-repeat;

Basically, I updated the url to include the initial ./ before images/ and I used the $shortcode_id (in this case $bonsai_header) to replace the name of the file.

The last thing I need to do is create a link to my headerstyle.php stylesheet like so:

<link rel="stylesheet" type="text/css" media="screen" href="">;?php bloginfo('template_directory') ?/headerstyle.php?css=?php echo $css

Now my header will change based on the selected option.

Continue Exploring Theme Options

Well, now that you’ve gotten a taste of how using a Theme Options page can benefit custom theme development every bit as much as it does for public themes, I hope you’re ready to start cooking up your own ideas and put this to use for your clients. Below are a list of resources for exploring the possibilities of theme options.

Getting Started with Theme Options

• Create and Options Page for Your Wordpress Theme
• How to create and Options Page for Your Wordpress Theme
• Create An Awesome WordPress Theme Options Page

Taking it to the next level

• Wordpress Theme Design with Options Administration
• Wordpress Theme Options Framework
• Wordpress Theme Options Framework Updated
• Wordpress Theme Dev Tip – Dynamic