New WordPress based site: The Reader’s Companion

In conjunction with the release of my new book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours I have created a Reader’s Companion site where the readers can download lesson files, dive deeper into the world of Expression Web through further reading, find relevant links and interact with other readers. The site is a custom WordPress installation with a highly customized theme designed from scratch using Expression Web 2.

In the coming weeks I’ll post a series of articles and tutorials demonstrating how you can customize this amazing CMS (yes, I don’t consider WordPress a mere “blogging platform” any more) to create advanced, attractive and easily manageable sites. For now, let’s just take a look at the highlights:

Valid XHTML and CSS

Those of you who have (or will) read my book will know this: I put a lot of importance on the whole issue of valid code (yes yes, I know… this blog has more errors than a Sarah Palin interview but in my defence I haven’t had time to clean it up because I’ve been too busy writing a book and tutorials) and since the site is a bit of a showcase for what I teach in the book it better fit the bill. So even though it is a WordPress site with a lot of customization, it validates 100%.

TIP: Amazon.com links don’t validate!

Not surprisingly the site contains a couple of direct links to the Amazon.com page for the book so people can buy it straight from the site. Unfortunately the crazy Amazon.com links do not validate. To ensure that the site would validate anyway I therefore used a redirect service called TinyURL to create a small (and valid) URL directly to the page. TinyURL even offers the ability to create custom URLs so instead of the long and cumbersome Amazon.com link the book on the left hand side of the page points to http://tinyurl.com/styexpressionweb2.

Fancy Sliding Doors Header Buttons with Invisible Text

The original idea for the site was to provide a place where people could download the lesson files for the book. For this reason the button leading to the lesson files should be large, prominent and working properly across all platforms and browsers including text-only browsers. At the same time I didn’t want standard HTML text to ruin the appearance of the site.

The standard solution to this problem would be to create an image-based button. But I don’t like image-based buttons. Fortunately there is an alternate (and in my view much cleaner and more attractive) solution: A Sliding Doors CSS button with invisible text.

Sliding Doors for Dummies

If you are not familiar with the Sliding Doors principle, here is a short explanation: Sliding Doors refers to the use of one background image containing two or more button states that slide in and out of view depending on user interaction. You can read more about Sliding Doors and how to use them at A List Apart.

The problem with CSS buttons is that they depend on pure HTML text to work. But as always there is a way around it through some clever abuse of the text-indent attribute: By setting the position of the button to absolute and the text-indent to some very high negative number (for example -9999), the browser moves the text so far off to the left of the screen that it will never be visible. And since the text is hidden with CSS, any text-only browser will still display the text where it is supposed to be.

There are two such buttons on the site: The home button on the left and the lesson files button on the right. They both work in exactly the same way.

Current Page Menu Highlighting

If you use the correct classes you can make WordPress highlight the current page menu items through CSS. If you let WordPress handle the main menu (or any menu for that matter) it assigns two types of classes to the items depending on where you are on the site: Each menu item is given a number through the page_item class and the current_ page_item class is also applied to the current page (you can also set this up manually through php if you don’t want WordPress to manage your menus). On the Reader’s Companion site it looks like this:

	
home
	
Lesson Files
	
About the Author
	
FAQ
	
Further Reading
	
Contact

As a result, to highlight the current page in the menu all you have to do is create a dedicated style class called .current_page_item.

Custom Page Templates

Another great feature of WordPress is the ability to create custom page templates that are assigned to different pages. In the Reader’s Companion site you see this in effect in the difference between the front page and the other pages. The front page template includes a left hand bar that displays the date of each post while the other template fills the entire left hand area with the page body itself.

Creating a custom page template is a fairly simple operation: All you have to do is find the template you wish to base the new one on, make any changes you need and then insert the following block of code at the top of the page:

/*

Template Name: Page with no Sidebar

*/

When the new template php file is uploaded to the relevant theme directory, it automatically shows up in the page write panel under the heading Page Template. From here you can choose your template from a drop-down menu.

Tutorials Coming – Questions Welcome

Like I said earlier I am working on a series of tutorials to demostrate exactly how these different elements come together and how you too can create advanced custom WordPress themes with Expression Web 2. In the meantime take a closer look at the site, read over the CSS and if you have any questions or comments drop me a line in the comments below.