The Kitchen Sink is your friend

Today I’m going to talk about the Kitchen Sink.  No, this isn’t a post about plumbing (thankfully — I hate plumbing).  This is about the Kitchen Sink in WordPress.  I can see your double-take already.

Kitchen Sink, you say? Surely you jest

Nope, it’s legit, and it’s not my wording, either (I wish it was, because, after you know what it refers to, it’s brilliant).

The Kitchen Sink is a second row of  buttons from the Post/Page Editor in WordPress that adds additional formatting and style functions that you may not use everyday (but once you know they’re there, maybe you will!) or perform specific and unique tasks that the normal bar doesn’t.  I’m going to take a minute to go through each one, and by the end of this, if you were previously unaware of the Kitchen Sink you will be thanking me profusely.  Trust me.

So here’s the standard WordPress toolbar that you see when you’re writing a post.  You may have some other stuff in there, for example, if you use the cforms Contact Form, there will be a cforms button at the end.  The last button on the right (assuming you don’t have some other plugin that adds buttons to your standard toolbar) is the Show/Hide Kitchen Sink button.  It’s the one that kind of looks like a color palette.  What it’s actually trying to represent is the actual toolbar with all the different buttons and the 2 row toolbar with the Kitchen Sink turned on.  Click that button and you get this:

Ta-daa! It’s so-named because this turns on “everything but the kitchen sink.”  (Actually, that’s a tad misleading.  WordPress uses a modified version of the TinyMCE WYSIWYG — that’s What-You-See-Is-What-You-Get — editor, and TinyMCE has a lot more options than those two rows offer.  If you wanted to enable all of them, you may be interested in the Advanced TinyMCE Editor which adds more buttons than the Kitchen Sink does.)

Everything but the kitchen sink…

So what does all this stuff do?

Style
Starting at the left, the first button is really a drop-down menu which allows for different types of content.  Each one specifically references a particular HTML tag — not that you necessarily need to know that, but if you do know some HTML, it helps keep things in perspective. Paragraph is normal type like what this is right now (in HTML written like <p>some text goes here</p>).

Address is something that, in all my years designing, I’ve never, ever used.  Presumably it’s in italics and, um, used for addresses.  Seriously, if you have a clue when/why I would use <address>, please let me know…

Preformatted is good when you want to paste some code into your post, or, otherwise, want to use something without any kind of styling or formatting.  Preformatted uses a generic, monospace font, and does not wrap at the end of lines, so if it’s a really long block of code, you may want to insert some line breaks (<br /> for the code monkeys) so you don’t have type going off the page.

The next several items are the different types of headings.  These refer to H1, H2, H3, etc, in HTML.  Anyone who’s done research about SEO knows that you should always have at least one H1 on your page, but more than that may hurt rather than help things.  Also, your theme probably has specific styles for at least H1-H3 (and maybe beyond), and in general, Heading 1 is probably going to be too large to be useful.  The others, however, are very useful.  For instance, post titles are often H2’s or H3’s, so if you wanted headings in your post that were consistent with the look of the site, you could use those.

Underline
This button underlines your text.  Since most people use bold or italic to emphasize things on web pages, and since underlines often imply links, you don’t see much underlining on the web, so this button gets relegated to the Kitchen Sink.

Justify
This button justifies text.

I imagine this might be useful if you had a large block of text in a quote or that was otherwise offset from the rest of the content.  This particular block of text is justified and contained within a quote (the ” button).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque nisi, imperdiet nec cursus ut, feugiat volutpat est. Praesent eleifend, orci consequat iaculis sollicitudin, dolor mauris placerat lacus, et congue turpis odio at neque. Mauris nec blandit lacus. Suspendisse cursus augue id enim suscipit scelerisque. Proin at imperdiet nulla. Vestibulum congue auctor eros, vitae lobortis mi auctor fermentum. Etiam varius aliquam bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at libero erat. Praesent sed sapien neque, at molestie orci. In dolor tortor, tincidunt at elementum quis, tristique et metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec ligula mauris, hendrerit a vestibulum a, suscipit ac nunc. Maecenas placerat gravida purus, at placerat augue iaculis sit amet.

(note: this is going to be hard to really see on our site since we justify all our text anyway…)

Font Color
The next button is another dropdown menu which expands to let you choose font colors.  This is helpful if you want to highlight particular bits of text, or otherwise spend hours making your posts resemble a circus tent.  There’s also the More Colors buttons which gives you even more choices for color.

