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 →
I’m no expert either, but I would check the server stats. From your control panel go to stats and see if there’s anything that justifies the slow response.
I’m looking at your site now and the numbers look about the same as my personal site about 86 in 1.0 My business site shows 293 in 0.383, I’m pretty sure that’s on it’s own or it’s extremely well managed. (I don’t pay the server bill).
Yours is showing 29 in 1.3, unless you see some anomaly in the stats I would say it’s something in the server. Your problem earlier could have been caused by another site on your same server, but the hosting company is never going to admit that.
Hope that helps.
Thanks so much for that quick and helpful response. At least now I have concrete numbers to use when I go back to the hosting company.
One more thing: I have this sense that the problem will be with the hosting provider, and they won’t be much help. Can I ask you (Wayne, or anyone else with info) who you use to host your weblog? I fear a move may be in the offing.
go to my site (click on my name here on the comment) and find the email link on the right and I’ll be glad to discuss it with you.
Wayne – feel free to share your hosting info here. I don’t mind. :-)
Rosina – I recently joined Layered Technologies as Chief Marketing Officer and VP of Sales. We have a low end offering called a Virtual Private Server which would be very good for hosting your domain(s) if you are experienced enough to use a control panel like Plesk. Check out the specials page at http://layeredtechnologies.com for a great deal we have for the next few days.
If you need something much cheaper I would recommend one of the cheap shared hosting plans at http://1and1.com.
John
I tend to ramble a little so an email was probably better. In a nutshell, I have bluehost.com on my personal blog and only one problem when I had a bunch of traffic. I was going to move and tried to research this question a few months ago and found I wasn’t doing so bad compared to some of the stories out there.
I was looking at my host for the blog I edit for which is midphase.com but don’t have any experience with their support, but haven’t had any problems either.
And it’s more of a – you get what you pay for on some of these hosting plans. But most of us don’t have the traffic (yet) to justify a major plan.
Yeah, I can understand that. A lot of folks only need the $5-10 per month hosting plans, which is fine. But there comes a time when some folks get 4-5 of these little sites going and end up paying more to have them all running on separate sites then they would to step up to something like a dedicated VPS which can host as many sites as you like on it with no additional cost.
It usually takes a little bit of a learning curve to make the move, but no one that I know who has moved to VPS or dedicated servers would go back to shared hosting. :-)
John
John — thanks for the suggestions. I’m sorting things through. If you’d like to see another stab at a style sheet for your very elegant theme, please have a look at my weblog. Also, when next you get around to fiddling with the theme, it would be great to have an alternate page template, one that has no sidebars at all, just one column with wide margins. For chunks of text to be read without distraction. I know there’s a way to do this but I never manage to pull it off without messing up crucial bits.
thanks again
How do I get my image into the header.php file? I can go to my dashboard-presentation-theme editor-header. I can insert the code for the .jpg file. My problem is, I don’t know where or how to place the .jpg file to begin with.
Steve,
As far as where to place your image… you can upload it to your server anywhere. But for the sake of simplicity I would suggest that your upload it (using FTP) into your root directory where you loaded WordPress. After you’ve uploaded your image you can then use something like the following code to insert the image into your PHP file:
<img src="/steve.jpg" align="right" alt="Steve S." height="100" width="100" />If that doesn’t answer your question I’ll need a little more information about where your blog is being hosted: Did you install WordPress yourself? Who is your Web hosting provider? Do you know how to use FTP?
Let me know how it works out!
John
John or anyone who knows the main index template well — could you possibly look at my source file? Suddenly the sidebars are sliding to the bottom of the page, which usually means there’s a stray div, or a missing div, but I can’t see it for the life of me.
Any help much appreciated.
I may be speaking totally out of turn here but I had a little bug a couple days ago. I simply re-loaded this theme by FTP into my theme folder at my host provider. It asked me if I wanted to replace existing file? I clicked yes. It reloaded just fine. When I viewed my site, everything was ok. I didn’t lose any content. That worked for me.
It was a missing div, I finally found it.
Thank you John, that’s what I needed. I host at Bluehost and I FTP’d it.
I use blogger but i am well aware of the abilities of a wordpress template.A blogger template lack such fast loading abilities.But i also prefer to use wordpress themes converted to blogger.
Great new color, John! I really like it, it livens up the place in a smart, manly kind of way! :)
I’d still like to figure out how to keep that bottom frame on my header border, and I’ve realized a way I can show you what I’m talking about, since my silly explanations don’t make a whole lot of sense. -Unless you were sitting here right next to me! ha! Lisa points excitedly at the screen, “Right there, John, right there! That line, that one!”
Hahahaha!
I never seen that you released this style, I’ll check it out and see if I can use it on vBSetup
cheers
Hi John, I’ve downloaded and installed RA on a WP 2.2 install and once I activate the theme and view the site I get an error :
Parse error: parse error, unexpected $end in D:\wamp\www\wp\wp-content\themes\rapid-access\header.php on line 31
I’m sure it’s me being dumb, but this has stumped me! Any help would be appreciated.
Rods,
I’ve never heard this particular issue reported before. I know the theme works on 2.2+ so it makes me wonder if you might have a plugin that is somehow in contention with the theme. That would be unusual, but not impossible.
The strangest thing of all is that by my count line 31 would be the very last closing <DIV> in the file which really should not break any parsing. Did you by any chance modify the header.php file to add anything at all?
John
Hello everyone. I need a little help on this theme please. I was on a computer today that was running IE7. My theme wasn’t rendering properly. I’m on a Mac and I use Safari mostly. This theme loads perfectly. It seems to do well on IE6. On IE7, all of my text with widgets, plug-ins etc. on the right side of the page, runs beyond the border stripe. You have to use the scroll on the bottom of the page to see the entire page. John, I pulled up OneMansBlog to check it, and was rendering just fine. Is there some sort of update or can anyone offer suggestions please? Thanks.
Hey John, I was searching google for “free wordpress styles” and your blog came up #1
well, I guess it wasn’t free wordpress style, but it was something close… Just wanted to say good job on the ranking, I wish I could remember the exact phrase though :(
Hi John, I downloaded Rapid Access theme and I tried it on my localhost with wordpress2.5 but it doesnt work for me.
I tried it on firefox, IE7, Maxthon, but it shows nothing on the website, not even a word. I tested on other themes and I have no problem with them.
Any solution to detect this kind of error?
TSO,
It’s got to be some sort of problem on your end. Rapid Access is currently running perfectly on at least 20 blogs that I am aware of under 2.5. You might check and see if you have any rogue plugins interfering…
John
I deactivated all widgets and plugins but still got error. I will figure it out later.
Oh by the way, Maxthon browser couldn’t render the theme perfectly on home page, right side contents are out of boundary.
John, have you had any problems loading images after the 2.5 upgrade? When uploading an image from a local computer it starts “crunching”, but stops with an error.
I disabled all plugins and get the same error. The one site I’m not using your theme works fine. I haven’t had much time to really get into it because I work around it by uploading an image with ftp, then using the url when inserting into a post.
I was just curious if you had heard any other problems like that or had any ideas.
Wayne
Next Comments →