This post is a WordPress Style Guide for v3.9. I use these privately to work on Themes all the time, but I thought others might want to use it too.

Disclaimer: Depending on when you’re viewing this, my site’s current theme may not support some of the functions I’m testing with this. If it doesn’t look right, rest assured I’m working on it!

H1 Header: The Headiest Header

I only use H1’s for the Post Title generally, but I still like to see it out of context for reference.

Paragraph text looks like this. I wonder what happens when I bold stuff. That’s interesting. Perhaps I should see what links would look like. That’s not too shabby.

---

I don’t think I’ve ever used horizontal rules in a post on this site, but I may as well make them look decent.

H2 Header: The Most Common Header I Use

I’m trying to write as little HTML as possible when I write posts in WordPress. My control freak nature means I will probably still edit in HTML mode fairly often, but I’m trying to keep it to a minimum so I can stay in touch with how non-coders use WordPress and other CMSes.

• Unordered lists are pretty common, especially on websites that are trying to sell things.
• I use them a lot because they’re easy to ‘digest’ quickly.
  • Nesting these is kind of terrible, but I still allow for it in my theming
  • Just in case I decide to write a post that’s ‘kind of terrible’.
• They also break up long blocks of text nicely when you don’t have a graphic or other media element to do that for you.

H3 Header: Because Some Posts Go Really In-Depth and Need Hierarchical Structure in their Headers

I try not to make my posts so complicated that I need to use H3s, but it happens.

1. I only use Ordered Lists if I’m explaining steps in a process or giving a particular number of reasons for something.
2. If I’m using it to list reasons, I’m probably really excited about how many justifications I can make for my viewpoint.
3. If I’m using it for a process, and it goes into sub-lists:
   1. I should probably just make a Flow Chart Image instead
   2. Because I can make this look kind of pretty
   3. But it is obviously a complex concept that could be better represented in other ways.
4. ???
5. Profit

Fun With Image Alignment

I use a plugin called Simple Lightbox for image “zooming” here. If the image is centered or has no styling, I let it take up the full width of the content area. If its justified left or right, I have it set to max-width with a percentage or pixel amount depending on the theme.

Bacon ipsum dolor sit amet ham hock jerky hamburger kielbasa. Pork chop jerky pig turducken pork belly, strip steak t-bone fatback brisket ball tip doner corned beef kielbasa short loin. Pancetta chicken tongue salami jowl tail landjaeger capicola bacon frankfurter shoulder cow. Ground round kielbasa shoulder, beef ribs short ribs spare ribs beef. Meatball doner leberkas, pork belly chuck shank pig pork chop short loin pastrami kevin. Strip steak turducken shank pork ham hock kielbasa. Meatloaf ball tip kevin biltong flank pork loin tri-tip bresaola t-bone chicken capicola fatback leberkas venison.

Ball tip jerky ham hock andouille, rump salami landjaeger pork kevin bacon sausage turducken doner meatloaf. Pastrami short ribs drumstick chicken. Strip steak spare ribs ham hock leberkas landjaeger ribeye. Salami shank tenderloin jowl meatball. Strip steak ground round beef pork loin jowl shoulder chicken turducken, tongue brisket short ribs ham hock turkey. Ball tip corned beef salami, porchetta strip steak venison shoulder kielbasa beef tri-tip drumstick bacon tail fatback pork belly.

Beef ribs ribeye meatloaf salami spare ribs drumstick tail beef. Pork belly biltong filet mignon ball tip ground round beef ribs chicken andouille capicola ham hock meatloaf hamburger flank jerky. Turducken jerky pork tri-tip swine andouille ribeye pork belly strip steak capicola. Tenderloin sirloin kevin meatloaf cow turducken tongue drumstick frankfurter sausage porchetta. Ball tip meatloaf ham tail short loin. Chicken short ribs bresaola cow, filet mignon tenderloin doner prosciutto landjaeger capicola salami shoulder beef ribs. Jowl biltong beef porchetta chicken.

Now, Without Captions

Bacon ipsum dolor sit amet ham hock jerky hamburger kielbasa. Pork chop jerky pig turducken pork belly, strip steak t-bone fatback brisket ball tip doner corned beef kielbasa short loin. Pancetta chicken tongue salami jowl tail landjaeger capicola bacon frankfurter shoulder cow. Ground round kielbasa shoulder, beef ribs short ribs spare ribs beef. Meatball doner leberkas, pork belly chuck shank pig pork chop short loin pastrami kevin. Strip steak turducken shank pork ham hock kielbasa. Meatloaf ball tip kevin biltong flank pork loin tri-tip bresaola t-bone chicken capicola fatback leberkas venison.

