Price = Rate x Time
Rate = Price / Time

Reduce your time while holding your price constant and your rate goes up. It’s in your best interest to work more efficiently and without too much effort you can get more done in less time.


photo credit: romana klee

Identify Repetition in your Work

Sure design is a creative process and every design is unique. Still there are plenty of things you do from one site to the next that are very much the same. Why reinvent the wheel?

The next site you design and develop is going to have some kind of navigation. How many different navigational systems do you use? Odds are your next navigational system will fall into one of the following three categories:

• horizontal navigation bar
• vertical menu system
• tag based navigational links

You’ll likely use one of the first two. Your next navigation bar won’t look exactly like your last one, but it will (or should) be built from an html list and styled with similar css. Your navigation bars will inevitably have many repeating elements that don’t need to be recreated from scratch with each new site.

Pay attention and start to identify where you repeat work from one project to the next.

Build a Library of Reusable Code and Graphic Elements

As you identify repeating elements, start saving them and building a library for reuse. Take that code for your menu and save it. When it’s time to code a menu in your next website grab that code as a starting point.

photo credit: ilovememphis

Even better get a code editor that allows you to save code snippets or lets you use shortcuts to enter larger blocks of code.

I currently use Coda as my editor of choice and through it’s clips panel I can build the basic shell of a site in a few seconds. Many code editors offer similar functionality. It’s time to stop using Notepad and invest in something better.

Do you use buttons in your designs? How different are they really? Do you save PSD files for each type of button you use? Why not?

Saving graphic elements like buttons and icons or using those others create for you is a great way to save time on projects.

Take a few seconds to save code snippets from your current project. Make some time each week to write code you know you’ll use on future sites. Go through your existing library and improve it. Design a better button. Improve the code of your navigation bar.

Think Object Oriented

At least in terms of it’s benefits. Object oriented thinking leads to:

• Faster development
• Reuse of previous work
• Increased quality
• Modular architecture

By isolating work you’ve previously done for reuse, you can design and build new sites faster and work to improve those small blocks of code and graphic elements in between projects. Modular architecture allows you to drop in components into any project and again improve those modules in between projects.

Even something like css which might not obviously lend itself to objects can be written in a more object-oriented way.

Develop Processes for Everything

You likely have a similar workflow from site to site. That workflow is your design process. It may vary some from site to site, but by following the same general roadmap you give yourself direction and ultimately work faster and smarter.

Your processes don’t have to be limited to your design work however. Develop systems for everything you do in your business. Save email templates for common replies. Use a billing program to send and keep track of invoices. Automate repetitive tasks where possible.

Systems and processes keep you from reinventing the wheel over and over. When you find a process that works stick to it. Don’t solve the same problem again and again. Once you have systems in place you can improve them and make them more efficient, but get them in place.

Manage Your Time Better

We all procrastinate. We all let things distract us. We all know we shouldn’t do either. Time management is more than avoiding work. It’s about figuring out when you work best.

photo credit: Quinn Dombrowski

Are you most productive in the morning? The afternoon? Evenings? Late night? Are you able to work better at some things early in the day and others come better after lunch?

I find I’m most creative in the morning and late at night. In between creativity is a struggle for me. I no longer begin a new design in the afternoon. A blog post I can write in an hour in the morning will take me 2 – 3 hours in the afternoon and it won’t turn out as well. On the other hand I can be analytical at any time of day. Late afternoon I’m useless for most work so I run life’s errands instead.

Schedule different tasks at different times of day. Writing in the morning, coding in the afternoon, designing at night works for me. It helps me finish each faster and better. The tasks and times may be different for you, but chances are you do certain things more efficiently at different times throughout the day or week.

Speaking of schedules, learn to set one. Plan out your most important projects during the week and set aside time for them every day. You’ll be amazed at how much more you can get done when it’s set out in front of you on a calendar.

One day each week I map out what I want to get done and start blocking out times for each task on my calendar. I’ll adjust as the week progresses, but I always find I get more done when I fill in the calendar. When I don’t it’s much easier to let the procrastination and distractions creep back into my week.

Summary

Think again of the simple pricing formula at the start of this post.

Price = Rate x Time
Rate = Price / Time

You likely charge the same amount for the same kind of project. If you reduce the time it takes to complete a project then you earn a higher rate on that project. A higher rate means you can either work less or make more money. Either sounds good to me.

What tips do you have for working more efficiently?

• Sons of Suckerfish
• The ULTIMATE CSS only drop-down menu

I’ve been using the Suckerfish menu for years. It’s fairly easy to understand and uses a very small JavaScript file for older version of Internet Explorer. I believe IE8 no longer needs the JavaScript, but all previous versions do. I may be wrong about it being necessary for IE7, but it’s definitely needed for IE6 and below.

