Give each entry a read and a thorough try. See which ones can make your job easier. You are welcome to share if you know more useful Button Generators which our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com just subscribe to our rss feed and you can follow us on twitter.

1. Button Maker

Button Maker is a wonderful free tool to generate the CSS codes for your buttons. You have access to different colors for different parts of the button. Sliders on top of the color choosers let you modify the size and shape of the button which you can see on the left. To obtain the code, you click on the button. Click here to visit Button Maker.

2. Da Button Factory

Da Button Factory offers great button creation tools to you. You can vary the button’s size, text shadow, style, colors, and output type (PNG / JPEG / GIF / ICO). The changes you make to the button get updated as you work. When done, you can click on the button to download it. Visit Da Button Factory by clicking here.

3. Buttonator

Another great button creation online tool, Buttonator will satisfy most of your button needs. You can start off with selecting a particular button style from the right pane. You can then proceed to make changes to the button; changes include modifying color and font style / size. Buttons can be downloaded as GIF files. Click here to visit Buttonator.

4. Free Flash Button Generator

If you are looking for a source to create Flash buttons, then the Free Flash Button Generator will do the job splendidly. You start by selecting a button style. Colors can be changed through the HEX values. The bottom pane lets you add links to the button and the names of the links. Clicking one final button generates your button and its corresponding HTML code. Click here to visit Free Flash Button Generator.

5. Cool RGB

Cool RGB is a wonderful website for creating numerous webpage parts. You can create logos, banners, panels, and of course buttons. The button creation interface has many customization options that range from font selection and colors to transparency and linear gradient. Click here to visit Cool RGB.

6. As Button Generator

With As Button Generator, you can create buttons by editing through a tabbed interface. The customization options cover a lot of ground and will satisfy all of your button creation requirements. The result can be downloaded as a PNG image file. Click here to visit As Button Generator.

7. HTML and CSS Rounded Corner Button Generator

This site is for developers looking for a very simple but 2-in-1 button creation online tool. With HTML and CSS Rounded Corner Button Generator you can create buttons but modifying their colors and obtaining a ZIP archive that contains PNG image file of the button as well the HTML and CSS code. Visit the site here.

8. Feed Icon

If you are looking for a tool to create a simple feed icon for your site, then Feed Icon does the job splendidly. All you have to do is enter your website’s URL and then pick from 3 of the generated HTML codes. The three codes have the same icon shape but different size. Visit Feed Icon here.

9. Adam Kalsey’s Button Maker

This button creation tool by Adam Kalsey has a straightforward interface. You can choose to split the icon by a bar and select the pixel distance between the bar and an edge of the button. Visit Adam Kalsey’s Button Maker here.

10. Button Maker

This tool is quite similar to Adam Kalsey’s with the notable difference that you can choose the separation bar’s placement as “left,” “center,” or “right.” You can also choose a button size from the two sizes available. Visit the Button Maker by clicking here.

Brought To You By

Do you want to advertise here? Click to get more info…

Subtitles is an application created by the site www.subtitles.com.br. Sized at only 542 KB, it is a Windows compatible program which installs without any glitches. After installing the program you will notice that new entries have been made to your desktop or Start Menu. Actually the program has no graphical interface at all. It works in quite a unique way.

With Subtitles installed, all you do is right click on a video file. You will find that the context menu options now have a new entry that reads “Look for Subtitles.” You can enter this option and click on the language you want the subtitles in. After selecting the language, a search will automatically be executed on the program’s website. The search results will correspond to your video file and a far lesser degree of trial-and-error will be required. You will not have to enter any text in fields – simply right click on your video file and select your preferred subtitles language.

To download the Windows program Subtitles, visit www.subtitles.com.br/subtitles.htm.

Brought To You By

Do you want to advertise here? Click to get more info…

  

So many articles explain how to design interfaces, design graphics and deal with clients. But one step in the Web development process is often skipped over or forgotten altogether: content planning. Sometimes called information architecture, or IA planning, this step doesn’t find a home easily in many people’s workflow. But rushing on to programming and pushing pixels makes for content that looks shoehorned rather than fully integrated and will only require late-game revisions.

[By the way, did you know there is a brand new Smashing WordPress Book? Push WordPress past its limits!]

Your New Project: How It Goes All Too Often

On day one things are great. You’ve landed a new job, the client is excited, you’re stoked and the project will be great. First things first: you have to collect the main materials to begin the design. You send the client an email asking for what you need.

On day two you get the following:

• A TIFF logo (in CMYK) via email;
• A set of logo standards that include the RGB values, via email (separately);
• A disc full of photos with various names (like “DSC09080978″);
• A fax that labels the photos according to their file names;
• An email that lays out the top and second-level navigation, as the client sees it;
• A phone that makes last-minute changes to the top-level navigation;
• An email with a DOC attachment full of text for various pages (but not all of it).

And on day three you get an email that makes half of the junk you got yesterday obsolete.

You’re only three days in, and the project is already no fun. You got into Web design to make great layouts, solve problems and create functional art that breathes through programming. It never occurred to you that cleaning up your client’s disorganization would be a part of the gig.

We know that a great website relies on all parts working in harmony. To achieve this, you have to start on the right foot at the beginning of the project. You need an organizational system that does the following things:

• Allows you to organize deliverables from various media;
• Lets you rapidly make changes when needed (it’s called planning for a reason: things change!);
• Helps you collaborate with all stakeholders;
• Shows how the project is developing and what’s left to do;
• Ideally launches you into the actual design and building phase.

The Architecture: Every Brick Counts

Your website’s users will have to “live” inside your website for a period of time. Because of this, some real-world architectural principles apply to website planning. A sense of context and “place” helps users find what they’re looking for. When we talk about the architecture of a website, we’re talking about the hierarchy of its navigation and its structure. We’re not talking about graphics, text or anything cosmetic.

You can plan your architecture in many ways.

Card Sorting

Card sorting is a way to organize content based on hierarchy. To try it, simply put all of the pages for your website onto index cards. Ask stakeholders to sort those cards into logical stacks that represent the hierarchy of your website’s navigation. It’s a great exercise to make sure that the content on your website can be found in the most logical place and that like-minded content is grouped and named appropriately.

• What’s it for?
  To gather feedback on what pages should go where on your website.
• What’s good about it?
  It’s a great way to learn the assumptions of multiple users.
• What’s bad about it?
  The results should be taken with a grain of salt. Your participants will be making a lot of guesses and assumptions.
• In sum
  One major task in website development is making people feel included. Card sorting is an interactive process that helps people feel like they are contributing.

A few resources to learn more about card sorting:

• Card Sorting: A Definitive Guide
• Card Sorting According to the US Government (official .gov website on usability)
• Card Sorting: Mistakes Made and Lessons Learned
• Word Matching

Content Inventories

A content inventory is a great way to understand the breadth of your website and the purpose of each page. Simply create a spreadsheet of all your pages and their corresponding URLs. But a content inventory gets much more useful when you add things like page notes and single-sentence summaries of why a page exists. Use a content inventory to quickly understand topography and figure out what should fit where. It is a great way to think through a redesign but may not be the best way to plan new websites.

• What’s it for?
  To understand the context and purpose a website’s pages.
• What’s good about it?
  Once it’s complete, dragging things around and playing with alternate navigation schemes is easy. It also makes it easy to see the topography of your website.
• What’s bad about it?
  Laborious to create. It’s not of much use during the development phase, and it gets out of date pretty quickly.
• In sum
  A content inventory is a great way to find unnecessary pages on your website. Forcing yourself to look at each page in turn and summarizing its usefulness nearly outweigh the disadvantages of this method.

A few resources to learn more about content inventories:

• Content Inventories as described on Usability.gov
• Content Inventory (Boxes and Arrows)

Paper and Sketchboards

Sometimes paper just feels good. The free form allows for incredible expressiveness, and nothing is faster for capturing ideas. Unfortunately, the drawbacks are tough to ignore. Paper is easy to lose, hard to share, wasteful and not very useful past the early stages of a project. Eventually, everything for a website becomes digital, and so going digital as soon as possible is best. Use paper to capture thoughts in a meeting to brainstorm and to explore. But do yourself a favor and transcribe or scan the information as early as possible.

• What’s it for?
  To quickly and collaboratively sketch out a website architecture.
• What’s good about it?
  You can move pieces of paper around. And drawing with markers is fun. It’s also great for energizing a group and quickly scanning a lot of ideas.
• What’s bad about it?
  Once your big sketchboard is complete, it has to be transcribed into another format to be useful.
• In sum
  Beware the feel-good meeting! Sketchboard meetings are fun and seemingly productive, but you’ll often wonder afterwards what you actually achieved. Ideas come quickly, but the real work comes in deciding whether any of them are appropriate for the project.

A few resources to learn more about sketchboarding:

• Sketchboarding (Adaptive Path)
• Sketchboards + Prototypes (Slideshare)
• More links on Brandon Schauer’s website

Site Map Diagrams

A visual site map is quick to make, fairly expressive and easy to change. People have all sorts of methods for building site map diagrams. Whatever your tool, the diagram is a useful way to demonstrate hierarchy. It clearly shows the relationships between pages and tells you where your website is too shallow or deep.

• What’s it for?
  To visually explain the relationships between pages on your website.
• What’s good about it?
  Nothing better illustrates the hierarchy of a website than a diagram with lines and arrows indicating the relationships between pages. Clients naturally understand it.
