Journal post example

News

Officia laboris excepteur aliquip minim sint excepteur eu dolore eu cupidatat. Ut auctor lectus non diam consequat, quis blandit lacus pellentesque. Nullam ornare tristique bibendum. Vivamus bibendum pellentesque ultrices.

OK, so accrementition 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 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 the 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.

Your Alt Title

Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here. Your Alt Title
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.

And then… Finally, users can insert a WordPress gallery, which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn’t actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we’ll work with that for our example with an added fouth image to test verticle spacing.

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.

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

Ordered list item one.
Ordered list item two.
Ordered list item three.
Ordered list item four.
By the way, WordPress does not let you create nested lists through the visual editor.

Unordered list item one.
Unordered list item two.
Unordered list item three.
Unordered list item four.
By the way, WordPress does not let you create nested lists through the visual editor.

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) like the version below.

HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quote.

Oli Studholme, HTML5doctor.com

Level One Heading

Level Two Heading

Level Three Heading

Level Four Heading

Level Five Heading

Level Six Heading

This is a standard paragraph created using the WordPress TinyMCE 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 C0₂, here is our 2^nd 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.

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.

And last, and by no means least, users can also apply the Address tag to text like this:

123 Example Street,
Testville,
West Madeupsburg,
CSSland,
1234

…so there you have it, all our text elements

Exercitation sint exercitation officia minim veniam tempor tempor quis dolor qui proident elit consequat. Nostrud consequat aliquip pariatur in eu exercitation. Reprehenderit commodo quis irure aliquip eu esse nostrud duis anim mollit sint laboris.

Reprehenderit magna consectetur reprehenderit voluptate. Laboris sint nulla laborum occaecat aute eiusmod reprehenderit tempor. Minim duis aliquip irure incididunt duis. Excepteur ad ex ea in consectetur sint sit adipisicing sunt dolor magna officia. Irure dolore aute ad adipisicing aute laborum sunt quis cupidatat. Cillum do culpa ut veniam nostrud nulla incididunt sit dolor mollit qui consequat mollit eu.

Enim officia dolore ipsum ullamco. Do enim enim incididunt ex sunt tempor non laboris adipisicing nostrud. Enim in ullamco laborum culpa minim labore eu magna nisi. Reprehenderit consectetur irure officia minim esse occaecat aliqua nulla exercitation nisi reprehenderit mollit fugiat consectetur. Laboris irure cillum est ipsum tempor aliquip dolor officia ea pariatur aute cillum excepteur ut.

Excepteur consequat labore adipisicing ex exercitation tempor reprehenderit nulla ea aute sit. Nostrud consectetur eiusmod consectetur non excepteur consectetur officia ipsum qui eiusmod mollit eu anim dolor. Tempor esse ex sit cillum excepteur qui adipisicing elit occaecat dolore nostrud ex. Enim duis reprehenderit irure fugiat consequat. Consectetur do aute fugiat amet pariatur proident ut enim nisi elit occaecat sit minim. Ipsum magna tempor sint velit do ad voluptate esse et do. Aliquip elit ea dolore voluptate.

Nulla fugiat mollit consectetur enim ea ex laborum. Duis voluptate sit velit elit mollit velit sunt in cupidatat anim velit commodo anim. Ex qui mollit Lorem nulla excepteur sunt do velit. Minim exercitation ex aliqua non et consectetur ullamco ut laborum adipisicing enim eiusmod Lorem minim. Esse nostrud est magna irure reprehenderit nulla cupidatat dolor.

Voluptate ut eiusmod proident nulla minim pariatur eiusmod cupidatat dolore anim anim adipisicing. Occaecat nulla anim magna esse. Ipsum tempor laborum ullamco aliqua nisi minim. Ipsum occaecat commodo reprehenderit exercitation do magna consectetur ut occaecat. Ullamco adipisicing minim quis excepteur officia velit Lorem proident commodo ea magna laboris id. Consectetur officia laborum sunt nulla labore fugiat. Lorem et deserunt reprehenderit exercitation id.

Enim ullamco laborum nisi officia dolore amet aute minim amet. Exercitation voluptate nisi adipisicing nostrud ea. Quis incididunt quis ipsum cillum dolore nostrud. Reprehenderit elit dolore nulla exercitation nostrud laboris. Aute ex aliquip minim sint irure irure consequat officia ullamco. Cupidatat eu labore nisi et ut qui.

Re et dolore magna a dolor sit amet, consectetur adipisicing elit, sed do sed do eiu smod uaerat voluptatem.

Vivian Connolly, CEO, Executive Producer