Wordpress Theming and Fluid Layouts

Feb 07 / 2011

Wordpress Theming and Fluid Layouts Revisited

I wanted to post some brief thoughts on Wordpress theming, really CMS theming in general, but I use Wordpress so what's up? Also, just mention my inspiration for picking up the responsive web design flag and waving it furiously.

Theming for Wordpress

I start every Wordpress project by using a very streamlined "TwentyTen" base theme. I've gone through and stripped-out all specific text/class/div/link colors, sizes and any special decorations. I specify my global font sizes, clearly labeled and consolidated as much as possible, at the very top of my CSS document. This way if I need to get more specific further down the development pipeline, I can. But I always add specific font families, sizes, weights, and link colors in the same area. This cleanliness allows me to work more efficiently and keep things organized. I try to keep all consistently styled elements in one area. Now any special non-consistent styles (margin, padding, etc.) are applied to that section's CSS section block. This way I don't have to constantly scroll up and down to change things quickly.

In the example (to the right) you'll see the large block of font-family specification. Further down the page I'll define consolidated font sizes, weights, etc. in a similar fashion. This is probably more accurately related to best practice in writing CSS, but I digress. I wanted to illustrate a basic approach to utilizing TwentyTen as a starting ground. I think it's a perfectly fine theme, and being packaged with Wordpress, using TwentyTen functions and whatnot, why deviate? I also streamline the loop and template files to eliminate fluff. In viewing my screen shot above, I could definitely trim up that list, but you get the idea. I will post later about modifying Wordpress functions to suit custom themes, maybe get into a little custom post types, and featured image magic.

Feeling Fluid: Responsive Web Design

This past weekend I restructured my Wordpress theme to be completely fluid. Not fluid like my last attempt, but fluid in a smarter way. I've been reading up on responsive web design for several months, if not the past year, and it was time to give it a thorough try. Utilizing the fantastic 1140 grid system by Andytir, knowledge I've gained listening to Ethan Marcotte on The Big Web Show, reading his A List Apart article, and various other inspirations, I went to work. The process has been fairly painless and tremendously rewarding. Image resizing was probably the most challenging aspect of the process. I have yet to view my site in Internet Explorer, but Ethan Marcotte has a solution for that as well.

So far my new theme isn't perfect. There are still some minor refinements to be tweaked at smallest resolutions. I could definitely push it further, and I will. It's a great start and I'm happy to have done it. I strongly feel it's where the internet is headed and I wholly embrace it.

CSS Organization Best Practice