When you’re designing or developing a WordPress theme it’s important to provide the proper CSS styles for the various elements that the TinyMCE editor can output. Use this sample WordPress content to quickly test out the way headings, lists, paragraphs, blockquotes, images page or post to test out the typographic styles of a theme.
<a href="https://www.kevinleary.net"><img class="size-full alignright" src="https://wsrv.nl/?url=www.kevinleary.net/wp-content/uploads/wordpress-logo.png&w=900&q=80&output=webp&maxage=356d&dpr=2" alt="WordPress logo on white" width="275" height="275" /></a><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, <a href="#">convallis quis</a>, pellentesque a, dolor. Curabitur vitae <strong>nisi non dolor vestibulum</strong> consequat.
<blockquote>Proin vestibulum. Ut ligula. Nullam sed dolor id odio volutpat pulvinar. Integer a leo. In et eros at neque pretium sagittis. Sed sodales lorem a ipsum suscipit gravida. Ut fringilla placerat arcu. Phasellus imperdiet. Mauris ac justo et turpis pharetra vulputate.</blockquote>
<p>Let's check out how our headings look when they bump up against one another.</p>
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
<p>Now let's look at how headings are spaced when preceded or followed with lists and paragraphs.</p>
<h2>Headin 2 followed by a paragraph</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci.</p>
<h3>An Unordered List</h3>
<ul>
<li>Vestibulum in mauris semper tortor interdum ultrices.</li>
<li>Sed vel lorem et justo laoreet bibendum. Donec dictum.</li>
<li>Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.</li>
<li>Praesent volutpat eros quis enim blandit tincidunt.</li>
<li>Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.</li>
</ul>
<h4>Heading 4 followed by an ordered list</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci.</p>
<h3>Image with no alignment</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci.</p>
<a href="https://www.kevinleary.net" title="WordPress Theme Development"><img class="size-full alignnone" src="https://wsrv.nl/?url=www.kevinleary.net/wp-content/uploads/wordpress-logo.png&w=900&q=80&output=webp&maxage=356d&dpr=2" alt="WordPress logo on white" width="275" height="275" /></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci.</p>
<a href="https://www.kevinleary.net" title="WordPress Theme Development"><img class="size-full alignleft" src="https://wsrv.nl/?url=www.kevinleary.net/wp-content/uploads/wordpress-logo.png&w=900&q=80&output=webp&maxage=356d&dpr=2" alt="WordPress logo on white" width="275" height="275" /></a>Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat.
<h3>An Ordered List</h3>
<ol>
<li>Vestibulum in mauris semper tortor interdum ultrices.</li>
<li>Sed vel lorem et justo laoreet bibendum. Donec dictum.</li>
<li>Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.</li>
<li>Praesent volutpat eros quis enim blandit tincidunt.</li>
<li>Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, <a href="#">convallis quis</a>, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.</p>
<h2>Video embed example</h2>
//vimeo.com/71185761
WordPress Sample Content in Action
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.
Proin vestibulum. Ut ligula. Nullam sed dolor id odio volutpat pulvinar. Integer a leo. In et eros at neque pretium sagittis. Sed sodales lorem a ipsum suscipit gravida. Ut fringilla placerat arcu. Phasellus imperdiet. Mauris ac justo et turpis pharetra vulputate.
Let’s check out how our headings look when they bump up against one another.
Level 1 Heading
Level 2 Heading
Level 3 Heading
Level 4 Heading
Level 5 Heading
Level 6 Heading
Now let’s look at how headings are spaced when preceded or followed with lists and paragraphs.
Headin 2 followed by a paragraph
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci.
An Unordered List
- Vestibulum in mauris semper tortor interdum ultrices.
- Sed vel lorem et justo laoreet bibendum. Donec dictum.
- Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.
- Praesent volutpat eros quis enim blandit tincidunt.
- Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.
Heading 4 followed by an ordered list
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci.
Image with no alignment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci.
Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat.
An Ordered List
- Vestibulum in mauris semper tortor interdum ultrices.
- Sed vel lorem et justo laoreet bibendum. Donec dictum.
- Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.
- Praesent volutpat eros quis enim blandit tincidunt.
- Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.
Video embed example
Summary
If you want a more robust method for testing go checkout the theme unit test on WordPress.org. WPCandy has also published a handy WordPress sample content XML import, which I’ve based this content sample on for my own use.
Meet the Author
