SteveSpangler.com Web Design Launched

Visit Katz Web Design-developed SteveSpangler.com

As announced in August, Steve Spangler chose Katz Web Design to develop their blog. Their previous blog was aging and didn’t provide the functionality they needed. I was provided with a design by Blake Sumrall (at Steve Spangler, Inc.) and was tasked with converting it to a website.

The development of this site required lots of tricks that convert WordPress into more of a CMS (Content Management System). Read on to learn some of the WordPress customization.

Multiple Sidebars

Each page has its own sidebar, including the home page. This allow each page to be configured differently; the Media page, for example, may have links to downloads.

Multiple inline sidebars on each page allows for site-wide messages. For example, the site currently has a message on every page asking users to report any site bugs. This is achieved using a sidebar that appears above the content area. There is also a sidebar below the content, above the sidebar and below the sidebar, and defining the footer text of each page

Customized Threaded Comments

I customized Brian’s Threaded Comments (BTC is a WordPress plugin) to look better, work in concert with Live Comment Preview, and be more semantic by removing some inline javascript and replacing it with some jQuery. 

BTC had some issues as well, including when you minimize a comment, it still shows the avatar (the user’s image), so I made some CSS upgrades as well.

Custom Fields Galore

I really went wild with Custom Fields using the More Fields plugin. Each post and page can have it’s own unique header image, background image, above-content box, below-content box, above-sidebar box, below-sidebar box, and Related Products that link to SteveSpanglerScience.com. Each post can also be featured in a home page content slider with a defined image, tab title, and excerpt.

Category Customization

Each category can have its own background and header image as well, and the category description is displayed as HTML (using this tip and a modified Category Icons plugin)  This allows further customization of Categories, which are limited in terms of Custom Fields.

CSS Sprite Use

This site uses CSS sprites to achieve fast load time. There is some more improvement to be made (the post ratings stars, comment icon, and printer icon can be easily added), but as you see, lots of the UI elements are drawn from this one image.

This also allows for simple updates to many key components in the design.

Blog Pages

Using a Page Template, each page can be both a page and a blog category (see a live example). This allows all the benefits of having a page, while allowing multiple categories to be displayed under it. The Experiments page is currently drawing posts from over 4 different categories, defined by the custom fields.

Functions.php to the Rescue

Many WordPress functions were almost what I wanted, but didn’t offer something like rel="nofollow" option. The solution is to simply copy the original function into your theme’s functions.php file, and update it as you want.  I did this with many WP functions, and it allowed me to not use a plugin or modify WP core, while providing the added functionality I needed.

I’ve used functions.php in other projects, but never so often. It’s a lifesaver.

Lots of work…and fun

It was great working with Steve Spangler, and all of the people at Steve Spangler Science, including Jeff Brooks, Alyssa, and Blake Sumrall (who designed the site). 

This project had me customizing LOTS of elements of WordPress, and I learned some great tricks I will be sharing with readers here. Do you have any questions about the site development?