• What’s bad about it?
  The actual relationships between pages can be hard to grasp. What looks good on a chart might not work well on a website. And a site map diagram is not really useful during the development phase, quickly becoming a dead documents.
• In sum
  A site map diagram is a quick way to sketch navigation and hierarchy. Don’t try to cram in other bits of information that just don’t fit.

A few resources to learn more about site maps and diagrams:

• A Visual Vocabulary for Sitemaps
• The Lazy Information Architect’s Guide to Making Sitemaps

Which to Choose?

There is no one right way to plan the architecture for a website. Depending on the size of the website, you might use all of these techniques. They’re not opposed or mutually exclusive—just different means to similar ends.

When picking your method of architecture planning, consider these things:

• How big is the website?
  The sheer size of some websites makes some of these methods cumbersome or impossible.
• What type of website is it?
  The card-sorting method, for example, is perfect for e-commerce websites but overkill for blogs.
• Who is your client?
  The less Web-savvy the client, the more elaborate your descriptions and plans will have to be. If your client understands websites, then you can be a bit more brief (but not too brief!).
• Consider your workflow.
  Try out all of the ideas, and then pick a lightweight, simple process that you and your clients can understand. If you find yourself filling in information that isn’t useful or illustrative, then you’ve gone off track. Adopting a process that allows you to do the bare minimum is good in this case.

A few tips on architecture planning:

• Organize content according to user needs, not an organizational chart or how the client structures their company.
• Give pages clear and succinct names.
• Be sympathetic. Think of your typical users, called personas, and imagine them navigating the website. What would they be looking for?
• Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
• If you can’t succinctly explain why a page would be useful to someone, omit it.
• Plan the architecture around the content. Don’t write content to fit the architecture.
• When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
• Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

The Architecture Is The Home, Not The Content Itself

Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

Most of the tools that are great for planning architecture are not so good for planning content. This causes many people to skip the process of content planning, to abandon their copywriters and to use their CMS as a content organizer (i.e. leaving it as an afterthought).

HTML Wireframes

Making your own wireframe is a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive. The drawback of using manual wireframes is that they are… well, manual. You’ll end up spending time on the front-end getting everything just so and more time on every revision. While manual wireframes are the perfect tool for many DIY coders, keep things simple! If you over-design your wireframes, your client will focus more on cosmetics than substance.

• What’s it for?
  HTML wireframes are a natural extension of other architecture-planning methods. They fill in the architecture by showing the content and markup on the pages.
• What’s good about it?
  They’re illustrative and easy to understand. Clients immediately grasp them and how they translate to the next step.
• What’s bad about it?
  Getting a structure that works can be tricky. You have to manually mark up content. And they’re not a great way to work with multiple collaborators.
• In sum
  HTML wireframes are a great way to envision and plan website content. If you’re a freelancer or on a small team, they’re a great option.

A few tips on manual wireframes:

• Once you get a good style sheet and structure, leave the wireframe alone. It’s not supposed to be elegant or beautiful. In fact, the fewer the distractions and the simpler, the better. The point is for people to concentrate on the content.
• Work on naturally transitioning from wireframe to development. A simple script or some find-and-replace magic can put all that useful markup into your working product.
• For simple websites, use wireframes in the first stage in development. If you mark up your content properly, you may only need CSS after that.

Plain Old Text

Many copywriters reach for MS Word or Apple Pages when starting to write website content. The simple tools are often the most useful and powerful. In this case, that’s only partly true. While text editors are a great way to quickly organize text, they have their drawbacks in website planning.

• What’s it for?
  Text editors are a quick and easy way to organize text for a website.
• What’s good about it?
  They’re readily available, and almost anyone can use them. Their ubiquity and revision-tracking features make them great for collaboration.
• What’s bad about it?
  The mark-up created by text editors doesn’t translate well into the Web world. Clients often don’t understand how a linear document translates into a free-form website architecture. Embedding images and attaching files to pages can make the document cumbersome and not great for migrating to the development stage.
• In sum
  Text editors are useful for planning the actual text of a website. What’s missing is the navigation and how the attached files will be organized. Don’t prevent collaborators who are comfortable with text editors from working this way, but move the content into a more workable format quickly.

A few tips on using text editors for website planning:

• If you’re using a text editor to organize website content, use RTF format instead of the proprietary file format of the editor. It will make a lot of things easier for you later.
• Create a simple numbering system that makes the pages in your document correspond to the more visual architecture you have created separately.

Slides

As with text editors, many people already own a tool that creates slides, such as PowerPoint or Keynote. In fact, for many office professionals, it’s the only layout tool they own. Thus, many websites are planned in PowerPoint. Its availability and relative ease of use make it a good option for some workflows.

• What’s it good for?
  Slideshow creators are used to easily sketch the structure and to link pages.
