WordPress Sample  Content

Sample page content for testing CSS against the HTML output of the WordPress TinyMCE editor.

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="/wp-content/uploads/wordpress-logo.png" alt="WordPress logo on white" width="275" height="275" /></a><em>Lovely italic text</em>, to emphasize something important. <a href="#">An inline link</a> to something else important <strong>and worth bolding text over</strong> for attention.
<blockquote>So valuable someone said something important about it</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>An interesting paragraph you should consider reading a few times over.</p>
<h3>An Unordered List</h3>
<ul>
  <li>Something included in a good list</li>
  <li>Another thing</li>
  <li>A third thing to mention</li>
</ul>
<h4>Heading 4 followed by an ordered list</h4>
<p>An interesting paragraph you should consider reading a few times over.</p>
<h3>Image with no alignment</h3>
<p>An interesting paragraph you should consider reading a few times over.</p>
<h3>An Ordered List</h3>
<ol>
  <li>Something included in a good list</li>
  <li>Another thing</li>
  <li>A third thing to mention</li>
</ol>
<p>An interesting paragraph you should consider reading a few times over. 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

WordPress logo on whiteLovely italic text, to emphasize something important. An inline link to something else important and worth bolding text over for attention.

So valuable someone said something important about it

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

An interesting paragraph you should consider reading a few times over.

An Unordered List

  • Something included in a good list
  • Another thing
  • A third thing to mention

Heading 4 followed by an ordered list

An interesting paragraph you should consider reading a few times over.

Image with no alignment

An interesting paragraph you should consider reading a few times over.

An Ordered List

  1. Something included in a good list
  2. Another thing
  3. A third thing to mention

An interesting paragraph you should consider reading a few times over. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.

Video embed example

//vimeo.com/71185761

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.

Related Articles

Meet the Author

Kevin Leary, WordPress Consultant

I'm a custom WordPress web developer and analytics consultant in Boston, MA with 17 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.