WordPress Widget Headings


A Basic WordPress Widget Heading Error

WordPress is mostly a SEO friendly system, yet there is one critical error that will reduce the optimisation of a WordPress blog or website: WordPress encloses Widget Titles within <h3> header markup. WordPress is not the only system theme developers make this basic error – I’ve also seen Drupal themes using h3 and worse still h2

This is one of the things I would really like to see changed in the next version of WordPress (WordPress.org) as well as WordPress.com.

The three primary heading markup tags really should only ever be used in content.

  • <h1> markup should only be used for page or post TITLES
  • <h2> should be the introduction content heading, with occasional use to separate really important sections of articles.
  • <h3> should be used to separate subsections included under <h2> markup tags…

Widget Titles in Lower Priority Heading Markup

Ideally, Widget Titles and the widget content that follows should use the lowest possible heading tag markup; preferably <h5> or <h6>

HTML DocumentFor WordPress self hosted sites (WordPress.org) we have the option to change the default header tags by modifying the theme or core files. For WordPress.com blogs this option is not available.

The only way to get round this issue is to remove all the provided widgets, and only use text widgets (without a Title). Not an ideal situation at all, as many of the widget functions are impossible to recreate using a text widget. This is also a way round the problem for self hosted WordPress sites whose owners don’t want to hack into the theme or core files (not a good idea unless one really knows what they are doing)

So what to do. The problem can be reduced somewhat by using only the really essential widgets. Looking around WordPress.com blogs I notice many of these use few widgets anyway. At the very least we can remove the default META widget. This widget is totally unnecessary, and is only a convenience. Rather bookmark the log-in page next time you go to log-in to the blog.

Other common widgets used are RSS links – a better way to include links to your RSS feeds was described in my article SEO Friendly Website Links with the added advantage of “nofollowing” the links.

Example of Widget Title using <h6> markup

<h6  style=”font-size:medium; font-weight: bold; margin-bottom: 14px;”>OTHER SITES</h6>

There is also opportunity to style the Text Header; the example uses HTML markup for font size and font weight. The font size is particularly useful, as WordPress may display h6 header text in very small letters – setting the font size this way overrides the default size. Font Size can be set as shown using medium, large, etc, or with a numerical value e.g. 16px, or 1.2em, or even a perecentage

This alternative HTML  header can be used in place of the Widget Title. Delete the title of the text widget to remove the <h3> markup.

Anyone who gives the two HTML ‘widget’ ideas from this and the previous mentioned article may discover just how useful and easy basic HTML code can be, and could be encouraged to explore this powerful web design tool a little further.

The four text widgets used for outgoing links on this blog serve as examples of the use of this header.

Remove WordPress Widget Titles:

Another step in the right direction is to remove the widget title from the widgets available in the blog Widget Admin page, wherever possible. Not always a practical solution though; as can be seen on this page, the search box and Category Widget do not display a heading, while the Latest Posts etc do.

Real On-Site Optimisation

Removing the Widget Title for Latest Posts and the others would have made the list meaningless, so I just have to put up with these inside h3 markup. At the end of the day we have to chooses between how optimised our blogs are, and how our visitors will enjoy the experience. Practical On-Site Optimisation is not all about the search engine spiders, at the end of the day it is the visitor that counts the most.

If you found this article useful, or would like more information about fixing the h3 widget headers and other technical tips for your self hosted WordPress blog, subscribe to  SME Technology, my website all about building a self hosted site using WordPress. This is a weekly e-mail newsletter with details about the latest articles published. One of my upcoming articles will deal with widget heading (Title) markup in more detail.

Position Fix

Sometimes if a Title is not used for the widget, a blank space can be left between the previous widget and the custom text widget. This can make the blog look untidy. Content in text widgets can also be indented to the right, instead of being vertically aligned with other widgets.

There is however an easy fix for this – Read CSS Fix for Text Widget Without Title

Empty Tags

As pointed out by bitkahuna – see comment below, some themes may still insert the empty h3 tags – check your page source code to check if yours does this.

me on google plus+Mike Otgaar

Advertisements

About Mike

Web Developer and Techno-geek Saltwater fishing nut Blogger

