Images
OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the WordPress image upload dialog box, this creates a caption shortcode which then in turn wraps the whole thing in a div with inline styling! Maybe one day they’ll be able to use the figure and figcaption elements for all this. Additionally, images can be wrapped in links which, if you’re using anything other than color or text-decoration to style your links can be problematic.
This is an optional caption
The next issue we face is image alignment, users get the option of None, Left, Right & Center. On top of this, they also get the options of Thumbnail, Medium, Large & Fullsize. You’ll probably want to add floats to style the image position so important to remember to clear these to stop images popping below the bottom of your articles.
Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
Tables
| Table Head Column One | Table Head Column Two | Table Head Column Three |
|---|---|---|
| Table Footer Column One | Table Footer Column Two | Table Footer Column Three |
| Table Row Column One | Short Text | Testing a table cell with a longer amount of text to see what happens, you’re not using tables for site layouts are you? |
| Table Row Column One | Table Row Column Two | Table Row Column Three |
| Table Row Column One | Table Row Column Two | Table Row Column Three |
| Table Row Column One | Table Row Column Two | Table Row Column Three |
| Table Row Column One | Table Row Column Two | Table Row Column Three |
Lists
- Ordered list item one.
- Ordered list item two.
- Ordered list item two point one.
- Ordered list item two point two. This is a longer one that might wrap on mobile.
- Ordered list item three.
- Ordered list item four.
- Unordered list item one.
- Unordered list item two.
- Unordered list item three.
- Unordered list item one.
- Unordered list item two.
- Unordered list item three.
- Unordered list item four.
- Unordered list item four.
Blockquotes
Currently WordPress blockquotes are just wrapped in blockquote tags and have no clear way for the user to define a source. Maybe one day they’ll be more semantic (and easier to style) . Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
Headings
Level One Heading
Level Two Heading
Level Three Heading
Level Four Heading
Level Five Heading
Level Six Heading
Inline Elements
This is a standard paragraph created using the WordPress text editor. It has a strong tag, an em tag and a strikethrough which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include citations, abbr, bits of code and variables, inline quotations
, inserted text, text that is no longer accurate or something so important you might want to mark it. We can also style subscript and superscript characters like C02, here is our 2nd example. If they are feeling non-semantic they might even use bold, italic, big or small elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives a nice excuse to test a link. It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.
Text Alignments
Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
This is a justified paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
Finally, you also have the option of an indented paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
Columns
2 Columns
Now create up to 6 columns using the new col system. Just create a <div class="cols2"> as a container then insert 2 sets of <section> tags.
If you want 3-6 columns just alter the wrapping div’s class accordingly "cols3" = 3 columns etc. Just be sure to have the right amount of <section> tags to contain each column
2 Columns
So the code for these 2 columns looks something like this:
<div class="cols2">
<section>1st Column Content</section>
<section>2nd Column Content</section>
</div>
3/4 Column
Furthermore, if you’d like to have unbalanced columns similar to the colspan attribute of the <table> tag, you can do so by adding class="merge2" (or merge3/4/5) to any <section> tag. This example is a <div class="cols4"> with 2 <section> (columns) within it. However the first looks like this: <section class="merge3"> to create one 3x merged column.
These 2 columns look something like this:
<div class="cols4">
<section class="merge3"> First 3x width column </section>
<section> Second Column </section>
</div>
1/4 Column
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sollicitudin dapibus velit. Praesent eget dui. Duis non elit et massa ultrices vehicula. Aliquam fermentum ipsum auctor enim.