And naturally, this post will show off all of these bonus formatting options!

First of all, let’s get something straight about HTML code. You really should be editing it from within the HTML tab in the editor, otherwise you might end up getting your HTML code converted to non-code characters, and while that is all well and good most of the time, it just won’t do here. So by all means write your post in the Visual tab, but when it comes to the bonus stuff, switch to the HTML tab, as the image on the right hand side so subtly points out.

Which brings us to the first bonus formatting functionality! You might notice the border around the image. That is added by adding the class frame to the image code. This is how it looks:

<img src="http://roguetheme.com/wp-content/uploads/2009/05/htmltab.gif" alt="The HTML tab" title="The HTML tab" width="200" height="153" class="alignright size-full wp-image-31 frame" />

Notice frame at the end of the segment starting with class – those are all the classes that are applied to the image. And sure enough, the last one is called frame, and that one adds a nice looking border to the image. But you have to add it manually.

Moving on, let’s show something important that traditional italics or bold won’t convey. That red type is made by using a simple span tag with class="alert". This is how you use it:

<span class="alert">show something important</span>

Not very hard, is it? You know, you can use it for a little more subtle stuff as well, like this word and the ones next to it, which is also a span but without any class at all.

<span>this word and the ones next to it,</span>

Now let’s take a break and learn something new:

That’s a box, which is to say that it is content that sits within a div with class="box". It looks like this:

<div class="box">Lorem ipsum dolor sit amet, dui a, luctus id accumsan, dolor sit orci et non repudiandae pellentesque. Mattis nunc scelerisque praesent sapien, tincidunt wisi sit elementum enim massa quam, tellus non sit tristique, nulla mauris sed hendrerit quam ligula quisque. Diam neque, urna dictum dolor, tempus lorem accumsan amet blandit laoreet, at ornare.</div>

You know, you can make it even more fancy by adding a h5 tag to it, like so:

That is the same code, but with a h5 heading in it. For clarity’s sake, I’ll just paste that code too, although you can probably figure out what goes where by now:

<div class="box"><h5>Look at this H5 header</h5>Lorem ipsum dolor sit amet, dui a, luctus id accumsan, dolor sit orci et non repudiandae pellentesque. Mattis nunc scelerisque praesent sapien, tincidunt wisi sit elementum enim massa quam, tellus non sit tristique, nulla mauris sed hendrerit quam ligula quisque. Diam neque, urna dictum dolor, tempus lorem accumsan amet blandit laoreet, at ornare.</div>

So there you have it, the basic bonus formatting in Rogue Theme. Missing something? Give a shout in the comments and we might just add it!

Now, the Rogue Theme supports more than just these standard elements, and we’ll get to those in a later post. For now, here’s the demo.

Let’s start with the basics, like this bold text for instance. Maybe you would like to put some extra emphasis on something, and how about underlining it? No, wait, let’s scratch that – underlining isn’t pretty and can get confused with links, which incidentally looks just like that.

Those are the basics. Moving on, let’s give the next section a proper heading, shall we?

More advanced stuff (this is a H2 heading)

Now let’s quote a famous text snippet that all designers love to hate:

Lorem ipsum dolor sit amet, tortor porta eget molestie et. Ut netus augue lectus quisque turpis ut, quis dui eleifend nec quam, sed quis duis sed turpis, non wisi orci at suspendisse dictum aliquam, ut sit. Rutrum eros per diam, blandit iaculis, nullam lectus officia curabitur, donec mi sit natoque eu imperdiet.

Classic huh?

Lists (a H3 heading)

You know what, we could do a bullet list out of that to save some time.

• Lorem ipsum dolor sit amet, tortor porta eget molestie et.
• Ut netus augue lectus quisque turpis ut, quis dui eleifend nec quam, sed quis duis sed turpis, non wisi orci at suspendisse dictum aliquam, ut sit.
• Rutrum eros per diam, blandit iaculis, nullam lectus officia curabitur, donec mi sit natoque eu imperdiet.

Maybe we should have done it numbered instead?

1. Lorem ipsum dolor sit amet, tortor porta eget molestie et.
2. Ut netus augue lectus quisque turpis ut, quis dui eleifend nec quam, sed quis duis sed turpis, non wisi orci at suspendisse dictum aliquam, ut sit.
3. Rutrum eros per diam, blandit iaculis, nullam lectus officia curabitur, donec mi sit natoque eu imperdiet.

Still pretty basic stuff, so let’s move on.

About the images

This theme supports all standard image positioning classes that WordPress itself applies whenever you insert an image using the media uploader. That means that you can have it float left, right, or have it centered (with proper spacing below). It also means that image captions work just fine, as you’ll see on the right side near here.

Messing everything up with captions

Hey! Dogs!

If you include an image with a caption text, it might mess up your line height and spacing. This is some funky thing that WordPress does when you’re using the HTML part of the post editor. In fact, it doesn’t properly separate the caption stuff from the default P tag (yes, that was the code demo) that goes around every paragraph you write.

You can easily avoid these nasty things by putting a blank line between the inserted image code with the caption shortcode, and the rest of the content. Like this, which you can see in action above:

<h3>Messing everything up with captions</h3>

<img src="http://roguetheme.com/wp-content/uploads/2009/05/dog-300x226.jpg" alt="Hey! Dogs!" title="Dogs" width="300" height="226" class="size-medium wp-image-39" />

If you include an image with a caption text, it might mess up your line height and spacing. ... 

It is as easy as that.

Please show me the code in plain text (a H4 heading)

Sure, this is the code used for the image above, generated and inserted using the default image uploader.

Would you like to see anything else?

That’s the default tags, put to good use by explaining them in a hopefully more interesting fashion than that dreaded Lorem ipsum text. I hope you enjoyed it.

However, maybe we missed something? If we did, do give a shout in the comments and we’ll add it.