Posted on January 2, 2012, in HTML, TECH NOTES, WordPress and tagged , , , , , , , , , , , . Bookmark the permalink. 7 Comments.

  1. nice article, but some tech flaws. widgets with no title specified STILL get the tag in there, just with no content between and .

    • The { h3 } tag getting ‘left in but blank’ depends on the theme – the theme used on this site only has the { h6 } tags used, but I have seen the blank tags mentioned with some WordPress (and Drupal) themes I’ve tried.

      You were absolutely correct about the { strong }tag being UGLY – this is of course inappropriate in this use and incorrect – as you say the correct format is div or p style=”font-weight: bold;” or style=”font-weight: 600;”

      In my defence I can only plead I must have been tired when I wrote the original – so thinks for the heads up on that

  2. Hi, I just replied/left a comment but it didn’t show up, & I didn’t see a “Your comment is awaiting moderation” message either. Refreshed page twice, still nothing. Maybe my reply was too long? Not sure if I should repost it or not… but here goes & sorry if this is a duplicate:

    ~~~

    Hi again & thank you for this revelation:  “Some themes are more forgiving than others and if the class is empty, the space is reduced or not displayed.”   Now THAT would make perfect sense, if only all theme builders would apply it to their creations.  :-/

    As for trying other themes, ugh, I’ve tested dozens & dozens of them over the past year+, & I’ve yet to find the “perfect” theme for any of my blogs — they ALL have major frustrating “flaws,” such as:
    –invisible light grey text for posts (& worse in footers, so that if you use a dark background, pre-formatted/unchangeable widget text won’t show up)
    –teeny tiny font sizes
    –less desirable/readable fonts, period (Verdana is king for readability)
    –post headlines/titles are not bolded
    –cramming tags/categories at the top of the post
    –no footer widgets, a huge flaw imo
    –blog header titles are too small
    –header pic too small
    –black menu bars (Mystique has the best looking menu bar, imo, silver-white, & I almost used Mystique but couldn’t stand those thick bars above each widget, though it looks ok on your techie site).
    –just plain ugly with freaky non-changeable colors, ribbons, etc. (like Mystique’s YELLOW tagline, makes no sense!)
    –many themes now “force” mobile versions on you with no way (no option on site nor in Settings) to escape it & access the full site (even blogger has an easy way to escape ALL their miserable mobile versions, ie, at the end of their URLs it says m=1 for mobile, but if you make it m=0, you can always escape the mobile version & access the full site).  It’s a myth that users prefer mobile sites.  I access the internet 99.99% of the time via iphone & I’ll take full sites ANYDAY over mobile sites, ESPECIALLY my own blogs.  Hence, the hefty numbers of WP themes that “force mobile” must be rejected outright (& they keep making new ones with this “responsive flaw,” unfortunately).
    –Etc.

    And yes, thanks, I know a person can upgrade in numerous ways, but not financially feasible when you have several blogs (upgrade fees are annual, not a one-time upgrade fee).  So I’ll keep plugging away with the freebie versions for now.

    Now, for the other suggestion:  Sounds like a neat trick to look at the site code via a desktop browser (IE for Mac used to have “View Source Code” & Safari might have it as well, can’t remember if it does or not because I only use the iphone these days & it does not have “View Source” of course).

    Either way, I have used h1-2-3-4 code for a widget title — but a title typed within the text widget, so I could change the color of it, & that worked.  But I have not tried wording it the way you did above.  I did not type “class” & I did not use the words “textwidget” either.

    I could do 6 test widgets, try them all, lol, h1-2-3-4-5-6, & see what happens.

    Also, what if we tried typing “display none” or “none” or “leave blank” etc. in the widget code you provided (in place of where you wrote Project Honeypot):

    h 4 c l a s s widget – title Project Honeypot / h 4

    Lastly, the theme I’m using for Nwo Quotes is Skeptical (only 3 “style flaws” in this theme compared to others.  🙂  
    –The black box on left side of posts for date, etc., ugh; 
    –tiny site title & practically invisible tagline; 
    –& due to my choosing a dark background color, the font color in footer/sidebar for pre-formatted widgets (such as “Recent Posts,” “Recent Comments,” Twitter & RSS widgets, etc.) is practically invisible (ditto for Triton Lite theme which has the same problem).

    The blog is only on private because it isn’t finished yet (still working on sidebar & footer widgets & About pages aren’t done yet, etc.)  But you are certainly welcome to have a look at it.  I’ll go ahead & put it on public mode, that’s the easiest thing to do & I thank you for your tips & kind offer to take a look!

    Thanks again! 

    • RE – “not showing “in moderation”

      It got routed into the spam folder – maybe because of the length so that’s probably why you didn’t get a pending moderation response, and also why I didn’t see a pending notice in dashboard or receive an e-mail notice.

      Spacing was OK.

      I’ll publish the info I sent you by e-mail over the weekend and link from the article directly

  3. Any way to lessen or totally remove the gaping space that is left when the text-widget-title is not used (for a wp.COM blog)?

    Using a formatted text widget (no title) below a photo/image-widget, & need the text closer to the photo. The big gap left by not using text-widget-title looks awful.

    (Already tried combining image & text in same text-widget but it forces the photo smaller using that method. If I let image stand alone in its own image-widget, image remains bigger. Hence the desire to close the gap between the two widgets… though not holding my breath for a solution due to known lack of flexibility at wp.COM blogs.)

    Thank you!

    • @NWO QUOTES
      The widget title header uses a CSS class defined in the theme stylesheet. Without editing the theme you are limited to theme functions. Some themes are more forgiving than others and if the class is empty, the space is reduced or not displayed.

      One way around your problem may be with the Custom Design upgrade.

      Another option is to try alternative themes until you find one that works better.

      If you still want to use a title with lower level markup, this method described below may work (I used this for the “Project Honeypot” header on this blog – the class creates the header background style):

      Add the title class to the text widget, with a lower level heading markup. Note – themes don’t all use the same classes for the widget title, so copying the class from here may not work.

      h4 class="widget-title">Project Honeypot</h4

      To find the class, select a section of the blog page that includes the normal text widget title. (the selection should include some text from the previous widget and some after the header or it may not include the class id) right click and choose “View Selection Source” (FIREFOX browser) The title class will be found after the WIDGET CLASS (similar to this)
      li id=”text-13″ class=”widget widget_text”> div class=”textwidget” h4 class=”widget-title”>Project Honeypot</h4

      If you need any help identifying the class – let me have temporary access to view the blog – admin access not needed for this, or just let me know the theme you are using so I can find the correct class

  1. Pingback: Most Desired Features in WordPress 4 « Articles « SME Technology

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: