Category: WordPress

The WordPress Default theme can provide a jump start for developing a WordPress wireframe. Because it has a good selection of template tags already worked into the theme, a quickie clickable prototype blog theme is only a few simplifications away. After the first WordPress wireframe, creating alternative wireframes from the original is a simple process.

What is a Wireframe?

A web site wireframe is the simplest possible map of a new site design. At the most basic level, a set of napkin drawings can be enough of a wireframe to get you started. For more complex sites, a clickable wireframe can become a proving ground for how to integrate a flow chart of user interaction goals into a web design.

The more fine tuning you can do in a wireframe, the less repetitive reworking will be needed down the line. Wireframes can:

• Save time – wireframes can save hours, days, weeks, of frustrating re-working. Some web developers credit wireframes with a 30-80% time savings.
• Provide a spatial orientation – without preconceived limitations, ideas may flow more freely.
• Focus on functionality – avoiding distractions such as color choice, until surface-level branding ideas are finalized.
• Help prioritize work flow by leaving underlying technical complexities until establishing a solid foundation
• Separate different kinds of tasks – prevent the development of graphics, programming and guiding user traffic patterns from competing with each other

Exactly is how all of this possible? Imagine wanting to reduce the height of WordPress Default’s header image, putting in the time to edit functions.php, style.css, and kubrickheader.jpg. A few days later someone has a brilliant idea that requires small though time consuming adjustments to everything you just did. A day after that everything needs to be changed again, because the sidebar will be a different shape. If those decisions had been made at a wireframe level, reworking functions.php and kubrickheader.jpg could have been done only once or twice.

Some First Steps For Wireframe Design

• Doodle
  Make simple drawings of web site plans, before changing anything that seems like it will be time consuming or complicated. Your perception of what that means will vary. Sometimes I’m more comfortable doing my visual thinking with CSS, and sometimes there is nothing like a set of “napkin drawings” to show me the potentials of a design idea or the errors of my ways.

• Flow chart it
  Map out at least two possible user paths – one from a visitor’s perspective, and one that encompasses the site owner’s goals. What will users need, and what do a site’s owners hope they want?

• Share or step back
  Seek fresh eyes, yours or a team member’s. Implementation after input is less painful than re-tooling ideas that are already developed.

• Back up existing work
  Save potentially reusable code and de-stress mistakes. Back up any pre-existing theme as well as incremental changes as the wireframe develops.

• Plan to comment liberally
  Oftentimes starting from scratch is more efficient. However, if I am starting with an existing theme that is not chaos incarnate, I like to comment my additions to any given line of a stylesheet with this:
  /* added */.

My Method: first steps for a wireframe based on WordPress Default

I want to free the eye from pre-concieved ideas and free myself from anything that would add work to making simple changes in a page’s structure. I also want to remove distractions. Any tendency for the eye to land on an area should be determined by where the strength of the design and the content meets predictable user behavior – consider eyetracking.

To accomplish this, I’m removing images, outlining areas with a defined width, and then adding a pale background to any content-defining areas that aren’t already outlined. Most of this can be done in style.css, but because of the way WordPress Default is set up there are a few special touches.

Wherever I wanted to change a line, I commented out the entire line. Where needed I added a second line with the comment “added.” I’m commenting out instead of removing, because I may want to backtrack or re-use what was originally there.

Removing Images

Taking out background images instantly frees me from needing to re-size them while futzing with resizing content blocks.

The WordPress Default theme includes six images, controlled with three methods:

• Controlled with style.css:

  • kubrickheader.jpg – the header image space, found in #header
  • kubrickbgcolor.jpg – a 60px square tile of background color, controlled by the body tag
  • kubrickfooter.jpg – the footer background, controlled #footer

• Enhanced by functions.php:

  • kubrickheader.jpg – functions.php builds custom coloring for Default’s header image

• Inserted by header.php:

  • kubrickwide.jpg – background for centered single post pages without a shaded sidebar
  • kubrickbg-ltr.jpg or kubrickbg-rtl.jpg – background for left-to-right or right-to-left text, with sidebar.

Step-by-step

1. Go to Design > Theme Editor, then choose style.css and comment out the lines of style.css that mention kubrickheader.jpg, kubrickbgcolor.jpg and kubrickfooter.jpg.
2. Remove custom coloring by going to Design > Header Image and Color, then choose Select Advanced > Select Default Colors, and Update Header.
3. From Design > Theme Editor, choose header.php, then look for and comment out the following code. I used both html and php comments.

    
   <!--
   <style type="text/css" media="screen">
   
   /*
   <?php
   // Checks to see whether it needs a sidebar or not
   if ( !empty($withcomments) && !is_single() ) {
   ?>
   	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
   <?php } else { // No sidebar ?>
   	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
   
   <?php } ?>
   */
   </style>
    
   -->
    