Paste from…
The next two buttons are quite possibly the most handy.  A lot of people compose their posts in Microsoft Word or some other word processing program and paste it into their blog.  Or, possibly even just Notepad or some other plain text editor.  In either case, you get weird things happening if you just copy and paste with spacing and line breaks, and, sometimes, entire blocks of text will disappear or be formatted in a completely bizarre and totally un-correctable ways (without flipping to the HTML view and knowing how to chop the code up and what code to chop up).  These buttons are the solution and if you learn nothing else from this post, at least use the Kitchen Sink for these.

The reason why the code gets all weird (especially from Word) is because other applications add their own “markup” or code to their documents which control things like font, text size, color, line spacing, etc.  When you copy text from Word, you also copy the hidden markup, so when you paste, you paste it with those properties.  TinyMCE, as well as most WYSIWYG editors, also adds its’ own markup, although my experience has been that it’s kept fairly minimal in TinyMCE/WordPress.  However, when the two things combine they can often cause unwanted and undesirable effects.  That’s where these buttons come in.  The one with the clipboard and the T on top is for pasting text that was composed in Microsoft Notepad or another plain text editor.  The one with the W on top is for pasting from Word.  Pasting into the window that these guys bring up rips out all the useless markup that you don’t care about, but keeps the stuff that you do (like bullets and lists, bold, italics, and underlines, and indents or blockquotes).  Thus giving you a safe place to paste your copy without fear of making something (or everything) go horribly awry.

Remove Formatting
I’ll be honest, I’ve never used this one.  However, after hovering over it to find out what it does (“Remove formatting”), I might start.  This button pulls out any weird formatting stuff that you may get because either TinyMCE didn’t close its’ tags when it should have or you accidentally pasted from Word instead of using the “Paste from Word” button.  If you’ve ever had some weird formatting thing you set linger past where you wanted it to go and couldn’t get rid of it, you’ll know how useful this button could be.

Insert Embedded Media
This button lets you embed objects; so like Flash/Shockwave stuff, or Quicktime/Windows Media/Real Media videos.  Not the sort of thing that you’d copy the embed code from YouTube and paste it into your post, rather, the sort of thing where, if you knew were someone’s Quicktime .mov file was (or you had your own) and you wanted to share, you could paste the URL to the movie into this box and easily embed it without having to deal with messy embed codes that may or may not work (if you’ve ever tried to embed stuff on your own, especially in WordPress, you know what I’m talking about).

Insert Custom Character
If you saw my post last week about bullet points and wondered how I got the • and » it was from this handy tool.  Most fonts have special characters above and beyond the alphanumeric characters you see on the keyboard.  In word processing applications you can get to these by memorizing any number of crazy keyboard combinations like CTRL + SHIFT + 1 + or you can use (on Windows) the Character Map application, usually buried somewhere in Accessories or Accessibility (and I know there’s a Mac equivalent, I just don’t know what).  On the web we use crazy alphanumeric codes for those characters.  something like &copy; is easy to remember for a © but if there was ever an occasion that I’d want to use, say ◊, I’d have to know that that is called a “lozenge” and can be called by &loz;.  Oh, and I’d need to flip to HTML view to do it anyway.  This tool gives you a handy little window that you can see all the different characters you have at your disposal.

Indent
This button will indent a block of text, what we in the web design biz call a <blockquote>.  To end your indented text/blockquote, you just need to click the one on the left with the ← arrow.

This is some indented text.

I like indents so much, I’ll use them some more.

Look, I’m like e.e. cummings!

Okay, maybe I’m not.

Undo/Redo
So everyone knows that you can use CTRL+Z to undo something in WordPress, right?  What, you don’t?  Well this button is here for you.  Personally, I always prefer keyboard shortcuts to buttons, but not everyone knows that CTRL+Z = undo, CTRL+Y = redo, CTRL+C = copy, CTRL+X = cut, CTRL+V = paste, etc, etc.  But then again, I just told you, so now you do.

Help
In case this post isn’t informative enough, you can click on the Help button.  It doesn’t specifically get into each button, but it does have a whole lot of other information about how to use the “rich text editor” and what some of the hotkeys are.

So there you go.  Now that you know what everything does, you can start to use WordPress in a whole new way, right?

You’re welcome.