Ball tip jerky ham hock andouille, rump salami landjaeger pork kevin bacon sausage turducken doner meatloaf. Pastrami short ribs drumstick chicken. Strip steak spare ribs ham hock leberkas landjaeger ribeye. Salami shank tenderloin jowl meatball. Strip steak ground round beef pork loin jowl shoulder chicken turducken, tongue brisket short ribs ham hock turkey. Ball tip corned beef salami, porchetta strip steak venison shoulder kielbasa beef tri-tip drumstick bacon tail fatback pork belly.

Beef ribs ribeye meatloaf salami spare ribs drumstick tail beef. Pork belly biltong filet mignon ball tip ground round beef ribs chicken andouille capicola ham hock meatloaf hamburger flank jerky. Turducken jerky pork tri-tip swine andouille ribeye pork belly strip steak capicola. Tenderloin sirloin kevin meatloaf cow turducken tongue drumstick frankfurter sausage porchetta. Ball tip meatloaf ham tail short loin. Chicken short ribs bresaola cow, filet mignon tenderloin doner prosciutto landjaeger capicola salami shoulder beef ribs. Jowl biltong beef porchetta chicken.

Quotes

I used to code my own Quote styling into each post, which was really annoying. Luckily WordPress has improved vastly since then and I should adjust my posts to suit this progress.

This is how quotes look. I wanted to make it so I could cite a source for my quotes without going into the code tab and adding in <cite> manually.

Sadly, I’ll still have to go in and code that for now

Using the strikethrough style button will have to do for now. I will have my theme look for that tag, replace it with <cite>, and add a class to its parent <p> on page load using AJAX. I chose <del> because it’s highly unlikely I’ll ever want to use it in a quote. It’s not elegant, but it solves my usability issue.

Tables

I don’t always use tables, but when I do it’s for data. I want my tables to look when they have 3+ columns because I probably shouldn’t be using a table if I only have 2 columns worth of information. Sadly, there is no table button in the WordPress WYSIWYG editor, so we need to code them.

<thead> <th> Turducken	<thead> <th> Turducken	<thead> <th> Turducken
<thead> <td> Turducken	<thead> <td> Turducken	<thead> <td> Turducken
<tbody> <th> Turducken	<tbody> <th> Turducken	<tbody> <th> Turducken
<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken
<tbody> <td> Turducken	<tbody> <td colspan=”2″> Turducken
<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken
<tfoot> <th> Turducken	<tfoot> <th> Turducken	<tfoot> <th> Turducken
<tfoot> <td> Turducken	<tfoot> <td> Turducken	<tfoot> <td> Turducken

Now, bigger tables are going to be kind of ugly no matter what I do, so lets make sure they’re readable at least.

<thead> <th> Turducken	<thead> <th> Turducken	<thead> <th> Turducken	<thead> <th> Turducken	<thead> <th> Turducken	<thead> <th> Turducken
<thead> <td> Turducken	<thead> <td> Turducken	<thead> <td> Turducken	<thead> <td> Turducken	<thead> <td> Turducken	<thead> <td> Turducken
<tbody> <th> Turducken	<tbody> <th> Turducken	<tbody> <th> Turducken	<tbody> <th> Turducken	<tbody> <th> Turducken	<tbody> <th> Turducken
<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken
<tbody> <td> Turducken	<tbody> <td colspan=”2″> Turducken		<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken
<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken	<tbody> <td> Turducken
<tfoot> <th> Turducken	<tfoot> <th> Turducken	<tfoot> <th> Turducken	<tfoot> <th> Turducken	<tfoot> <th> Turducken	<tfoot> <th> Turducken
<tfoot> <td> Turducken	<tfoot> <td> Turducken	<tfoot> <td> Turducken	<tfoot> <td> Turducken	<tfoot> <td> Turducken	<tfoot> <td> Turducken

WordPress Style Guides Are Awesome!

Hopefully this post was useful for you, because it helps me out when I’m doing this stuff. If you have any suggestions, feel free to leave them as comments!

You can get the source code of this post here (GitHub). Just open it in a text editor, copy all of it, then paste it into the “Text” (not “Visual”) tab of a new post on your own WordPress site.