Category Archives: Web Stuff

Web stuff – programming, designing, etc.

Web Stuff

Why WordPress

WordPressWordPress is a Content Management System, blogging software, and extensible Website framework. They describe themselves as a “semantic personal publishing platform with a focus on aesthetics, web standards, and usability”. So why did I choose to re-work my www.kathyw.org website with WordPress?

I have been writing, designing and coding websites since 1995. I’ve seen Web Standards evolve, trends come and go and browsers delight, frustrate and disappoint.

Here we are currently (June 2011) with FireFox 5.0, IE 9, Opera x, Chrome y, Webkit z, and still my Web Development mailing lists are full of questions of “something-on-my-page won’t work with IE 7-8, IE6 (shudder), Firefox 3” or some-other-old-browser.

I must confess I’ve been “guilty” myself if you like at trying to design usable websites down to IE6. The kludges required to support these old out-of-date browsers and their bugs is enough to make many throw our hands up in the air and say “enough”!

Then through my Web Development work I was introduced to WordPress to migrate a clients existing WP site to one of our servers. WordPress is seen by many as simply a blogging environment. It is also a whole lot more.

For over 3 years now I’ve dabbled in WordPress, not for blogs at all, but as a simple to use Content Management System for clients who want a professional looking site they can update easily themselves. WordPress lends itself to this task extremely well. It is an incredibly flexible and extensible environment, with a vibrant developer community and user base.

So when I decided to re-vamp my own Website (this one), I figured the best way to really get a handle on WordPress was to use it for myself.

Now instead of having to program everything (which I still do for some sites) I can leave a lot of the coding to the hundreds of programmers working on WordPress, it’s Plug-Ins and Themes. Now I can concentrate on the content, not the “container”.

Most of the browser issues and problems are handled by WordPress and it’s theme programmers, with only a little tweaking for personal taste – like transparent png support for bad-old ie6, and some extra JQuery .

Security is always an issue, and WordPress being as popular as it is, makes it a target for would-be hackers. Fortunately the people behind WordPress are vigilant to the threats and respond quickly to any newly discovered exploit. Properly secured and regularly updated WordPress seems to be a pretty reliable package.

Most Content Management Systems (CMS) tend to suffer from code bloat, and what is often referred to in Web Developer circles as “divitis” – an almost unending collection of nested and often empty divs (HTML scripting tag). WordPress is no exception, although it’s largely theme dependent, better in some than others, and far better than other CMS’s I’ve deployed projects with in the past.

The people behind WordPress and it’s Themes and Plug-ins also seem to be pretty handy at keeping up-to-date with Web trends. Social Networking considerations and support for mobile platforms being just two more aspects I can add with just a Plug-in or two. Sometimes it’s really handy to have an international army of keen young and experienced coders and resources to call on.

And did I say installation is a breeze? None of the horrendous hoops many other CMS’s require, instead it’s incredibly easy. This means I can spend more time securing, tweaking and designing. Yes if I want some specific functionality the base install doesn’t have, I’ll have to go get a plug-in or two, or write something myself. No big deal. Conversely, I only need to install or write things I need, without the hindrance of functionality I don’t need (or want).

So if you add together an army of coders to handle the dreaded cross browser issues, web standards and security, regular and easy updating, fresh new ideas and Plug-ins, lots of fellow web developers using WordPress (often abbreviated on-list to “WP”) and writing about what they have found, good and bad, it becomes an almost “must-do” to at least see what can be done with this publishing platform.

So now my journey continues. How far can WordPress take me? Will it in the long term let me spend that extra time on design and content? It’s an adventure I’m enjoying so far, and as long as the excitement continues I’ll keep on exploring it.

Web Stuff

Whoo-hooo!!

Time to bring the site back on-line!!!

Finally got a few niggly things sorted, and checked the new blog and site in my least favorite browsers – ie 7 and 8. Found a few more niggly things to fix for ie7, worked fine regardless in ie8. Only kinda works in ie6 but that is no surprise. I’m very much over kludging things for ie6 (any ie6 users out there, do yourself a HUGE favor and install Firefox).

The drop down menus seem to work fine, as does the lightbox – the “niggly” things that threw a spanner in the works of yesterday’s plans to bring the site back.

This is a huge change from the previous site in so many ways, from the visual of the design to the basic underlying philosophy and concept of KathyW.org.  It is past time to move away from the static picture-on-the-screen brochure style approach and grasp the new and engaging interactive options. Ok, so there aren’t any Facebook or Twitter (or fill-in-the-latest-fad) links yet, but they may well come. I’ve only commented out the code in the PHP, not removed it 🙂

Anyway, enough play for now – time to get back to work and setting up some eCommerce content for customers.

Web Stuff

Two Column Layout

Monarch Butterfly on Buddleia Flower
Monarch Butterfly on Buddleia Flower - March 9, 2011

The question was raised as to how easy (or not) it would be to have a two column layout, in this case in WordPress, that would be easy for end users to maintain and use.

Specifically, pictures with captions in a left column, and an unlimited amount of text in the right column.

So, let’s do a test case to see how this could best be done!

I’m going to ramble on a bit here so I have more text to work with without resorting to “Lorem ipsum dolor sit amet” …

Basically, it *should* be easy to achieve with a small amount of custom CSS that the developer can add to the site styles easily, and some simple instructions for the client / end user to add one minor change to any left column image.

We start with a page that has a single column layout. Here you have at least two options depending on whether you use the Genesis framework and themes or default WordPress themes (eg TwentyEleven). I will try to look at both options here.

With StudioPress Genesis

Select the single column layout from Genesis Layout Settings. In the Custom Body Class section put your class name, in this sample case I used “twoColumns”. Genesis will add the “twoColumns” class to the body tag.

To specifically apply the styles to only the text, add it’s enclosing class – in this case “entry-content” to the style rule. Go to your style sheet – Appearance, Editor, and add the styles for your 2 column layout (I usually add extras at the bottom of the style sheet):

.twoColumns .entry-content {
margin-left: 300px;
padding-left: 20px;
border-left: 1px solid #CCC;
}

To put your images and their caption in the “left column”, create the following style rule:

.twoColumns .entry-content .wp-caption {
margin-left: -300px;
}