WordPress is being used increasingly for the development of fully-fledged websites. After all, it offers a powerful combination of being (at least in theory) easy to skin whilst also providing an excellent user interface for managing the site once it’s up and running.
I’ve been developing a business creating WordPress sites using the excellent Thesis theme from DIYThemes.com. Thesis makes it possible to have pretty much any design you like, some of which can be implemented using the WordPress dashboard. To move significantly away from the Thesis default theme, however, you need to use CSS and Thesis makes this easy by making a .custom CSS class available. What this means is that any class based on .custom will override the equivalent class in a design. In practice, this means that if I wanted to have my own <h3> styling, I would simply apply it like this within custom.css:
.custom h3 {
color:#ff000;
}
I’m sure you can immediately see the power of this: you can change the entire design this way without touching the core Thesis or WordPress CSS. Thesis also includes a wide range of addition Hooks into the WordPress framework but that’s beyond the scope of this article.
The problem is that websites (as opposed to blogs) often need very different layouts across their pages. In WordPress, when you add a Widget, it’s added for every page in the site whether you like it or not. What’s needed is extra flexibility in hiding, showing and editing all aspects of the page. Thesis does add the “no sidebar” template, but that still doesn’t give enough flexibility.
I want to talk about a little known feature that Thesis makes available for WordPress pages. You see, not only can you override css at a global level but also on each individual page. To access this, enter a new, unique, class name in the CSS field within the Page.
Once you’ve done this, you can access CSS properties using (in this case) the .resource class rather than .custom, but still within the custom.css file so it’s all in one place.
Let’s imagine, for example, that I want to hide one of the sidebars on my “Resources” page. Here’s how I’d do it:
- Load up Firefox and use the Web Developer Toolbar to find out the CSS selector used to display the sidebar
- Open up custom.css and set this CSS’s display property to “none” like this:
.resource #sidebar_1 {
display:none;
}
Whilst you can, of course, achieve the same effect by creating a new template for the page, this is a much simpler way to make changes unless you want an entirely new layout.
You can also use the multimedia box in Thesis to add any HTML you like so it’s possible to further customise the page that way. There is a point, however, where all this customisation would be better done with an entirely new template. Once you start feeling as though you’re bodging it- that’s when to start from scratch. If all you want to do is hide or show sidebars or make other unique changes to the design of one page, give this technique a try, it’s a whole lot quicker!
Use Facebook to Comment on this Post
.gif)