The second link above is an example of a css only drop-down. You’ll have to view the source code to see how it’s done. I’ve never used it myself, but the author, Stu Nicholls has tested it across many browsers and versions.

Typical HTML in a Drop Down

In general any time you want to create a menu or navigation bar think unordered lists in your html. For a typical dropdown menu your html might look something like the following:

<ul id="nav">
  <li><a href=""></a></li>
  <li><a href=""></a>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </li>
  <li><a href=""></a></li>
</ul>

The code above is a simple nested list. Two keys to note are first that the nested list comes before the closing </li> of the menu item that will contain the drop down. A common mistake is to forget to add the nested list inside the list item. The other key is we’ve given the outside <ul> an id so we can hook into it through our css.

Again I’ll point you to either of the two links above for styling a drop down menu. If you’d like me to write a post in the future showing the css and developing the full menu from scratch, leave a comment below.

Creating the HTML in WordPress

Editing the css file of a WordPress theme is straightforward. The hard part in creating the dropdown navigation is getting WordPress to display something close to the html above. Many people will hard code the html into their header.php file and while that works, it’s not particularly flexible. If you add a new menu item, you need to add another line of html in the appropriate place.

A better solution is to use a WordPress template tag to produce our html. There are two template tags that can produce the code we want. One has been around for years and one has only been with is since WordPress 2.7. Each has its advantages.

• wp_list_pages()
• wp_page_menu()

Dropdowns with wp_list_pages()

wp_list_pages() has been around for awhile. It outputs your pages as a series of links wrapped in list tags. Odds are your current theme uses this tag to produce your navigation. Not everyone knows how to use this tag to produce nested lists of pages, but it’s rather easy with the use of one parameter you include in the tag.

<ul id="nav">
  <li id="home" <?php if(is_page('home')){echo "class=current_page_item";} ?>><a href="/index.php">Home</a></li>
  <?php wp_list_pages('title_li=&sort_column=menu_order&depth=2'); ?>
</ul>

wp_list_pages() produces the list items, but not the <ul></ul> so I’ve hard coded those tags and added our id to hook into the list. The tag only lists your pages and since your home page often isn’t a WordPress page, but rather your index.php page, I’ve included a line of code to display the index.php page in the menu.

You’ll notice the added line also checks to see if the home page is the current page and if so it adds class=current_page_item. This class is used if you want to highlight the current page or style it in some unique way. wp_list_pages() will automatically add that class to the links if creates and so it’s a good idea to add it to the home page link as well.

Let’s look more closely at the one remaining line of code above

<?php wp_list_pages('title_li=&sort_column=menu_order&depth=2'); ?>

We’re passing three parameters to the wp_list_pages() tag. The first title_li is set to nothing, since we don’t want a title displayed. The second sort_column is set to menu order which will display our pages in the order we’ve specified through the admin side of WordPress. The last parameter depth is what actually creates our nested lists.

By default depth=1, which is why most menus in WordPress will only show our top level pages and not all your nested pages. By changing the depth to 2 WordPress will go one level deeper in producing our html and we’ll get a nested list, which we can style to be a drop-down. The code produced will look something like:

<ul id="nav">
  <li class='current_page_item'><a href="">Home</a></li>
  <li class="page_item page-item-1"><a href="" title="About">About</a></li>
    <ul>
      <li class="page_item page-item-3"><a href="" title="Our Business">Our Business</a></li>
      <li class="page_item page-item-4"><a href="" title="Our Staff">Our Staff</a></li>
    </ul>
  <li class="page_item page-item-2"><a href="" title="Contact Us">Contact Us</a></li>
</ul>

The actual source of the links would be included and, of course, the menu items would be called whatever you named the pages. wp_list_pages also gives you two additional classes to hook into, page_item, and page_item-#. The important thing to note is that we now have a nested list.

You’re not limited to a depth of 2 either. If your pages go 3 levels deep you could have depth=3. You could go even deeper, though if you need more than 3 levels you probably need to rethink how you’ve organized your content.

Dropdowns with wp_page_menu()

As of WordPress 2.7 we now have the wp_page_menu() template tag, which produces essentially what we did above in a single line of code.

<?php wp_page_menu('title_li=&sort_column=menu_order&show_home=1') ?>

wp_page_menu() is actually a wrapper around wp_list_pages() so you can pass the same parameters as well as a few extras. One of those extras is show_home. By setting show_home to 1, we’re telling WordPress to include our home page in the menu. Setting it to 0 would tell WordPress to ignore the home page.

Here’s the html that gets created by the above:

<div class="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li class="page_item page-item-1"><a href="" title="About">About</a></li>
      <ul>
        <li class="page_item page-item-3"><a href="" title="Our Business">Our Business</a></li>
        <li class="page_item page-item-4"><a href="" title="Our Staff">Our Staff</a></li>
      </ul>
    <li class="page_item page-item-2"><a href="" title="Contact Us">Contact Us</a></li>
  </ul>
</div>

The code is similar to what we were able to produce with wp_list_pages(), though not quite the same. You can still use it to style your dropdown, but the differences will determine which tag you prefer to use.

First notice that our hook (class=menu) is added to a wrapper div instead of the list itself. You can set the class name via the menu_class parameter and the fact that we’re using a class instead of an id doesn’t really affect anything. The wrapper div isn’t necessary, though it’s often used in coding drop downs. You may or may not want to include it, which would determine your choice in tags.

Ian Stewart has written a nice post on how to add a class or id to the list through a WordPress filter.

The other major difference is that our home page doesn’t get the current_page_item class added. If you were hoping to use it to style the current page’s menu item then you may want to go with wp_list_pages() where you can add it as I did above.

You could also adapt Ian’s filter to add the current_page_item class. Justin Tadlock has also written a post on wp_page_menu, including his own filter, as well as a post on developing a widget for your page menu using the wp_page_menu() tag

Summary

While I’ve spent a lot of time showing you how these two WordPress template tags work and the code they produce, it won’t take you a long time to get comfortable using them.

Give both a try and familiarize yourself with the codex pages for each so you can see the parameters you can use with them. Remember that any parameter you can use with wp_list_pages() you can also use with wp_page_menu(). The latter then adds a few new parameters to the mix.

The next time you want a dropdown menu in your theme, don’t reach for a plugin or hard code your navigation. Just look to use either of these two template tags.

Custom Page Template Problem

You may be aware that WordPress allows you to create your own page templates.

The default Kubrik theme comes with two, the archives template and the links template, but you can create as many as you’d like.

These templates will be available to you in a drop down when create a new WordPress page or when editing an existing page as you can see in the dropdown to the left.

WordPress 2.7 seems to have an odd bug where some of your custom page templates won’t show up in the drop down and unfortunately my theme had been bitten by that bug.

While I was able to see some of the custom templates others were not visible at all in the template drop down and so were unavailable for use.

How To Get Your Custom Page Template To Show Up In The Drop Down

A little searching directed me to this post by Zach Graeve with a very simple solution. The trick Zach describes is to temporarily switch to another theme and then reactivate your theme. Doing that seems to reset the theme, kind of like rebooting your computer.

After a few more searches it seems as through the solution above works for most everyone. Alas, I’m not like most everyone and the solution didn’t work for me. Hopefully if you encounter this bug it works for you, since it’s about as easy as it gets to fix.

Back to searching which led me to another post on the missing dropdowns, by mkyong. The problem was the same and was occurring in version 2.5 of WordPress. The solution this time was going to the theme editor within the WordPress admin and select your page template to edit.

All custom page templates should start with the following code:

/*
Template Name: Custom Page Template Name
*/

which is a php comment that WordPress uses to identify page templates. In mkyong’s case and mine as well this bit of code was missing. What was particularly strange in my case was the code was in the file. That was the first thing I checked when I didn’t see the template listed in the drop down. Even stranger, I thought, was WordPress telling me I couldn’t save the file through the editor since the file didn’t have write permissions. Huh?

I checked permissions and indeed WordPress was right. How the permissions got that way is lost on me, but I set them back (755 for those of you who speak permissions) and I was able to add back in the php comment through the WordPress editor.

WordPress wouldn’t accept changes I made directly to the file in my usual code editor for whatever reason.

Once again all was right with the world or almost all right. WP still wouldn’t accept changes to the file through Coda, my editor of choice. When I opened things again tonight though, I seem to be able to make permanent changes in either editor and everything is indeed as it should be.

I realize most of you may never see this bug and perhaps stopped reading long ago, but this post is for the few of you who did encounter this problem and are having a hard time finding the solution. Hopefully you found this post and now know what to do.

Speaking for myself I’ve certainly clicked them on posts before, but I realize I don’t do it all that often and lately I’ve been removing them from many of the themes I’ve designed.

Because post titles can become quite long the links themselves can become quite long, which looks a bit messy to me. That’s easily fixed, but the main question is how useful you find the links.

If you don’t mind I’d appreciate a few thoughts. Leave a comment below. Thanks.

Highlight Your WordPress Page Links

Many themes are designed with a simple html and css navigation bar that displays your home page and a list of your WordPress pages. It might look something like the following:

• Home
• About Us
• Services
• Products
• Contact

In the above navigation bar each of the links would be a WordPress page with the exception of Home, which would be a link back to your blog’s home page. You can see how About Us is styled differently to indicate it’s the page your visitor is currently viewing. The code WordPress uses to display the html for the above is:

<ul>
 <li><a href="<?php echo get_option('home'); ?>">Home</a></li>
 <?php wp_list_pages('title_li='); ?>
</ul>

The code above is taken directly from the WordPress default theme, but it’s very typical of free and premium themes as well. The code in the list-item provides a link to your blog’s home page and the following line of code uses a WordPress template tag to run through all your WordPress pages and wrap them in html list-item and link code.

The html that us ultimately produced will look like the following code block. Note that I’ve replaced the actual URL each link would point to with a # for simplicity.

<ul>
 <li><a href="#">Home</a></li>
 <li class="current_page_item"><a href="#">About Us</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Contact</a></li>
</ul>

The key to the above code is the class=”current_page_item” which WordPress automatically adds through the wp_list_pages template tag. When your viewing the About Us page the class will be applied to the list-item containing a link to the About Us page. When you’re viewing the Contact page the class will be applied to the list-item for the Contact link.

Given this class will only appear on the currently viewed page all you need to do highlight the page is give the current_page_item class a look that makes it stand out. How you highlight the current page link is up to you and will depend on the style of your theme, but a simple way to highlight the link is to give it a different background-color and a different color for the text itself.

Highlighting Your Main Blog Page

Everything above works great for highlighting the link in your navigation when you’re viewing a page, but what about when you’re on your blog’s home page? The home page link wasn’t being produced with the wp_list_pages tag and won’t automatically have our class applied. We need to find a way to have the class added when you’re viewing the home page.

Fortunately WordPress makes this easy through the use of conditional tags. Combined with a little bit of php we can apply the class just as above. The conditional tag used to check if the current page is your main blog page is called is_home() and the code you would use to add the current_page_item class can be seen below.

Note: If you’ve set WordPress to use a static front page as your home page you’ll want to use the is_front_page() conditional to test the true home page of your site. is_home() tests to see if the page is your main blog page. See Andrew’s comment below.

<ul>
 <li<?php if ( is_home() ) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
 <?php wp_list_pages('depth=1&title_li'); ?>
</ul>

The code we’re concerned with is:

<?php if ( is_home() ) { echo ' class="current_page_item"'; } ?>

All the code above is doing is checking to see if we’re viewing the main page of the blog and if so add the current_page_item class to the list-item. The css in place for the pages will do the rest. Pretty simple.

Highlight Blog Posts And Other Blog Pages

Of course your blog has more pages than just the main page. You have post pages, search pages, and archive pages. Your main navigation likely won’t include all these pages, and the code we’ve been using here doesn’t so we’ll highlight the home page whenever we’re viewing one of these other pages.

All we need to do is add a few more conditional_tags to our Home link

<ul>
 <li<?php if ( is_home() || is_single() || is_search() || is_archive() ) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
 <?php wp_list_pages('depth=1&title_li'); ?>
</ul>

is_single tests to see if we’re on a single post page, and is_search and is_archive test to see if we’re viewing any of the search or archive pages as you’d expect. The double pipe || is php to say or. So the statement is testing if we’re on the main blog page or a single post page or a search page or an archive page and if we’re viewing any of those pages add the current_page_item class. Our css will handle the highlighting as it has above.

Nothing too hard right?

What If Your Navigation Isn’t Using The WordPress wp_list_pages Tag?

Occasionally you’ll come across a theme that doesn’t use wp_list_pages to create the main navigation. Maybe your blog uses a lot of WordPress pages, but you only wanted a few to show in the navigation. Your developer may have decided to hard code the html instead of using the WordPress tag.

One more time WordPress to the rescue. Even if your theme doesn’t take advantage of wp_list_pages to automatically add the class you can add it in same manner we added it to the main blog page, that is with a conditional tag. This time we’ll use is_page() and specify exactly which page we want to test for.

You can test for a specific page if you know it’s WordPress id. Say your About Us page us id 9. You’d write the conditional as:

is_page('9')

What’s that? You don’t know the idea of your page? That’s ok. You can also check for it’s permalink. Your About Us page will likely be called about-us and you could use it in the conditional like the following:

is_page('about-us')

Putting it all together your hard coded navigation might look like:

<ul>
 <li<?php if ( is_home() || is_single() || is_search() || is_archive() ) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
 <li<?php if ( is_page('about-us')) { echo ' class="current_page_item"'; } ?>><a href="#">About Us</a></li>
 <li<?php if ( is_page('services')) { echo ' class="current_page_item"'; } ?>><a href="#">Services</a></li>
 <li<?php if ( is_page('products')) { echo ' class="current_page_item"'; } ?>><a href="#">Products</a></li>
 <li<?php if ( is_page('contact'))  { echo ' class="current_page_item"'; } ?>><a href="#">Contact</a></li>
</ul>

As long as your css is in order and you’ve styled .current_page_item in a way to highlight it, your blog should be all set to highlight the current page.