• What’s good about it?
  They’re readily available, and almost anyone can use them. Their basic layout features liberate many people who would otherwise struggle to convey their thoughts.
• What’s bad about it?
  Slideshow creators are great at getting information in but poor at getting it back out. Their graphic creation abilities often complicate the goal of the process. (Plus, a lot of cute icons will suddenly start to appear in your content!)
• In sum
  Slideshow tools are a great makeshift wireframe creator. They use a familiar process in a new way. But you’ll face a trade-off when you begin building the website.

A few tips on using slideshow creators for website planning:

• Don’t get too creative with “designing” your pages. Avoid color, graphics and anything else that does not specifically illustrate the hierarchy of content.
• Keep your system very simple. The goal is to make it illustrative and quick. The more complicated it is for you to drag pages and update links, the more reluctant you will be to explore new options for the layout.

Jumpchart

Jumpchart lets you make simple and quick HTML wireframes. Whatever planning method that works for you is a good one. But in our studio, we find that no tool gives us as much flexibility or momentum as Jumpchart, and that’s why it’s our tool of choice. It simply organizes content hierarchically, compiles feedback and exports to the next stage of the development process.

• What’s it good for?
  Jumpchart is a natural extension of manual HTML wireframes.
• What’s good about it?
  It automates some of the most important parts of the manual HTML wireframing process, with the collaboration and formatting options that many people want. It also exports.
• What’s bad about it?
  Jumpchart requires a paid subscription to plan larger websites.
• In sum
  Jumpchart is a great way for small teams and remote collaborators to visually organize content. The ability to export to XHTML and WordPress (WXR) makes for a rapid transition between the planning and development stages.

A few tips on using Jumpchart for website planning:

• Use Jumpchart as a single spot for all the deliverables in your website project. Images and documents can be attached to individual pages.
• Use the permission system to control who can see and who can edit.
• For those who plan the content before the architecture (like us!), Jumpchart is a great way to ease into the site map.

Putting It All Together

Finding the right combination of tools and processes is an important part of planning a website. A lot of thought should go into even the smallest website. This can be daunting for even the best developer, but we’ve yet to cover one of the biggest obstacles to the development process: the client.

Calling the client an obstacle is not fair, of course, but it feels that way occasionally. Clients can throw a wrench in the cogs of the best process. Take pity on them, though. They have jobs and lives like the rest of us. This “website” thing is usually just another line on their long list of action items. To create a planning process that embraces the human component, consider how you can better accommodate their needs.

The Inevitable Revisions: Being Fleet of Foot

Clients change their minds. It’s in their genes to be indecisive and difficult. If they knew what the heck they were doing, they wouldn’t need us. Our job is to turn their mess into perfection. Despite the mess, budget and timeline, your work will be judged on its own merit. You either got it right or you didn’t, and there’s no passing the buck.

This Scylla and Charybdis are no reason to stop trying. What you need is a workflow that embraces change rather than resists it.

• Make sure your planning method is not tedious. If updating a simple page title in PowerPoint takes you 10 minutes, rethink your method.
• Follow the order of the steps. Starting on later steps before previous steps are approved is tempting. Don’t!
• Bundle revisions. You’ll kill your budget if you make individual changes as they come.
• Encourage your client to take time in the planning stage. No matter how close the deadline, this is the one part you shouldn’t skimp on.
• Make sure your contract specifies consequences for revisions. Be explicit.

Collaboration: Bring Stakeholders Together or Die Trying

If you plan in a vacuum, you’ll only end up with a pile of lint. The secret to efficient planning is to include those with authority in the process. If you spring architecture and content on stakeholders late in the game, expect far-reaching changes that require backtracking.

Get architecture, content and deliverables approved before moving on to the next steps. Modern CMS’ have templates that can accommodate a wide variety of content, and this might make it seem as though content organization and architecture aren’t your problem, but they are! If you write the CSS and programming without understanding what exactly you’re building, you will be forced either to backtrack or to fit content into a template that isn’t ready for it. Content comes first.

• If you’re planning online, email everyone when you can. If you plan on paper, print multiple copies in the hopes that more stakeholders will see the plan before you move on.
• Get clear, direct approval of major steps in writing. If your client is hesitant, they may be hiding that they’ve failed to get approval from higher-ups. Asking for an email or signature forces the issue. It may sound confrontational, but most clients will understand and appreciate your thoroughness.
• Ask for meetings. Most creative people hate them, but a successful project requires collaboration. You would be surprised what comes out of a 10-minute phone call.

Explaining: Heel Meet Arrow

You may be a great designer, programmer, architect or manager, but if you can’t show progress and convey ideas to clients, you will fail. Clients need feedback. They need to see where you are heading with the project. Telling them is one thing; show them another. Many potentially great websites were derailed because the designer did not effectively explain what was happening to the client.

• Show, don’t tell. No matter how much head-nodding you see, if you only tell your clients what you will do, they’ll be confused later. Either poor memory or communication will sink your ship every time.
• Don’t format content too much. Keep it simple. Some people start pushing pixels right after planning. Others start working on interface wireframes. Whatever you do, empower yourself or your designers to make primary decisions about font, color and layout. If your content wireframe or diagram is too elaborate, it will impinge on the design. Let the decision-makers focus on the content, navigation and what-goes-where, rather than muddying the process with filler graphics.

Moving On: The Button That Launches a Thousand Ships

So you’ve dodged all potential problems so far. The die is cast, and the plan is laid. It’s time to start designing and building the website. Do you have to start over now, or will your plans accelerate the process? It’s been said before, but a plan that has no momentum is wasted. If you have to retype, reorganize or re-explain your plan in order to start the next step, you’ve been wasting time.

A great design process builds on the website’s content. A great process allows you to build on the last step. To be cost-effective and efficient, the process should include only the critical steps. An awkward transition from planning to building a website is a common roadblock. Frequently, the people who plan a website and communicate with the client aren’t the people who actually build the website. This means that the planning documents have to be expressive and comprehensive in conveying the process that has been followed to date.

Avoid costly revisions and staff frustration by having a process that slingshots you into development rather than requires backtracking and further investigation. Sure, the process should be fluid, but a good plan ensures momentum.

A Few Parting Practical Tips

• Be specific about your wants with clients. Ask for digital text, Web-sized images, etc.
• Keep all deliverables in one place, and put them there as soon as you get them!
• Ask for written changes, preferably via email so that they’re time-stamped.
• Use Google’s advanced site search to quickly learn about the current website’s size and shape if your project is a redesign.
• Ask your client for access to old stats. Learning how people have been accessing content is important if you will be planning a new website.
• Avoid being too specific in the early stages. Work from general to specific, and don’t get bogged down in details until they become important.

Wrapping Up

As professionals, we need to embrace better planning methods in our projects. Being agile is great, but don’t outrun your client or the goal of the project. True agility is about being adaptable and reacting quickly. Planning a website is a daunting task, but it can be done if you stick to a process that works.

• Understand the goals of the website.
• Gather resources.
• Organize resources at top level and then at page level.
• Assess your work based on user profiles.
• Demonstrate your plan.
• Get approval.
• Move on.

So many of us design too fast. You need to make so many decisions before working on a visual wireframe or pixel-based mockup. If you start designing before understanding the breadth and depth of the content that your website will contain, you’ll inevitably have to cram stuff into places that it doesn’t fit.

Building a website is like telling a good story. It starts with a cohesive outline and clear plot. No matter how fantastic your website looks or works, eventually someone will read it. Someone will have to navigate it. Truly great websites pay attention to content and organization. There’s no way to fake that late in the game. Greatness comes from a solid plan.

(al)

© Kristin Wemmer for Smashing Magazine, 2010. | Permalink | 29 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ia, planning

1. Do not hard code full URL’s into your themes

When you’re building your themes, there may be times where images are used, for social media icons or RSS feed icons, and during these points in your coding, you may want to code the full url out (ie: /wp-content/themes/your-theme-name/images/image.jpg) but this will cause errors in the website whenever the person using your theme changes their theme folder name.

The proper codes to use in order to pull the full URL’s dynamically are below.

<?php bloginfo('stylesheet_directory'); ?>/images/image.jpg

2. Do utilize the template tags as much as possible

WordPress does an awesome job of laying out all of the template tags you can use, so do yourself a favor (as well as the rest of the people who may use your themes) and learn the WordPress template tags – then utilize them as much as possible. By using template tags, you’re able to ensure that your themes don’t break or cause errors when the end user sets it up and gets it running.

3. Do not forget navigation drop down codes

When you’re building your WordPress theme, one item that seems to be overlooked is the drop down codes for your navigation. Sure, some themes might have the navigation set up to not utilize the multi level ul’s, keeping everything in one single row, but what about for those of us who have multiple child pages for each main parent page?

There’s a solution for that. You can check out some of the tutorials below on how to code multi-level drop down menus.

• How to implement a perfect multi-level navigation bar
• Multi-level drop down navigation menus: Examples and tutorials
• Multi-level menus with jquery and css

4. Do make your theme widget ready

In my opinion, as an end user, there’s nothing worse than deploying a theme and getting ready to set everything up, only to notice that I am now faced with the task of trying to customize sections of my themes by hard coding information into them. Your sidebars and various other places in your theme (do you have a three column footer? widgetize it!) should be as easy to edit as possible. It’s one of the easiest things to do to your themes, and will benefit your theme’s users a lot.

Automattic has a great tutorial on how to widgetize your theme. Check it out here.

Also be sure to check out the widgetizing themes tutorial here at Theme Lab.

5. Do not make users rely on numerous plugins for your theme to work

If you’re releasing themes for free or creating commercial WordPress themes, you should take your end users best interest into play with you’re building your themes. Cluttering your themes with 5-10 needed plugins will not only cause people to be frustrated when downloading and setting up your theme on their site, it will also cause a lot of people to not download it at all because, lets face it, people don’t have attention spans of more than 2-3 seconds.

For instance, if you’re going to set up pagination in your theme, why not utilize this article to learn how to set it up in your theme automatically. Cats Who Code has a pretty good tutorial on how to add pagination into your theme without needing to activate a plugin.

6. Do show the search term on the search results page

For some reason, this is an often overlooked tip that you can (and should) implement into your themes. It’s a simple, one line code that allows your theme to remind the visitor what they just searched for. It may seem trivial, but it is helpful so if the results bring back zero posts, the visitor knows the exact phrase they searched for and can then type in a different search term.

Below is the code used to replace your current “Search Results” title in your theme.

<h2>Search Results for <em><?php the_search_query() ?></em> </h2>

7. Do not half ass your 404 error pages

Instead of just leaving your 404 page to say “404 – page not found”, why not give your visitors some more options? Adding in a category list, recent posts, popular posts, a search box and (if you’d like to monetize your 404 page) an advertisement can give your 404 page some spice compared to the dull, useless ones found in most WordPress themes.

If you’re looking for 404 page inspiration, Smashing Magazine has a killer showcase of 404 pages from around the web that is worth checking out.

8. Do make sure you have all of the basic files in your theme folder

When you’re building a WordPress theme, making sure you can customize it as much as possible right from the get-go is essential. Starting out with an index.php, header.php, sidebar.php and footer.php file combo might seem like a good idea to the minimalists out there, but I’d suggest starting out with all of the basics below in order to give you a bit more control over what is displayed – when, where and how.

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• page.php
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• search.php

For more information about these template files and what they do, check out the template hierarchy page on WordPress.org.

9. Do not forget the RSS integration

When you’re building your blog, one of the items that draw peoples attention the most is the ability to subscribe to your blog via an RSS reader. So, instead of requiring your theme users to add this information in themselves, why not take the steps to add in a subscribe to rss box just like you do the search box. Add a RSS button, a subscribe via email option and you can also even add in the subscriber count in text by adding this bit of code to your theme where you’d like it to be displayed (replace “feedburner-id” with your own FeedBurner ID – if you’re releasing this theme in the wild, take a look at #11 on our list and make sure you have this as an option).

<?php
    //get cool feedburner count
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Initialize the Curl session
    $ch = curl_init();

    //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Set the URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Execute the fetch
    $data = curl_exec($ch);

    //Close the connection
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $fb = $xml->feed->entry['circulation'];
    echo $fb;
    //end get cool feedburner count
    ?>

10. Do add CSS styles for threaded comments

If you’re building a theme, you should always be prepared for threaded comments. It’s a feature in WordPress that a lot of blogs use in order to build interaction in their comments section. So, preparing your stylesheet for threaded comments is a great idea. Chris has a great post on CSS codes for the default CSS classes that WordPress spits out in their comments section, giving your theme a stylized comments section without needing to touch the comments.php file.

11. Do not release a theme without an options panel

Some people might not agree with this, but I believe it’s a part of the natural progression of WordPress theming. If your theme isn’t running some kind of WordPress options panel with the ability to edit, customize and change items in your theme without having to edit codes, you’re doing something wrong.

If you’re not sure how to go about creating your own theme options panel, the links below will show you how to do it.

• Create custom option panels with WordPress 2.9
• How to create a better WordPress options panel

12. Do make sure your themes work out of the box

This goes hand in hand with #5 on out list – you should always make sure your themes work right out of the box. Some themes I’ve seen require 5-6 steps before the theme is workable on the site, including, but not limited to, plugin activation and theme option panel editing/saving. If the theme requires certain things, make sure there’s a backup default item used.

For instance, in your theme options panel you’re building and/or using, make sure there’s default information in each section, so things are showing up, regardless if the end user has updated them or not. The same goes with plugins, if you’re using a WordPress pagination plugin in your theme, why not code it in so that the theme reverts back to the previous/next links if the plugin isn’t active.

13. Do not make excessive use of custom fields

Yes, most magazine style WordPress themes from a couple years ago were built utilizing custom fields at every turn, but most people will not want to actually fill out 3, 4 or 5 custom fields for each post. So, make things easier for them. If you’re going to show an image from the post on the home page of your theme, take this handy piece of code and add it into your themes functions.php file and it will automatically the posts first image, without the need of a custom field.

// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Once you’ve added that code in, just add <?php echo catch_that_image(); ?> in your theme’s files wherever you’d like the image to show up.

Thanks to the good ol’ WordPress support forums for this handy tip.

14. Do SEO your <title> tag

A great way to ensure your theme is as SEO ready as possible is to remove the default <title> tag found in your themes header.php file and replace it with the codes below. It will give your theme’s titles a bit more juice and help the SEO efforts that your themes users will want to put into practice – all without requiring them to touch a thing.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Author Archives<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name;  ?>|<?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php single_cat_title(); ?> | <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?><?php } ?>
<?php if ( is_day() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

15. Do not forget about breadcrumbs

As an added piece of navigation in your themes, breadcrumbs (in my opinion) should be utilized as much as possible. It is not only good for SEO purposes, but it also allows the visitor to navigate through your site much quicker. There are WordPress plugins for breadcrumbs, but thanks to Cats Who Code, we now know how to add a breadcrumb function into our WordPress themes.

First, add the below codes into your themes functions.php file (customized a bit from the original Cats Who Code post, linked above).

function the_breadcrumb() {
		echo '<ul id="crumbs">';
	if (!is_home()) {
		echo '<li><a href="';
		echo get_option('home');
		echo '">';
		echo 'Home';
		echo "</a></li>";
		if (is_category() || is_single()) {
			echo '<li>';
			the_category(' </li><li> ');
			if (is_single()) {
				echo "</li><li>";
				the_title();
				echo '</li>';
			}
		} elseif (is_page()) {
			echo '<li>';
			echo the_title();
			echo '</li>';
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
	elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}

	echo '</ul>';
}

Next, place this piece of code anywhere you want your breadcrumbs to display.

<?php the_breadcrumb(); ?>

Thanks for reading over the article

Thank you for taking the time to read the article. I hope you enjoyed it and learned a thing or two along the way – I know I did. If you liked the post or have anything to add, let us know in the comments.

Related posts:

1. The Ultimate Guide to WordPress Conditional Tags
2. How to Create a Comments Central Page Template in WordPress
3. 5 Quick Ways to Fix Up Your WordPress Theme

See, when Mark, Magnus & I started WooThemes we had limited experience & knowledge in running a business, and much less in establishing new online brand. To say that we’ve had to learn on the job would thus be a gross understatement; beyond knowing how to design & code, we really don’t *know* much more.

That is why I started off by saying that what you see in front of you today, is a company & brand that has undergone continuous tweaks & changes in the last 2-odd years and the only reason we’ve managed to pull it off is because we have never been fearful of taking a few risks and investing heavily in our ideas, vision & ambitions. Had we however allowed that “fear” to consume us, things may have been a little different… Let me explain…

As an example, I’d like to point to our existing backend system: when we first launched WooThemes, we realized that it had some glaringly obvious limitations and whilst the launch of WOO2 last year went a long way in addressing some of those limitations, we still don’t have a perfect system. Consider the odd login & billing imperfections / glitches in our system and it is clear that we’re a long way off from offering our users a perfect environment. But that’s not the point…

What we could’ve done in the past, was to develop a perfect system from the get-go, which would’ve eliminated those issues now. This would have been a lengthy and costly exercise though, and something that is always easier to say in hindsight. Instead, we opted to embrace the limitations & imperfections of our backend system (and our business as a whole) and just evolve everything as we go. Getting what we want to offer you, to you quicker.

The point that I want to bring across though, is that even considering all of this, we’ve still been able to build a business that is both profitable and becoming more sustainable as time goes on. Irrespective of the lack of experience, knowledge & the massive budget most people think is needed to create a new business, we’ve created something against most odds; the only barrier to entry would’ve thus been the limitations that we set ourselves in our minds.

Don’t be afraid to evolve your ideas and build from an imperfect foundation. There are always ways to rectify those imperfections in the future, and being conscious of those imperfections shouldn’t deter you from gunning for your vision & ambition with utter passion & motivation.

We’ve got winners! If you’ve participated in the FlashMoto CMS contest earlier last week, here’s an entry you should not miss. Continue reading to find out who the winners are

Thanks to FlashMoto, the following winners are getting a Flash CMS that worth $199 for free.

• Piscesboy01
• Srikanth, and
• Sun Pietro

Congratulations to the winners and thank you all for participating. If you are interested in getting free stock photos, you should know that we have a Stock Photo Accounts (Loaded With Credits) contest on progress too.

Get notified on the next giveaway: Subscribe to RSS feed or follow Hongkiat on Twitter.

To download the latest releases of OWA, please click here.

Tracking/Reporting 

• Track Page views, visits, and unique visitors over time
• Track unique, new, repeat visitors over time
• Multiple Web Site Support – track any number of web sites and view statistics in aggregate or by site
• Click-streams – view the actual click-stream of each visitor
• Click Tracking – Track where exactly on a web page users are clicking and view clicks by browser type
• Click Heat Maps – view a heat map of where users are clicking on your web pages
• Google Maps – map your visitors on Google Maps
• Google Earth (KML) – view your visitors in Google Earth via a KML file export
• RSS/ATOM subscription tracking – track unique feed readers, reader types, and feed requests
• Visitor Aging – understand the age of your repeat visitors.
• Canned and Custom Time Periods – generate reports using pre-defined reporting periods or custom date ranges
• Refering Page Analysis – View the title, anchor text, and surrounding text of inbound links from refering web pages
• View visits by user agent
• Track entry and exit pages
• Track pages by custom page types

WordPress Specific Features

• Track visitors by WordPress user name or e-mail address they use in comments.
• Track all WordPress Page Types (Posts, Pages, Authors, Archives, Categories, etc.)
• Track the number of comments made by visit
• Reporting accessable via Admin Dashboard
• Track subscribers to RSS/Atom feeds

Brought To You By

Do you want to advertise here? Click to get more info…

RichWP currently offers eight diverse themes; magazine themes, CMS and gallery themes, each priced at $59.90.

BlogBeast Magazine Theme: Demo | Theme Info

DailyNews Magazine Theme: Demo | Theme Info

Fastblogger Magazine Theme: Demo | Theme Info

Magazine Theme: Demo | Theme Info

Personal Agency Theme: Demo | Theme Info

Photo Theme: Demo | Theme Info

RichBIZ CMS Theme: Demo | Theme Info

Superblogger Magazine Theme: Demo | Theme Info

Common theme features include:

• Advertising integration for popular banner sizes
• Bright and Dark colour schemes
• Widget Ready
• Automatic image resizing
• Threaded comments
• Gravatar support for comments
• Compatible up to WP 2.7.1
• Cross-browser compatible

Entry Guidelines:

All you need to do for a chance to win is write a post on your blog about this contest.

• Your post must link to http://richwp.com and http://wpluxe.com. Feel free to use the theme preview pics I’ve posted above if you like.
• Then confirm your entry by commenting below, and please also indicate in your comment which of the two themes you would prefer to win.

The contest will run until 23.59 GMT on Sunday 14 June, when the winners will be selected via random.org.

So what are you waiting for? Good luck!

Remember to subscribe to our feed, to ensure that you’re the first to know about future giveaways.

New Features in V1.1.0 of The Station

Here’s a brief run-down of the new features in The Station, which you can also see live on our demo:

Integrated Woo Framework Backend & New Theme Options

So The Station is the first “older” theme to restrospectively get the brand-spanking new theme options backend we’ve been rolling out in our last few themes. Here’s a little video to show you how this looks and explain the new options we have implemented:

Alternate Featured Slider

Everybody loves the featured tabber on the homepage of The Station (right?), but we thought it’d open a whole world of possibilities for you, if we gave you the opportunity to seamlessly switch between a featured slider and the default tabber. Here’s how that turned out…

The News Station Magazine

This one is slightly more mindblowing… Ever since we uploaded The News Station mockups to our Flickr profile, we’ve been contemplating how to implement them. In the end, we decided to integrated this with the existing The Station theme framework and just allow you to switch between the default business homepage & styles to that of the magazine look.

Just look how hot that turned out:

More…

Those 3 are the biggest additions to V1.1.0 of The Station, but there’s a few smaller additions & improvements that we’ve included as well:

• Integrated Content & Sidebar Video Player (view screenshot);
• 2 New Woo-specific widgets i.e. 125×125 Ads & Sidebar Video Player;
• Improved jQuery for the tabber & sliders;
• All content on the homepage now uses the default .entry styling for typographical elements;
• Updated blog pages to include the post image using our brand-new post image uploading functionality; and
• Improved the drop-down menu’s to support more levels.

That’s fun, but how do I upgrade?

Unfortunately there’s no quick & easy way to do this at this stage, but part of the integration of the new WooThemes framework will mean that upgrades to newer versions of themes will be much easier in future. We’ve tried to limit the changes to backend / core files as much as possible; so you should be able to keep most of your front-end changes in tact throughout the upgrade.

We suggest that existing users of the theme, consult the included changelog and update only the affected files.

We’ve previously showcased some really nice Mac wallpapers and Windows wallpapers. This time around we want to give Ubuntu a try. This following entry is dedicated to all you Ubuntu users. We figured you could wear it proud and for starters, a nice Ubuntu wallpaper on the desktop.

Finding sets of nice looking Ubuntu wallpapers was one challenging task and here’s what we managed to collect – 60 Beautiful Ubuntu Desktop Wallpapers. Full list after jump.