• The headline area under the header on the blog’s front page.
• The right hand sidebar (automatically filled with some default stuff).

Either one of them can be populated by whatever widget you want to use. This means that you could, for instance, use the Roguelines plugin to fill the headline area on the top of the front page, as well as have it in the sidebar. You could use the built-in widgets that comes with WordPress, or install plugins on your own to create whatever type of setup you like.

You don’t need to type anything other than the title for the page, but if you do, the content will end up above all the archives listings. Check it out for yourself!

Naturally, you want your own banner there, and it is as easy as 1-2-3 to get it rolling.

First, find the appropriate banner code from your ad network, be it Google Adsense or something else. It might even be a linked image hosted by yourself, what do we know? The important thing is that the banner spot is 468×60 pixels.

Second, open your favorite text editor and paste the banner code in a new text file. Save it as roguebanner.txt.

Third, upload the text file, being roguebanner.txt, to your wp-content folder using your FTP program of choice. The text file should be found in /wp-content/roguebanner.txt.

That’s it! Now the contents of roguebanner.txt will load in the banner spot, and that is hopefully your banner code.

As easy as 1-2-3, right?

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.