Desperately Seeking WordPress

WordPress is a very user-friendly back-end to your blogs.  The stuff that you enter – your text, images, videos, comments, go into WordPress’s engines and they do their “thing” to publish it all classy-like.  There are THREE areas of your blog that skip the WordPress engines.  They take your text and publish it directly to the WEB.  These are:

• text widgets

• HTML editor

• theme Editor

So, if you use those three areas of your blog, you need to know a thing or two about HTML.  Remember – whatever you put in those areas will go directly to the web – it will not get filtered and published by your friendly WordPress engine.   Now, unless you know HTML, you really should NOT be using the html editor in the add-new post screen.  And unless you know css AND html, you should not be tweaking your theme through the theme editor.

The text widgets are something that all of us use to one extent or another to put stuff in our sidebars.  We use it for our RSS / feed subscribe buttons, for our twitter buttons, and for any other image or text that we want to put in there.  Unfortunately, those text widgets will break your blog.  Let’s go through the <p> tag to use it properly, and prevent a mishap with an unruly sidebar.

Lesson #1: the <p> tag

If you’ve used a word processor, you know that if you press <enter> key on your keyboard, you get what is called a “hard return”.  This creates the space between paragraphs.  If you press the <shift> and <enter> keys, you get a soft return (on a mac, I believe it is <ctrl> and <enter>).  It just moves the curser to the next line without an extra line.

The <p> tag stands for “paragraph” and is used in HTML to create a hard return. If your theme is styled correctly, it will create a space between your paragraphs.  To USE html tags, you need to know one thing: What you start, you must finish, without exception.  This is especially true if your theme is written in xhtml.  If you open a paragraph with <p> then you must close it with a </p>.

Note: If you are typing away and press “enter” and get a new paragraph on your screen – that is a word processor type of function.  HTML is NOT a word processor.  If you want a new paragraph, you have to wrap your text in <p> </p> tags.

For example:

<P> This is my short paragraph. I am using some shortcuts to show you how to write a paragraph.  For some editors, I really should code the punctuation instead of typing it like I am now. </p>

If I did not use the closing </p> tag, then the internet would assume that everything for the rest of that page was in the same paragraph.  So if you forget to close your sidebar <p> tags, then your sidebar MAY swing to an unexpected position.  If you want to be sure that you don’t get weird sections all over your page, be sure to close the html tags that you use.

I’ve also seen some people use <p> like a page break or section break.  This is the WRONG use for it.  When some web browsers are reading this type of html it will read it wrong, and your page could be read or displayed with weird sections.

This post is part of a series on Desperately Seeking WordPress called, “Save the Sidebar!”  Click here to go to the beginning of the series:

We’ll cover how to create section breaks and page breaks in our next tutorial:  Sidebar Fix #2: the <br> tag.

Q:  Why is my sidebar swinging below my content?

A:  9 times out of 10, it is the same reason: there is an unclosed division within an html/text widget.  Hang in there with me, I intend to explain this in English, I promise.

The Problem:

Your browser thinks that your sidebar belongs with the main content area.  If you look closely, you’ll notice that the sidebar is NOT under the left hand sidebar (if you have one) or under the footer, or any other area.  The sidebar is under the main content area.  It thinks it belongs there.

The Cause:

One possible cause is that in the process of editing your sidebar content, you put an instruction in there that you didn’t really mean to.

The Fix: Save the Sidebar!

Over the next week, I’m going to go through the causes of this problem, in layman’s terms.  The concepts apply across the board for all websites written with html and stylesheets.  However, the particulars of fixing it, will be specific to WordPress’s administration panels and user-friendly buttons.

Important Note: If this doesn’t apply to you yet awesome!  Bookmark these tutorials and go on your bloggy way.    However, this happens to all of us at one time or another (unless you don’t edit your sidebars ever).