visnum » Template

Wordpress’ default theme and template are a complete mess

Osman S Borutecene — Wed, 03 Sep 2008 23:00:53 +0000

I am very upset about this sad realization. For the last couple of days, I was working on the design & development of a new blog. I will not name it now, it is still full of test posts and therefore it would be really meaningless to link to it right now. Anyway, I had a couple of options. To look for a nice wp-theme and fiddle it, to play with the default or classic themes and create a new look and functionality out of them or, finally, write one from scratch. The last option is the wisest option however it has been nearly 1 year that I haven’t been interested in any piece of wordpress code. So, I was also not familiar with versions newer than 2.0.x. Therefore I first opted for the second solution and started tweaking the default theme.

The default wordpress theme is a great failure. It is of course very famous because it is the default wordpress theme. First off all, it is not standards compliant. Especially the order and usage of CSS selectors are catastrophic. I will only name one for now. There is this header part, then there is this blog name section which correctly marked as h1. But then there is this description section marked as a div. This is the most common failure among amateur “web masters” who are just introduced to web standards. The description section should have been coded as a p class=”description” or p id=”description”. There is no need for a div. This is a big error but this is maybe the smallest semantic error in the whole wordpress default theme.

The CSS file is exactly a turmoil. There are many classes identified more than once and that makes it very confusing to work with them. The use of ems are a complete failure. So much that when you change an h2’s em value, it shows up in different sizes gradually. No, of course I am talking about the same class of h2! It is in the commentlist section. Go see it for yourself. Change the em value there, for instance change the em of h2 from 1.2em into 1.6em, it ends up showing growing sizes as comments continue.

And no, I am not using Internet Explorer. I am testing everything on Firefox 3, Internet Explorer 7, Konqueror (Safari), Internet Explorer 6, respectively. I can’t waste my time to tell all the errors in this default themes CSS file. I want to go into some other catastrophe that the web suffers because of those default and classic wordpress themes.

Many advanced wordpress themes are built by tweaking the default one or the classic one. And that’s a good thing, because once they put those two templates into wordpress core and ship them together, there is no reason as not to be sure about they are the right thing to go from. However, unless you strip all the CSS at once and start writing CSS from scratch by using selectors and classes from the template source, it is impossible to produce a coherent design. It’s awful. Look at the CSS file of the theme “White as Milk”. The author clearly state it in the CSS file as a comment:

THE FOLLOWING CODE IS DERIVED FROM THE DEFAULT “KUBRICK” THEME.

THE STRUCTURE AND LAYOUT IS IN MY OPINION, NOT THE WAY CSS SHOULD

BE ORGANIZED, BUT FOR NOW I AM LEAVING IT THE WAY IT IS TO KEEP

IT CONSISTENT.

As a matter of fact, since almost all themes are derived from the classic or default layouts, it is almost impossible to change and tweak them for the majority. It’s not sufficient to know CSS, you have to master it to a degree where you can find some other people’s errors in it and fix them.

The classic template is not as faulty as the default template but it is also very deceiving. For instance, it doesn’t have a real footer where stands below all the content and sidebar. Instead, the footer stands just under the content. It is not compatible with the widget functionality of a standard wordpress installation. Even not with the latest version shipped!

Briefly, this is a shame. Many wordpress users just think that they don’t know enough CSS. They are wrong. CSS is in fact quite easy but it depends on good mark-up on the template side, and clearly written CSS files. The beauty of CSS and web standards is in their usability, easiness, practicality.

I don’t think that those faulty history of the default and classic templates of wordpress is going to end here. They couldn’t fix it for years right now. It looks like they are even not aware of what is wrong. The turmoil still continues with K2.

I had to heavily tweak the default template files on a very detailed level. This was meaningless. This can be a whole lot better.

I hope somebody pays attention to work on a such important issue.

Similar Posts:

Semantic Markup Is More Important Than Tableless Design

Osman S Borutecene — Tue, 02 Jan 2007 09:33:50 +0000

I appreciate tableless design and I am an eager advocate of a semantic web, divs instead of tables, content that form the shape, all the bells and whistles and the better accessibility it brings.

Unfortunately, there are still problems with tableless design. For instance, there is this firefox bug about two divs nested in one. Firefox does not recognize the width of the first div when you nest two divs inside a container div. More important than that, Internet Explorer still cannot handle divs properly.

Of course there are always workarounds to those problems. You can create tableless cross-browser design via css hacks, conditional internet explorer html interpretations, etc.

However, when it comes to everyday designer with deadlines and less time for the learning-curve of tableless design and css hacking, design without tables can become a nightmare just because of cross-browser compatibility issues.

The optimum solution to this might be using tables less than before and creating a design where tables are just used for main positioning. This can eliminate the time and effort until each and every designer have her/his time to develop skills enough to cover tableless cross-browser compatible design, or until Internet Explorer dies, or until each and every browser agrees upon a certain CSS specification especially on positioning of elements.

Good news is tableless design is not necessary for a valid XHTML design and making use of semantic markup. More important than tableless design is the semantic markup and the use of proper (x)html elements when organizing the data, the content that the page should serve to visitors.

You can still make use of h1, h2, h… header tags, li, ol, ul, dd, dt, dl, etc., tags that tells search engine robots what your page is about and how it can be indexed properly.

Tableless design is still necessary and should be a standard when we talk about a more accessible web. Making use of tables for positioning is not a good practice, I am not here to tell you that there is no harm in using tables. I just want to tell you that you can still create valid (x)html and semantic markup and be more accessible than the past, until you learn about CSS hacks and a cross-browser compatible tableless design.

Don’t give up on accessibility, valid and semantic markup just because you are not ready to do tableless design. Try to take your time and make progress in this transitional period. This is why we call certain DTD (Document Type Declaration) as transitional.

Similar Posts:

Shonfonfe for Blogger

Osman S Borutecene — Fri, 08 Dec 2006 13:14:51 +0000

We are only hours away from the Shonfonfe theme for Blogger. See it in development here: http://kerizettin.blogspot.com and here: http://goddess-artemis.blogspot.com

Similar Posts:

Shonfonfe, A New WordPress Theme

Osman S Borutecene — Fri, 08 Dec 2006 02:26:07 +0000

I am happy to introduce you a clean, minimal, new WordPress theme. It’s WordPress Sidebar Widgets compatible.

See Shonfonfe in action:
http://jefe.hayatkisa.com/

DOWNLOAD Shonfonfe
Download as *.zip
Download as *.tar.gz

The template is more or less the classic wordpress template with a little fiddling on it. Phu Ly’s Treba was a good starting point too. Well, of course the greatest inspiration came from National Geographic Magazine’s famous yellow frame.

The stylesheet is easy to work on. There are not much details, just a little more than 250 lines.

The theme is licensed under the CC Attribution-Share Alike 2.5 License.

Feel free to play and tweak with it. If you come across any bugs or have any questions, please leave a comment to this post.

Similar Posts: