Skip navigation

WordPress Theme Designers: Slapping You Upside the Head

AARRRGGGGHHHH!!!!

Do you hear me yet? Listen closely.

AARRRRRGGGGGHHHHHHH!!!!

This is the sound of the pain and suffering bloggers on WordPress.com and WordPress make when they encounter the most lovely and useful of WordPress Themes that lack a few of the most basic elements. Come on, folks. Can’t you read? This is common sense stuff that I’m about to tell you, so consider this a slap upside your head.

STYLE BASIC TAGS

There are few things more frustrating for a simple, unsophisticated blogger, than using a very common HTML tag in their post to make something bold or add a horizontal line and find out that the WordPress Theme designer either didn’t style this common, standard tags to match the look of the Theme, or that they did, or did something that unstyled them, and doing so makes it not look right.

A good example is this lovely WordPress Theme I’m currently using (subject to change, of course) called Regulus from Binary Moon. It is an amazing accomplishment to incorporate customization into a Theme that allows users to change how it appears to their readers. It’s a work of art in so many ways, and yet, there are some simple but serious problems.

While putting all their energy into the wizbang effects, which are tremendously successful by the way, simple things were overlooked. I’m singling out Regulus, but I had the same problem with Pool and other WordPress Themes. Here are some examples.


You should see a horizontal line above this paragraph. Do you? No. It’s not there. Why, I’m not sure but either it wasn’t styled, or it was styled to never appear.

This should be in code format, looking like typewriter type.

Well, does it? At this time, unless the Theme author updates the Theme, it doesn’t.

This should be in bold, but bold only works with strong in this Theme.

The <b> bold tag is one of the first tags ever developed. The tag for <strong> is styled, so why couldn’t a b have been added to that style? This is just pure lack of attention.

In my article that should probably be in the , “Attention WordPress Theme Designers: Designing Themes for WordPressMU and WordPress.com” clearly states that you need to make sure that ALL of the basic elements are styled to match the Theme. Since WordPress.com users can’t tweak or fix what you overlook, you have an additional responsibility to make sure you get it all right from the start. Don’t leave anything out.

Here is a list of the most common HTML elements used within the content area of a post that must be styled to match the Theme, or at least look like they are supposed to look.

  • UL/LI – to at least three levels down
  • OL/LI – at least 2 levels down
  • DL/DT/DD
  • BLOCKQUOTE with possibly CITE
  • CODE
  • H3, H4, H5
  • PRE
  • HR
  • B and STRONG
  • U
  • I and/or EM
  • ABBR
  • ACRONYM

And while you are going through the list, remember to not unfavorably style anything that might make what we use ugly by your choices. For example, Regulus has put in styles that takes all the cell padding and spacing out of tables. There are times when I want to show you a list of data in a table, using them appropriately, but there is NOTHING I can do to add any cell padding to my tables. I could in other Themes but not this one.

Item 1 Item 2 Item 3
One Two Three
Four Five Six
Seven Eight Nine

I can add color and borders, but I’ve tried adding cellpadding and cellspacing to no avail. The styles for the table aren’t stripped out, so they are there. The Theme is just giving different orders. So when I want to make a table, it looks terrible. Tables should come with cell padding, so adding elements that strip all the padding out in a Theme is ridiculous. Come on, give me a break here. And everyone else. Help us do what we do better not worse.

Please, create a well-rounded sandbox or test post to put your WordPress Theme through a full set of test to see how all the different elements will look.

THINK ACCESSIBILITY STANDARDS

As you place the WordPress template tags around within the Theme in places where the code will generate the information without user intervention, be sure to add template tag elements that help the Theme meet Web Standards for Accessibility. The WordPress Codex features a step-by-step article on WordPress and Accessibility to help you fully understand how to integrate Accessibility Standards into your WordPress Themes.

One easy example is found in the template tags for creating post title with a descriptive title in the link:

<a href="<?php the_permalink() ?>" rel="bookmark"
title="Article about <?php the_title(); ?>">
<?php the_title(); ?>
</a>

The result of the link when the page is generated would be:

<a href="http://example.com/accessibility-matters.php" rel="bookmark" title="Article About Accessibility Matters">Accessibility Matters</a>

Very simple and easy to do. And a requirement to meet the most basic Web Standards.

SHORT AND SWEET SEARCH RESULTS

One of the coolest things to do with WordPress is to create custom web pages. For example, you can have a page designed specifically for the look of the front page of your blog, and then when a visitor clicks on the title or the read-more link of a post, the single page view generated will look different from the front page. This is just the tip of the ice berg of how much fun you can have creating different looks on your WordPress blog and Theme.

But I’m here to berate simple minded WordPress Theme designers who overlook the usefulness of this powerful feature. And one of my biggest grumbles is the lack of styling a Search Page.

Go on, search on this blog. I’ll wait. The search results page has not been developed so what you get is the default look of WordPress which shows you the ENTIRE post from every research result. The user then has to scroll through pages and pages of writing to find what they might be interested in. Type in a popular keyword in your search on this blog and you could easily find a list that scrolls down the equivalent of 42 printed web pages. Totally useless.

Sure, they might stumble upon a bit of important information in a paragraph here and there, but I keep my posts topic specific, so scrolling through miles of writing to find the point you want and need to help you is not only frustrating but time consuming.

A good search page should be designed to only show excerpts. Hey, if search engines can offer you titles and extremely short excerpts to help you find what you are looking for, then why can’t WordPress Themes?

Again, look to the WordPress Codex for Creating a Search Page with step-by-step instructions on designing a search page to display the right look: show excerpts not full posts.

While I’m Berating, I’m Also Wishing

Okay, so hopefully I’ve done a little slapping upside the head of WordPress Theme designers and developers. These are just simple things that need to be done but are often forgotten in the thrill of creativity. I hope my slap on the head brought back some common sense so we simple bloggers can do what we do without stress or strain from our Themes.

And while I’m berating you all, I’m also wishing for a few things.

  • Contact Page/Form: While some people want to blog anonymously, many don’t. Please include a contact Page and form for people to use if they want contact directly from their visitors. If they don’t, then allow them to delete the Page and life will go on. By including a form, it is so much easier since WordPress.com users can’t include javascripts and other styles to easily create such forms. The email address can also be hidden from harvesters.
  • Site Map: A site map is very helpful for those who blog a lot, especially those who blog a lot about a variety of subjects, who need a good site map to help navigate the site. In my page, I list information about NArchives and a few other site map making plugins. These still need work and development to bring them up-to-date, but help us out with some kind of plugin that lists blog posts by category at least. Listing them by date is near to useless information as users want information not chronological order.
  • Page Links in the Footer: I know that the footer in WordPress.com Themes are designed to promote the Theme designer and WordPress.com, but why not add a simple row of Page links for About, Contact, Site Map, and such to add a little more navigation to the footer. Or even add another search form down there. I often find that I’ve scrolled to the bottom of search results or the front page and still not found what I’m looking for. So I have to scroll back up to the top of the screen to get back to the search form. Give me a second search form on long generated pages.
  • List Link Manager/Blogroll by Titles: While the Regulus WordPress Theme does separate links in the blogroll (Link Manager) by category title, many don’t, turning your link list into a long line. Help us out by adding the ability to list titles in our Theme’s blogroll.
  • Style Everything: I’ve made a list of the most common tags that need to be styled, but make sure everything is styled. One of the cool things with the Regulus WordPress Theme is that you can control the color scheme. I choose Calm Blue, in keeping with the blue look I started out with using the Pool Theme. Everything was great until I got to the Feed links which are in neon orange. Look at the bottom of the sidebar. It’s ugly. Why everything else changed to Calm Blue but these are horridly still orange, who knows. Maybe to resemble feed RSS buttons, I don’t know, but it doesn’t blend in with the overall lovely look of the Theme. Fix it!

I’m sure other people have some berating and wishing to offer WordPress Theme designers, especially those who use WordPress.com. I’m not talking about full access to customizing Themes. I’m not talking about adding hundreds of plugins to make your blog whirl and twirl. I’m talking about common sense, practical things that make our blogs more useful without interference or action from us.

So, calling all WordPress.com users. What have you discovered missing or inaction on your WordPress.com Theme that “should” be there? What do you want to see that should be there? What do you need to make your WordPress.com Theme better? And as for full WordPress version users, what more do you want out of your WordPress Themes that should be there?


UPDATE: Okay, it has been brought to my attention that there seems to be no good guides to help WordPress Theme designers learn how to make Themes. Well, there are such lists. The main lists are on the WordPress Codex, in the Blog Design and Layout and WordPress Lessons sections. A couple others are on my list, and Site Map with categorized listing of helpful posts.

There is a lot to learn about when designing a Theme for WordPress or any website or blog and releasing it to the public, which is why I wrote Designing Themes for Public Release for the WordPress Codex. In addition to that article, the following are the “required reading list” for people designing and developing WordPress Themes.

For designing WordPress Themes for WordPressMU and WordPress.com:

Digg Digg | Del.icio.us Del.icio.us | Blinklist BlinkList | Furl Furl
Spurl Spurl | Reddit | Add to Simpy Simpy | Add to RawSugar RawSugar


Site Search Tags: , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen

20 Comments

  1. Posted January 16, 2006 at 4:34 pm | Permalink

    Wow – could you have been more agressive? I know you warned me you’d post this but it seems a bit full on to me. There’s constructive crtisism (which is welcome) and then there’s this. What right do you have to ‘berate’ someone for something they have given away? Maybe that someone didn’t know, maybe it was an oversight, maybe it never crossed their minds – but whatever the case a simple ‘maybe you should do this’ is far better than what you have done above.

    I wrote out a long explanation of why I did what I did, but frankly I couldn’t care less about your opinion, so I deleted it.

    I made Regulus for free. I ask nothing in return, if you don’t like it, don’t use it!

  2. Posted January 16, 2006 at 4:50 pm | Permalink

    I never said I didn’t like it. In fact, I said many wonderful things about your brilliant WordPress Theme. It is an amazing accomplishment. Total brilliance. My only “berate”, points, which applies to a lot of themes as mentioned, is the lack of attention to the tiny details.

    I’ve spent more than a year intensely testing, developing, reviewing, and helping WordPress Themes work for hundreds and hundreds of WordPress users, designers, and developers. I’ve written many, many articles taking people through the step-by-step process of making themes and fixing themes. I speak from authority. Others have also written indepth instructions on WordPress Theme development, and we all point out that EVERY detail needs to be styled so the user has to do as little as possible to a Theme. The message was not getting out, so it was time for a little more aggressive approach. We, Theme users and support volunteers who spend a lot of time helping people fix problems Theme designers overlook, hope Theme designers are listening now.

    I started out the article with the scream and satire representative of the voice of WordPress.com and WordPressMU users who are stuck with the themes in the list. They can’t fix, tweak, or adjust anything. They are the ones suffering when they put in a bold tag or italic tag and nothing happens because the Theme designer didn’t put in these most commonly used tags.

    For them, I wrote this, as well as for me.

    As for caring about my opinion, since I represent a huge part of your audience, you should care. You should care very much. I cared enough to let you know, and to help you make your brilliant Theme even better. If we all care, then we will move forward to improve and make Themes better for everyone.

    Again, if you are offended, then you have missed the nice things I have said about your theme and the honor I pay by using it on this blog, and the honor paid by inclusion on WordPress.com. It is amazing and will be credited as the “parent” of future user customizable Themes. I look forward to seeing even more customization and greater versatility in this Theme and others in the future. Thank you for all your hard work.

    Now, please, update this Theme so we can use bold, italic, code, horizontal lines, etc, the few tags we can use in WordPress.com. That will make all of us who use your lovely theme so much happier. This applies to all Theme developers, especially those who design Themes for WordPress.com.

  3. Posted January 16, 2006 at 5:37 pm | Permalink

    Woooo Lorrelle! Do I sense frustration here? lol
    If I may offer a view from a relative Newb. A lot of what you are talking about I simply did not know existed! It’s a case of I didn’t know what I had been missing :-) Yep – it may be in the Codex (somewhere….) But I still find that can be difficult to access efficiently. We DO need people to point out the potential issues, BUT I wonder (as you suggest) whether we need a more mainstream ‘voice’ – such as the codex itself -to recommend standards for theme design. Perhaps – even to prescribe acceptable standards?
    I know this will sound weird, but I find there is TOO much ‘information’ out there! It is difficult to separate the wheat from the chaff sometimes!
    Lets face it – what we need is a book on wordpress and theme standards and design. Or at least a more structured introduction than the incredibly comprehensive and wide ranging Codex.
    I’ve set myself the task of reading everything you’ve written or linked to under wordpress resources – BUT Do you have any idea how long that’s gonna take ROFL?
    Any-way I too use regulus at WordPress.com – for my ‘money’ it is one of the best themes on offer here.
    No doubt theme designers WILL find your article thought provoking – which I assume is the aim!
    Thanks!

  4. Posted January 16, 2006 at 7:01 pm | Permalink

    Wetscalpel:

    Okay, I updated the article to include a list of the most important documents that MUST be read before undertaking a WordPress Theme for release to the public. Thanks for the hint.

    Now, no more excuses for WordPress Theme designers. We, your fans, adore you and worship the ground you code over, but make us worship the ground you float over by finishing off the finishing touches on your Themes, especially if you will be releasing it to the public and to WordPressMU sites.

    As for a book, the WordPress Codex is that book. We’ve been waiting for a year to get the look of the Codex changed and that has finally happened, so now the real fixing can begin. Stay tuned.

  5. Posted January 16, 2006 at 8:31 pm | Permalink

    Excellent – Thanks Lorelle :-)

    And BEN –
    Please take offence at what Lorelle has written. :D It IS constructive criticism and not ONLY directed at you! In fact it applies MORE to other designers. These are all works in evolution I believe – sometime it helps to get a fresh viewpoint.
    Please – be assured your theme is FANTASTIC – BUT like ALL things it could probably be even better. One of the strengths of the open source community IMHO is that everyone chips in and makes suggestions. Having seen your work, I don’t believe you are the sort of person who would be satisfied with anything less than perfection. I hope you (beg you to?) continue to contribute.

  6. Posted January 16, 2006 at 9:19 pm | Permalink

    Umm Ben, Make that “Please DON’T take offence…..”
    Sheesh!

  7. sminc
    Posted January 16, 2006 at 10:27 pm | Permalink

    I am not a coder, can only make subtle changes to what is already there, so I am clueless. I agree, I would like theme designers to incorporate what Lorell indicated in her blog. Not sure I would try to get Ben to make changes in quite the same way, but I hope he does nevertheless. But in the mean time, or in an effort to give Ben a hand, has anyone thought of the code changes necessary to make the changes Lorell suggested?

  8. Posted January 16, 2006 at 10:57 pm | Permalink

    Good point, sminc, but these are not complicated things I’m asking. For example, in the style sheet (style.css), in the same lines that state the styles for STRONG and EM, the right way should be:

    strong, b { font-weight:bold;}
    em, i { font-style:italic;}

    By adding the “b” and the “i” to the tags, the bold and italic are styled with the age old traditional formats and not just the tags for “strong” and “em”. Makes the design backwards compatible and works across the board.

    No special coding, programming, or brain surgery. Just filling in the missing blanks, that’s all.

  9. Posted January 17, 2006 at 1:07 am | Permalink

    I to use the regulus theme and posted my thanks for its inclusion on WordPress.com. Before we were given the current version as an option I was hopping themes bucause I did not like the compleate look of any of them. I guess that it is a sign of how flexable WordPress is that theme disigners have so much control over what is or is not included.. but it is frustrating that I have to take into account the features of a theme in addition to the looks. For now, regulus has MOST of the features I like. (I wish it would allow comments on pages)

    I am treating my blog on .com as a learning experience. I hope that when I am ready to move to hosting my own full version of WP Matt will have implimented an export function. I would like to hang on to the work I have put in so far. I am looking forward to trying to creat a theme in on my own. For now… Thank you Matt for letting me get my feet wet on WordPress.com, and Ben, thank you for regulus and all the options it gives. Most of all, thank you Lorelle for this Blog, it has given me so much information, and some great ideas.

  10. Posted January 17, 2006 at 7:43 am | Permalink

    Slnewkirk:

    I didn’t realize that the customized page.php template in this Theme didn’t allow comments! I normally turn off comments on my Pages since they don’t really need them, so I hadn’t even noticed. Good catch.

    Since we do have the option to allow comments on Pages, then why shouldn’t it be there if we turn it on from the Administration Panels?

    Anything else that should be in a Theme that I’m missing?

    Thanks for point that out!

  11. Posted February 1, 2006 at 8:53 pm | Permalink

    It would be great if you could point us to some examples of themes YOU’VE created so that we can see how it should be done! Do you have any on themes.wordpress.net we could look at?

  12. Posted March 19, 2006 at 5:39 am | Permalink

    Talking about awfully coded themes, the ones at Template Monster are coded like s***.
    I tried converting them to RTL and they absolutely do not use the h1, h2 tags and the use of DIVs is just horrible. Ugh.
    I hope the designer gets it better next time. I imagine template monster may offer some WP templates to buy in the future because they’re running a survey concerning that matter. The designs look really good, but I’m afraid some people may buy them and realize the coding and the CSS are horrible.

  13. Posted March 19, 2006 at 7:52 am | Permalink

    No heading tags? How can they function? Argh! Headings are important to SEO and Page Rank so I can’t imagine being so dull as to not include these very basic Web Design 101 elements. Very strange. And sad.

  14. Posted September 21, 2006 at 1:50 am | Permalink

    … sigh… you are so correct… all us blogers using wordpress SHOULD know this. For me.. its painfully clear… equally painfully clear is my complete lack of skills within programming and editing of anything in the computer world… Ive tried, ive raved and ranted cursed and sweared, but i just cant get the grip of it… talk to me about marketing, history, politics and such and ill run most ppl through the wall… but computer..stuff? .. no…

    Lorelle … could i ask YOUR help ? .. i too want your setup, but on a different template .. the one ( and /mindoro at the same site) on my site …. i just wouldnt know HOW to fix it… even though you’d written a 1-2-3 guide…. ive tried…
    Plz contact me….im suffering..

    -vidar-

  15. Posted September 21, 2006 at 8:52 am | Permalink

    Vidar: don’t suffer. I can’t specifically help you right now, but just dig through the various Themes and find one that is “close” to what you want and go with that and stop suffering.

    One of the big problems many people face is that they have high expectations on what they want and won’t settle for less. Well, trust me: settle. What you have to say and share with the world is more important than any Theme. And if you wait a little longer, new techniques are coming out which will allow the inexperienced user to design their own Themes as if they were drawing with crayons. Very simple and easy. Just hang on.

    Just take a look at top bloggers like Scobleizer and his site’s design. Sucks, doesn’t it. What you have to say is always more important, and his site proves it. A little pretty doesn’t hurt, though, but relax. I know you can do this.

  16. Posted November 11, 2006 at 7:02 am | Permalink

    Thank you! And may I add one, from web design 101, first day? No horizontal scrollbars at 800×600! It’s amazing how many themes are designed for 1024×768. And what is it with all these fixed width themes, and the wasted screen space, in this era of wide screen laptops?

  17. Posted March 30, 2007 at 12:54 pm | Permalink

    Add this to the wish list for theme designers:

    Link to a print.css.

    When printing a blog article, wouldn’t it be nice if only the site name, description, date, and article printed and not whole theme? Let’s all save paper and ink by providing a proper print.css.

    Currently, when I print any WordPress theme, I get a page or more of navigation. It’s easy to turn off navigation with display:none.

  18. Posted October 5, 2007 at 7:40 am | Permalink

    I just want to add that the <b> and <i> tags have been deprecated from HTML and that some theme designers do not include styling for those tags because they don’t expect anyone to be using them. In fact, if you do, you could break the validation of your own site for some doctypes.

  19. Posted October 5, 2007 at 9:52 am | Permalink

    Actually, I’ve never gotten a validation error for using those tags, but yes, they are deprecated, though it amazes me why the W3 would do such a dumb thing. Still, you are thinking “now”. I’m thinking of thousands of articles I’ve published over the past 14 years of blogging and web publishing. If I choose a Theme, I will add these tags to the stylesheet for backwards compatibility, so should WordPress Theme designers do so, just to CYA the use of such tags which have been used for many years by bloggers who have been blogging for longer than 10 minutes.

    Also, if you look close to the WordPress non-Rich Text Editor quicktag buttons, you will see that they are using B and I to designate their bold (strong) and italic (em), even though the tags generated are the new HTML tags. A little twisted thinking there, don’t you think?

  20. Al
    Posted January 17, 2009 at 2:12 pm | Permalink

    Thanks for that tiny bit of code I was looking for all day, Lorelle (nr 8.). I stumbled upon a nice theme I wanted to use. Now this theme did lack some elementary stuff you talked about in this posting. I don’t have the time to learn all that stuff, so I depend on cut and paste and tweaking a little. Works fine.


22 Trackbacks/Pingbacks

  1. [...] The first article I read was WordPress Theme Designers: Slapping You Upside the Head.” It was fascinating. I was impressed by the strong emphasis on the link between good design and usability. That’s important to me and a lot of others, I’m sure. [...]

  2. [...] WordPress Theme Designers: Slapping You Upside the Head [...]

  3. [...] WordPress Theme Designers: Slapping You Upside the Head [...]

  4. [...] Lorelle – Just in case you get to read this, I will consider myself “slapped upside the head” and will look back again at the theme I created and style it properly. It works for me at the moment though, and I don’t believe that anyone else is using it… Site Search Tags:upgrade wordpress   Mood : accomplished [...]

  5. [...] The other most popular request is for new WordPress.com Themes, and new ones are coming in all the time. It seems Theme Friday means watching each Friday for new Themes added to your Presentation panel. Remember, not all WordPress Themes are fully themed, but the developers are test driving the themes and fixing them as best as they can, though it is up to the Theme designer to fill in all the blanks. Test drive each new Theme carefully before committing yourself. And remember, you can always switch, with your moods or the seasons. [...]

  6. [...] Lorelle on WordPress » WordPress Theme Designers: Slapping You Upside the Head (tags: safari_export) [...]

  7. [...] If you are using a right-to-left language, like Hebrew and Arabic, WordPress Themes which feature bits of code such as the sidebar headings for categories with the feed link or number of posts in that category may find themselves reversed. Instead of WordPress Tips (120) (RSS), it may say (120) (RSS) WordPress Tips or some backwards version as it struggles to deal with the right-to-left issues. A properly coded WordPress Theme that takes localization into account should not have this problem, but that is dependent upon the good coding practices of the WordPress Theme author. [...]

  8. [...] An article I wrote during the past year that got a lot of attention, and criticism, was “WordPress Theme Designers: Slapping You Upside the Head”. It was a rant, but also a guide to help those who design WordPress Themes for public release, and to WordPress.com and those who choose and prepare WordPress Themes for inclusion. It was also a cry out for the victims of WordPress Theme designers, the users, who can’t edit or change what they are stuck with in a Theme just because a Theme author took shortcuts or didn’t think their design out fully. AARRRRRGGGGGHHHHHHH!!!! [...]

  9. [...] are a lot of wonderful WordPress Themes available for free, and yet many are missing some parts and pieces that you may not be aware of are missing. For example, I’m finding some WordPress Themes missing [...]

  10. […] WordPress Theme Designers: Slapping You Upside the Head […]

  11. […] WordPress Theme Designers: Slapping You Upside the Head […]

  12. […] WordPress Theme Designers: Slapping You Upside the Head […]

  13. […] WordPress Theme Designers: Slapping You Upside the Head […]

  14. […] WordPress Theme Designers: Slapping You Upside the Head […]

  15. […] WordPress Theme Designers: Slapping You Upside the Head […]

  16. […] WordPress Theme Designers: Slapping You Upside the Head […]

  17. […] them, helping WordPress Theme designers understand how helpless WordPress.com bloggers feel, and encouraging designers to fill in all the missing details on their […]

  18. […] as consistent. This leaves h3 and/or h4 heading tags for use within your post. Unfortunately, not all WordPress Themes style these headings, but test them out to see how they look, and then use […]

  19. […] WordPress Theme Designers – Slapping You Upside the Head with Design Details […]

  20. […] WordPress Theme Designers: Slapping You Upside the Head […]

  21. […] WordPress Theme Designers: Slapping You Upside the Head […]

  22. […] fabulous as they are, work behind the scenes continues to convince WordPress Theme designers to thoroughly test their WordPress Themes before releasing them to the public and WordPress.com Theme choices to maximize all web standards […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,965 other followers

%d bloggers like this: