As a result of three Digg homepage appearances over a period of a few weeks bringing my blog to it’s knees I decided to make a few changes. In addition to acquiring a new server and finding someone to optimize the heck out of it for me, I also decided to re-vamp my WordPress theme.
I’m probably a little pickier than most, but I was looking for the following list of features in the new theme:
- Speed – Along with the rapid growth of traffic on this blog I noticed a decline in page responsiveness. That is not something I want to subject hundreds of thousands of people to monthly. But most of the themes I came across suffer from “PHP bloat”, or the author’s feeling that more is always better.
- Accessibility – being one of the founders of HTMLHelp.com, it’s important to practice what I preach. So themes need to be accessible by any Web browser, on any operating system at any screen resolution – including screen readers for the visually impaired. This is currently very, very hard to find.
- Search Friendly – Although almost every theme claims to be “Search engine friendly”, I found that many could use quite a bit of improvement.
- Extensible – Webmasters have different tastes, so themes need to be flexible. Unfortunately the majority are poorly documented, use illogical naming schemes for CLASSes and IDs, and generally make it hard to modify them.
After having no luck finding an appropriate theme out of the hundreds that are publicly available I decided to just build it myself. The theme is currently in use here on One Man’s Blog, and I’m now making it available to anyone that would like to use it.
Rapid Access Menu
- General Overview
- Rapid Access Features
- Supported Plugins
- Download
- Installation Instructions
- Sample Sites and Additional Styles
- License
General
Rapid Access is a three-column, fluid width theme. This means that it resizes automatically to fit various resolution monitors. If you change the size of your browser window you can see how the theme fluidly adjusts. It will look best in resolutions over about 700 pixels wide (>99% of my visitors), but is usable even on smaller screens.
Rapid Access has been tested and works with WordPress 1.5.x – 2.3.x branches. If anyone has other versions and would like to test it I’d be happy to add your results.
Features
Fast
- Rapid Access was designed so that the left (content) column loads first. This means that scripts and plugins within the sidebars won’t slow down content rendering even if they are coming from another site which is typically slow (i.e. – MyBlogLog). Other templates which load the sidebar(s) first delay the entire page rendering until sidebar content is downloaded.
- All PHP files have been streamlined and unnecessary calls to the database have been eliminated. The faster a PHP page can be executed, the faster the Web page loads.
- Rapid Access avoids the often found (and dreaded) “themetoolkit.php” page which is known to tremendously increase the load on the server. Webmasters should be wary of themes which allow a high degree of customization within the control panel because these themes will not survive heavy traffic such as a DIGGing, or Slashdotting. (Trust me… I’ve proven this three times now.)
- The RA Stylesheet is under 10KB. Considering that the stylesheet is loaded for virtually every page load, this dramatically speeds up rendering compared to most theme’s 15-30kb.
Accessible
- Unlike fixed-width themes, the fluid width of Rapid Access accommodates more browser resolutions and makes better use of screen real estate at the same time. It is always better for readers, and Jakob Nielsen agrees with me in his Ten Most Violated Homepage Design Guidelines where number 2 states “Use a liquid layout that lets users adjust the homepage size”.
- The theme contains valid XHTML and CSS. This enables a wider range of Web browsers to access the site without issues.
- This theme includes a basic Aural Stylesheet. These enable people with Visual impairments easier access to the site.
- Sites running Rapid Access are (at least initially) Section 508 compliant and pass the Cynthia accessibility test. The ADA requires organizations to avoid discrimination on the basis of disability when providing services. (More info: ICDRI.org)
- This site (obviously running Rapid Access) achieved a “95″ in the SiteScore accessibility test the first and only time I checked it.
- Please note, although the framework for a Blog based on Rapid Access is accessible you must take care to ensure your individual blog entries and all of the plugins you use are also accessible. Here is the HTMLHelp.com guide on Accessibility to help out.
Search Friendly
If you’re interested in improving Search Engine rankings I wrote an article a while back on the topic which you may find helpful. I advise you to pay particular attention to the section on Content.
- Rapid Access’ left column, containing the main content of the blog, loads first putting the content for search engines to parse at the very beginning. This helps them to better index the site, which in turn results in more search engine traffic.
- You may notice that the Page title comes before the Blog name in the title bar. This seems to assist some search engines with relevance ranking, and makes reader bookmarking more meaningful.
- Accessibility is also an important factor with search engines, and of course we’ve already covered that.
Extensible
- The theme supports WordPress Widgets. My favorite site to find them is the Web Log Tools Collection. Please keep in mind that some Widets are not professionally created and may cause your site to stop validating.
- Each page of PHP and CSS within Rapid Access contains notes regarding various functions.
- Whenever possible I used logical naming for styles and functions to make it easier to find and make changes.
- Logical “human readable” classes were used for style sheet definitions.
- Stylesheet definitions are ordered logically as they appear from top of the page to bottom.
Attention to Detail
- I believe this is the only theme for WordPress which does not include an active link to the homepage, on the homepage; another of Jakob Nielsen’s Ten Most Violated Homepage Design Guidelines.
- Unlike most WordPress themes which make a mess of printing, Rapid Access includes a Print Stylesheet that renders printouts that closely resemble the screen version.
- The stylesheet includes definitions for manual insertion of text or image asides, as well as left or right floating pullquotes.
- Style has been included for right or left Pullquotes. See a real example here.
- Style has been included for right or left floating ad units. You can use either text or image ads and they will have a border around them. See a real example here.
- I spent a great deal of time trimming down the code. This includes removing unnecessary spaces, punctuation, tabs, line breaks, etc. All of this work amounts to only a few KBs saved per page, but when you add them all up it amounts to a signifigant savings in bandwidth and time. Especially for high traffic blogs, or users on slow connections.
Rapid Access currently includes built-in support for the following plugins:
In the case of built in plugin support, I always use the “function_exists()” check to first checks if the plugin is installed. If the end user does not wish to use the plugin it should not break page rendering.
- WordPress Widgets – A must have!
- WP Admin Bar Reloaded – Displays a handy admin menu at the top of the page for logged in users.
- Recent Comments Widget – Shows recent comments in the sidebar.
- Ultimate Tag Warrior – Shows related tags below each post.
- Other Posts from Cat – Shows related articles below each post.
- Comment Quicktags – Inserts a quicktag toolbar on the blog comment form.
- Live Comment Preview – Gives users with a live comment preview.
- Paged Threaded Comments – Allows users to respond directly to comments and breaks comments into multiple pages for blogs will lots of comment activity.
Got a plugin you’d like to see supported that won’t mess up the theme? Use the contact form to send a suggestion.
Download Rapid Access
Version History
- July 7, 2007 v.13 – Changes to Style Sheets which fix IE6 rendering issue with blockquotes and add new styles for footer column support. Changes to Footer.php to allow 3 footer columns to be inserted. I recommend all users at least update stylesheet.css and print.css
- May 7, 2007 v.12 – Changes to index.php and single.php to fix a date stamp bug. (Thanks to Roy Kaldung!)
- May 1, 2007 v.11 – Minimal changes to header.php to better handle IE7 RSS requests.
- Initial Release v.1
Installation Instructions
- Download, unzip and upload the Rapid Access Theme to your “/wp-content/themes/” directory.
- Download and install any of your desired plugins.
- In the WordPress Admin area, activate the Rapid Access theme under the Presentation menu.
- Configure your desired Widgets in the Presentation | Sidebar Widgets menu.
- Enjoy your fast, accessible new theme!
Optional:
- Upload your own “Favicon.jpg” to the Rapid Access theme folder to customize your site’s bookmark icon. (Here are a few ideas.)
- In the “header.php” file update the content in the following lines with info related to your site:
<meta name=”Author” content=”" />
<meta name=”Description” content=”" />
<meta name=”Keywords” content=”" />
Sample Sites and Themes
Sites Using the Rapid Access Theme
If you have a site running Rapid Access and would like to submit it for inclusion please drop a comment below or use the contact form.
Additional Stylesheets for Rapid Access
If you develop an alternative style for Rapid Access please let me know and, if it’s good enough, I’ll list it here.
I’d love to see hundreds of different CSS based designs for this theme. Also, if you have suggestions for changes to the underlying PHP (including necessary classes or ids) please work with me on those so that I can update the theme for everyone’s benefit.
- Your stylesheet listed here!
License
The Rapid Access theme is distributed under my new Nice Person License as Postcardware. Please use it, modify it, build commercial Web sites around it, and make the Web a faster, more accessible place. Here is what you could do for me in return:
- If you could either leave the attribution link in the footer in place or link back to any article on One Man’s Blog I sure would appreciate it!
- If you discover ways to improve the speed, accessibility or features of this theme, please let me know.
- Do you have some experience with HTML, CSS, PHP, etc.? Please join our community at HTMLHelp.com and share your knowledge with those in need.
- If not, do something nice for someone you don’t know today.
- Finally, if you really like it, drop me an old fashioned post card in the mail! That would be completely awesome! You can send them to:
John Pozadzides
PO Box 2591
Frisco, TX 75034
USAIf I get enough of them I’ll put together a post with the really interesting ones.
As always, comments and suggestions are encouraged. My future development and support of this theme will be directly proportional to the amount of enthusiasm it appears to garner from the community.
Enjoy!
{ 106 comments… read them below or add one }
Next Comments →
Am giving it a whirl now. Not overly keen on the link:visited colour, but that’s easily fixed. I like it.
Peter,
To be honest I’m not too crazy about that color either, and in fact I think that the entire color scheme could be improved upon immensely. If you come up with a better stylesheet and want to share it please let me know and I’ll list it. Also, let me know if you find any other glitches or anything.
John
Using it now. A real fast theme without being spartan, wow!
Cesar,
Thanks for the compliment. :-) It does look good on your site.
I do notice that we have a small problem with your site rendering in IE6 and a little bit in FF2 as well. This is because your drop down links are wider than the 200px fixed sidebar width in the first sidebar, so let’s try to see if we can fix that.
You need to edit the stylesheet.css document to change two lines. First find the following line:
.Sidebar {float:right; position:relative; width:420px; padding:20px 0 4px 0; margin-left:-420px}and change it to:
.Sidebar {float:right; position:relative; width:470px; padding:20px 0 4px 0; margin-left:-470px}Then find the following line:
.Sidebar .SidebarLeft {float: left; width: 200px; clear:right}and change it to:
.Sidebar .SidebarLeft {float: left; width: 250px; clear:right}This should make your left sidebar about 25% wider and I’m just guessing that might be a good width. Let me know after you’ve made the change and we’ll see if that doesn’t fix your problem.
Of course, the other option is to simply make sure that the items in your sidebar are around 190px wide or less. If you decide to change the stylesheet instead of the items in your sidebar you’ll need to remember to make the same change again later if you download new versions of the theme here.
John
Hm… your suggestion overlapped the main content with the left sidebar:
http://img371.imageshack.us/img371/1869/overlapzj4.jpg
A little manipulation of the widgets made the trick. Lost the organization logic, but c’est la vie.
A feedback: a reader of mine made a private remark that liked the theme, but he missed the number of comments for each post on the main page.
Cesar,
Oops. Sorry, I forgot one other change necessary for the stylesheet:
Change:
.ContentArea {float:left; margin:0px 420px 0px 0px; padding-top:20px}to
.ContentArea {float:left; margin:0px 470px 0px 0px; padding-top:20px}That is what caused the content to overlap. If you make all three of those changes together it should work now. :-)
The other problem I’m now seeing is your entire sidebar floats down at the bottom of the page instead of being at the top right. This time I think it’s because your recently listened to music list is a 255px wide image. That extra 55px seems to be breaking the sidebar.
If you make the change to the stylesheet this may resolve it’s self (and you can re-order your sidebar the way you wanted it), if you’re going to keep it “stock” you’ll need to either remove that particular plugin or somehow reconfigure it to be no more than 200px wide (190 would probably be better).
Hope that helps! And I’m glad to hear that one of your readers gave some positive feedback.
John
The Man,
your suggestion did the trick. Awesome! Thanks!
Oooops… I forgot to ask another thing:
I saw in the posts that there is a line like “Digg This! • Save to del.icio.us (2 saves) • Stumble It! • Submit to Reddit • Add to Technorati! • Technorati: 3 links to this item • 11 comments on this item”. Is that a plugin? Or a modification of the theme?
Thanks a lot!
Cesar,
Two things. First, although your sidebar looks much better now we have a different problem! :-) It’s still pushing down to the bottom of the page in IE6, this time I think it’s because the DVD code link in the sidebar is not wrapping. So, we’re going to try one more thing…
Find this line in the stylesheet:
.Sidebar {float:right; position:relative; width:420px; padding:20px 0 4px 0; margin-left:-420px}And change it to:
.Sidebar {float:right; overflow:hidden; position:relative; width:420px; padding:20px 0 4px 0; margin-left:-420px}The addition of “overflow:hidden” should prevent further breakage of the sidebar. If you put something too wide in there you should only see the portion that fits. I’m going to make this particular change to the stylesheet for everyone.
Now, the line that says Digg This!, etc. is actually a free script you can get from Feedburner. What you need to do is go over there and sign up for a free account, register your blog, and then set up the FeedFlare. It will let you choose which things you want to display on your blog and then generate the script.
After you’ve got your script you need to edit two files. index.php and single.php. You’ll see a comment line I included which says something like “Paste your FEEDBURNER.COM FeedFlare here”. Delete that entire line and put your script line in there, then save it and upload it.
FeedFlares take about 30 minutes or so to start working, so after you’ve made the change you’ll see a little blank area there for a while. Check back in about an hour and you’ll have your flares working! :-)
John
John,
thanks for the FeedFlare tip! :)
I made the changes to the theme, hope it finally looks good on IE 6.
Cesar, Success! It looks like that finally fixed all the issues, and your FeedFlare is looking great!
John
Can’t open file. This is error message:
! C:\Documents and Settings\George\Local Settings\Temporary Internet Files\Content.IE5\8TCQJS2B\rapid-access-v.12[1].zip: Unexpected end of archive
I’m not sure why you’re getting that error. I’m able to download and unzip it without any issue. Sometimes downloads can get corrupted and you might need to download them again. I’m guessing you already tried that, but you may also need to clear your cache before trying again.
Just in case though, I uploaded another copy here. Let me know if you are still unable to get it unzipped.
John
Nice theme and appears to be working fine in Wordpress 1.5xx on bodmas.org.
I did add a simple if/else loop to the ‘postcontent’ DIV in Main Page so that pages that are not home or single show just the_excerpt() instead of the whole post, I prefer this and I use the CQS plug in to list all the excerpts of a post category in one page.
I also dumped the calendar and moved my external links list to the far right column, but that is personal preference.
How do I put the search box back in?
Keith,
Thanks for the report on WP 1.5, though it appears that you encountered some sort of issue as you reported on your blog problems with display in IE below 1280 resolution? I have tested it with IE 6&7 extensively and have found it works in all resolutions, though below 700px it will wrap the sidebars down to the bottom. Could you tell me what you noticed when you reported this error?
As far as the calendar and links, etc. it sounds like you are not using the Widgets plugin, which of course is fine, but I am using it along with the Google search embedded in a text widget. You could easily add it directly to a fixed sidebar, but may I suggest that you give the Widgets a try as they’ll make your life a lot easier when it comes to making changes to your sidebars.
John
MS IE problems related to wide preformatted text, my changes to the margin settings and changes to padding to get the background colours in the right and left side bar columns so there was no gap between them. Your site looks fine in MS IE 6 except for the bottom scroll bar.
Cheers
Great theme – thank you so much for making it available.
Just as a note to those of you that have subscribed to comments on this post, I’ve updated the theme and recommend that you at least update the Stylesheet.css file (unless of course you’ve highly customized yours already :-).
Hello!
Thanks for your theme! I have made my first post, but the comments area is not showing up. What am I missing or need to do?
Thanks,
Denise
Denise,
I really like the way you updated the colors! The green looks really nice (much better than the original :-)).
Anyway, your comments area does not show up on the home page, only when you click on the specific page to read the article. So, if you select the title of the article it takes you to the full page for that article and there you will see the comments area at the bottom.
On the home page you will see a continuously updated listing of your most recent posts. If you want to have it look like mine where there are just a couple of paragraphs on that page followed by a “read more” link, you just need to use the MORE button when you are writing the article. In the graphical editor it looks like a little horizontal line separating two white pages. That tells Wordpress where to cut it off on the front page, but it does not affect the individual article page at all. Give it a try! ;-)
Honestly this is one of the reasons that I don’t post the entire article to the home page. In addition to cluttering things up there, it may leave readers wondering how they can comment.
I also recommend that you use the Other Posts from Cat plugin and it will show up below your post so readers can see related articles they may wish to read after they finish one post.
OK, that makes sense. Less clutter.
Thanks for your help!
I appreciate your attention to accessibility!
Denise
Hi John, terrific Theme. It loads very fast on an iPhone which is great for some of the things I do.
Dumb question but will ask anyway. How do I change out the header image? What are the best dimensions for the image? Thanks for creating a terrific theme…John
John,
That is a really good question!
The theme doesn’t actually come with an image in the header, but I recently stuck my picture up there for the heck of it. I’m using a 100px X 100 px image, and I put it in the “header.php” file. My recommendation is that you stick to images no taller than 100px, and probably not much wider than 300-400px.
It’s quite simple to do, just open the header.php file in a text editor and look for this line:
<div align="left" class="Header"><!-- This begins the common page Header -->Then insert the following line immediately afterwards:
<img src="/JohnPsmall.jpg" align="right" alt="John P." height="100" width="100" />Just make sure that you change the image location (/JohnPsmall.jpg) to whatever image you want to use, and modify the height and width attributes as well as the alt text description.
If you’ve done it correctly you should see your image floating over on the right side of the page just where mine is. Let me know if you run into any problems or need more help.
John
John, thanks for quick response. Your code did the trick…John
Liked your template so much, that I dumped my old one, and swtiched… I like it, I like it! :)
-Chuck
Next Comments →