Adding Borders

Adding borders keeps me sane – I sometimes wish the rest of life was that simple! Once I knock in some borders I know at a glance where one item bumps up against another, and when switching between browsers I can see differences in display instantly. Borders do add to the width of a box, making for a slightly tighter space that can bump around the contents, but at the wireframe stage seeing that kind of thing is an advantage in itself.

Going back to style.css, I added borders to anything with an absolute width. Every border is a slightly different color. I like using pastel borders because they encourage my eye to wander. A mixture of dashed and solid borders helps me sort out where one box ends and another begins.

Here’s an example:

 
#footer {padding: 0;
	margin: 0 auto;
	width: 760px;

/* added */ border: 2px dashed #ffc06d;
	clear: both;}
 

Background Colors

I like to start with all white backgrounds, with an exception of a pale background color to indicate content chunks that are not defined by width. Whatever color I make an area in a preliminary mockup should not look like it will have an impact on user behavior. Having specific places for specific goods comes later.

After making the header background white, text that appears in that area will need to be something besides white.

Next Steps

Now that you have a fresh, blank slate, make a backup copy and think of three things:

• Width – The displayed width of a site, from a user’s point of view, determined by a user’s screen resolution and whatever else they may like to have open alongside your site.
• Height – The distance between the top of the user’s view and how far down they can see into your site before scrolling. Users should have a sense of what each individual page is about, before scrolling. Scrolling is not bad. Leaving users at loose ends is bad. Web design layouts should set up the presentation of web content in a way that orients users before scrolling.
• Hooks – In the first fifteen seconds of looking at a page, what will make the reader want to stick around?

The WordPress Default theme doesn’t include a sidebar in single post views. I don’t like the way Default does this, for three reasons.

1. Any page can be a landing page. A site should provide new users with whatever they may need in order to feel oriented. A few sidebar landmark links can do wonders for a bounce rate.
2. All or nothing is not much of a choice. Suppose you want a sidebar that shows subcategories for the parent category of that post, or featured links for a category that is also the topic of some non-blog content “Pages,” or any number of other possibilities.
3. Convenience. A centralized location for sidebar customization may provide better management. Some of this could be set up in functions.php and sidebar.php, instead of requiring separate edits on however many separate template files might have different kinds of sidebar situations. Which method is really more convenient will depend on what the blog is expected to do, and the person managing the customizations.

The following tutorial shows how to include a sidebar on the single post view of a site that uses the WordPress Default theme. The same method can be used for other sorts of single column views.

1. Step One: Find “widecolumn” template files
2. Step Two: Change body text placement
3. Step Three: Add the sidebar

Step One: Find “widecolumn” template files

In the unedited Default theme, four kinds of views have the single column, sidebar-free presentation style. Each is created by a separate template file. I’ve chosen to add sidebars to three, but leave image.php as is. WordPress 2.5x’s image gallery is generated by image.php, and I want to get to know it before editing it.

From the WordPress dashboard, go to Design > Theme Editor and open these three files of the WordPress Default theme:

• single.php
• archives.php
• links.php

On each of those template files you’ll need to change two, short, simple bits of code – one near the top of each, and one at the bottom.

Step Two: Change body text placement

Find references to the “widecolumn” class, and change them to “narrowcolumn.” “Widecolumn” arranges content in the single, wider column of WordPress Default’s sidebar-free pages. Narrowcolumn allows room for a 190 pixel sidebar with 15 pixel margins, and a 15 pixel buffer between content and sidebar.

Look for this near the top of each of the three files listed above:

 
<div id="content" class="widecolumn">

 

After changing “widecolumn” to “narrowcolumn,” it should look like this:

 
<div id="content" class="narrowcolumn">
 

Remember to click “Update File” to save your work.

Step Three: Add the sidebar

Add a sidebar. A call to a sidebar can be added just above the call to the footer.

Look for this near the bottom of each of the same three files:

 
     <?php get_footer(); ?>
 

After adding a call to the sidebar, it should look like this:

 

     <?php get_sidebar(); ?>
 
     <?php get_footer(); ?>

 

Remember to click “Update File” to save your work.

Check your work.

Open a post and click refresh.

At this point, everything should be working as expected. If not, check your work and try again.

There are three ways to get a peek at how pre-existing content looks on a theme: use a theme changer or a theme previewer on the blog’s current location, or install a copy of the content’s database in an alternate location. For some projects, setting up a theme switcher or preview utility can be a nice early step in developing a theme.

Today I’m looking at four plugins – one theme changer and three theme previewers. Each method has advantages and disadvantages. In my case a theme changer was the best choice, because I want to share the effect of design changes with my readers.

---

A WordPress Theme Changer Plugin

Why use a theme changer?

• Allow clients to compare “live” design alternatives
• Show off a WordPress theme portfolio
• Demonstrate the impact of design changes
• Entertain blog visitors

Considerations for effective use of theme changers

• Readers may be confused. Help orient readers by putting theme changer links at the top of your sidebar, where they are easily spotted.
• Limit installed themes to the choices you want to make available to users. All installed themes may be listed by a theme switcher.

Theme Switcher Reloaded Version 1.0

By Themebot.
Last Updated: 2008-2-22
Requires WordPress Version: 2.0 or higher
Compatible up to: 2.5x
Configure at Design > Widgets > Theme Switcher

WordPress Theme Switcher Reloaded is an updated version of the venerable Theme Switcher by Ryan Boren, and Theme Switcher Widget by Jared Bangs. This plugin was sponsored by Themebot and coded by kingler. The plugin is currently maintained by 72pines

Theme Switcher Reloaded

Theme Switcher Reloaded is currently in use on this blog. Those who install first and read directions later may have a confuzzled moment when looking in “Settings” for setup options. It’s not there. You need to activate the sidebar widget in Design > Widgets. After that, changing themes is extremely quick – I saw no noticeable difference in load speed, even when tested on dialup.

Theme names are appended to the blog’s root URL: http://yoursite.com/index.php?wptheme=Your+Theme+Name.
XHTML and CSS validators understand to use the files of whatever theme is appropriate for “Your+Theme+Name” when checking this style of Theme Switcher generated URL.

---

Previewing a WordPress Theme

The following three plugins allow previewing of themes that are not publicly active. Unlike the sidebar widget interface utilized by the theme switcher above, theme previewers are triggered by some sort of behind the scenes action.

Why preview an inactive theme?

• Develop a theme before making it active
• Collaborate with another designer
• Scan for width-related content display issues before changing themes
• Low pressure tweaking – do that one small thing without worrying over breaking anything in public view
• Check for CSS inconsistencies – especially nice when changing from a static site with lots of inline CSS to using WordPress as a CMS
• Check for elements in need of more detailed CSS styling, especially blockquotes and lists

Considerations for effective use of theme changers

• Ease of use. How does the previewer change themes? Is it easy for you, or confusing?
• Access. Do all registered users have rights to explore alternative themes?
• Disable cache plugins. You may need to disable cache plugins before theme previewers will work.

Theme Test Drive Version 2.0

By Vladimir Prelovac.
Last Update: May 18th, 2008
Requires WordPress Version: 2.3 or higher
Compatible up to: 2.5.1
Configure at Design > Theme Test Drive

Safely test drive any theme while visitors are using the default one.

Theme Test Drive

Only a blog administrator will be able to see previewed themes. Others will see the standard installed theme. I found this previewer to be easier to keep track of, because of seeing “enabled” or “disabled on the nifty thumbnail-enhanced theme preview page. This is the most idiot-proof of the theme preview plugins.

Theme Tester Version 0.3

By Donncha O Caoimh.
Last Updated: 2008-4-8
Compatible up to: 2.5
Configure at Design > Theme Tester

Allow an admin to test new themes without showing your blog visitors

Theme Tester

Theme Tester allows an admin to change and test new WordPress themes without worrying about showing visitors a half-finished theme. After installing the plugin, go to Design > Theme Tester to choose a theme to test. While the plugin is activated, a logged-in administrator can change themes as desired without changing the theme that regular visitors see.

Preview Theme Theme Preview Plugin Version 1.0

By Dougal Campbell.

Last Updated: 2007-10-27
Requires WordPress Version: 1.5 or higher
Compatible up to: 2.3.1 (tested here on WP 2.5.1)

Allows themes to be previewed without activation

Theme Preview Plugin

After activation, adding the query variables ‘preview_theme’ and/or ‘preview_css’ to
the current URI will change the theme that is displayed for you, without making any changes for other viewers. The trick is that you have to already know what to type. The bonus is an ability to swap out stylesheets, which can be an interesting way to go if you are working on stylesheets that can change the look of the same base theme.

Loads a theme located in the folder “my-theme”

?preview_theme=default

Loads the stylesheet from a theme located in the folder “your-theme” onto the currently installed theme

?preview_css=your-theme

Loads the “your-theme” theme, with the “my-theme” style sheet

?preview_theme=your-theme&preview_css=my-theme

I’ve used this plugin successfully on other WP 2.5.1 sites, but could not get it installed here, even after deactivating a few other plugins. If you’re into playing with your CSS, Preview Theme is very fun to use, and I’d recommend giving it a shot.

My WordPress Remodel series will continue on most Mondays and Thursdays, building towards an eBook about WordPress theme design. RSS feed subscribers will see a special link where they can register to get the ebook for free.

From here on out until I’m satisfied I’ll be blogging through the process of revamping the WordPress Default theme into a new home for my blog.

WP Default has good bones and was based on Kubrick, another theme with good bones; it will provide a good foundation. If I keep to the same CSS id names as Default, customizations I come up with can be more easily used by others. Also, starting with Default’s good use of WordPress’s hooks will be a smart way to dive into the power of the system.

Forecasting WordPress and Adventures Ahead

Expect WordPress posts on Mondays and Thursdays, and maybe a little more. You can already peek at the Default theme by using the theme switcher in my sidebar. Right now WordPress Default’s single post view has no sidebar. If in Default, clicking on the header will take you back to a view with a sidebar.

Default will look pretty funky for a while. Image floats and widths are areas where you will see rough spots. In most browsers, too-wide images are compressed to make them fit. IE6 users will see images wider than 450px protruding into the sidebar.

Progress so far…

• Installed an uncustomized version of the WordPress Default theme
• Choose and installed a theme switcher.
• Tested a theme preview plugin – look in the sidebar for links
• Took floats out of inline styling on sidebar widgets
• Added an eBook registration link to my feed

Having found a couple nice ways to switch back and forth between themes will make this process much more enjoyable. Tomorrow I’ll review the theme switcher and theme preview plugin. They’re both simple to install and easy to use.

Free eBook for Subscribers, as Promised…

After I’m done with the WordPress remodel I’ll offer up the whole series as an ebook. There will be a reasonable fee for the ebook. However (marketing alert) anyone who is subscribed to my RSS feed during the week of Mother’s Day (May 11-17) will see a special link where they can register to get the ebook for free.

Mom Remodels WordPress

For the next week or so, new RSS posts will contain a special Feed Flare link where RSS subscribers can register to get the eBook for free. When this series is done, the ebook will be compiled.

Writing a Custom FeedFlare

Day one’s biggest learning experience was how to add a nice email link to a FeedBurner FeedFlare.

I wrote and used a version of this simple static FeedFlare. Place the text below in a plain text file, customized for your needs, save it with an extension of .xml, and upload it to an accessible area of your domain. The hardest part was figuring out that I had forgotten to escape an ampersand, something that is a good idea in many situations.

 
<feedFlareUnit>
	<catalog>
<title>FeedFlare for "Name of FeedFlare"</title>
	<description>

Shows the static text "Name of FeedFlare" and links to mailto:email@domain.com, with email subject and body text
</description>
</catalog>
	<feedFlare>
<text>Name of FeedFlare</text>
<link href="mailto:?subject=Subject of Email&amp;body=Text for body of email"/>

</feedFlare>
</feedFlareUnit>
 

Testing Custom FeedFlares

Anyone who is learning to write a feedflare should check out the FeedBurner FeedFlare Scratchpad. This excellent little gizmo will test your FeedFlare’s XML and attempt to diagnose problems. After all is well, supply it with a valid feed address and road test your FeedFlare as it will appear and behave in practice. Beautiful.

Adding Custom FeedFlares to FeedBurner

Once your XML file checks out, log into your site’s FeedBurner account and take a trip to your feed’s “Optimize” tab. Scroll down and give “FeedFlares” a click

At the bottom of the Official FeedFlare list you’ll see the Personal FeedFlare heading. Paste the URL of your custom FeedFlare Unit file into the “Add New Flare” box.

Get the code

After you’re through deciding which FeedFlares to use, and where you’d like them to appear, scroll to the bottom of the page and click on “save.” If you haven’t done so already, Get the HTML code that will put FeedFlares on your site. If you already use FeedFlares, you don’t need to update your code.

Pasting FeedFlares Into Theme Files

The script that produces FeedFlares will need to be pasted into a theme’s index.php and single.php, just above the postmetadata.

And that’s pretty much it.

FeedFlare Resources

FeedFlare links can be static or dynamic. Feed Flares are very useful, and with a little creativity they can do a lot. As an added bonus, FeedFlare clicks can be tracked by Analytics.

• FeedFlare™ Overview and FAQ
• FeedFlare™ Catalog
• 101 Flares for a Better Tomorrow
• FeedFlare Developer Guide
• FeedBurner FeedFlare Scratchpad

Subscribe to my RSS feed and be sure to see the rest of my WordPress Remodel series.