The Perfect WordPress WYSIWYG Test Content

For a long time I’ve been searching for a perfect set of test content I could drop into any WordPress WYSIWYG. Reason being its a pain to go through and use every single TinyMCE item to test a theme. To make matters worse, you’ll need to upload a ton of images or reuse some multiple times. Because of these issues, I’ve created what I feel is the most efficient way to test out the WordPress WYSIWYG.

wordpress wysiwyg test content

* Update 4-11-2013: Code updated for most recent WordPress versions. Added a Gist instead of WordPress code because it likes to remove the captions for some odd reason.

How To Use The Script

The below script includes all TinyMCE items pre-assembled for you (including images). To use it, you’ll need to drop the following code snippet into a WordPress content area. YOU MUST place it inside the HTML tab, do not place it in the Visual tab or you’ll have a messy display of non-sensical information spit back at you.

Once you’re in the HTML editor just copy and paste the below code. After that you’ll be good to go once you save.

Use this link if the captions are missing for some odd reason https://gist.github.com/ashblue/5361979

To use this drop it into any content area with a WYSIWYG in the HTML view. Do not post into the visual view or the sky will fall. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque vestibulum diam, id placerat nisi tempor quis. Proin erat metus, accumsan in sagittis vitae, suscipit a eros. Nam interdum pellentesque felis consequat condimentum. Maecenas nec augue justo. Vestibulum vehicula sodales diam nec volutpat.

<!--more--></pre>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<h2>YouTube Auto Convert Video</h2>
<pre>
<iframe src="http://www.youtube.com/embed/10tWqO2zt-k?feature=oembed" height="329" width="584" allowfullscreen="" frameborder="0"></iframe></pre>
<h2>Standard WYSIWYG Content</h2>
<pre>
<strong>Bold text</strong>
<em>Italic</em>
<del>Strike</del>

Un-ordered list</pre>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3
<ul>
	<li>Item 1</li>
</ul>
</li>
	<li>Item 4
<ul>
	<li>Item 1</li>
	<li>Item 2
<ul>
	<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre>
Ordered list</pre>
<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3
<ol>
	<li>Item 1</li>
</ol>
</li>
	<li>Item 1
<ol>
	<li>Item 2</li>
	<li>Item
<ol>
	<li>Item</li>
</ol>
</li>
</ol>
</li>
</ol>
<pre>
Quote</pre>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit erat et ipsum accumsan tristique. Duis quis lacus purus. Pellentesque laoreet ipsum in felis venenatis ut convallis est viverra. Vivamus ultrices mi id nulla vestibulum sed posuere lacus gravida.</blockquote>
<pre>
<a href="http://asdf.com">Link test</a></pre>
<h2>Image Testing</h2>
<h3>Standard</h3>
<h4>Default</h4>
<pre>
<img class="alignnone" title="Kittens" alt="kittens" src="http://placekitten.com/g/400/400" width="200" height="200" /></pre>
<h4>Standard with link</h4>
<pre>
<a href="http://placekitten.com/200/200"><img class="alignnone" title="kitten" alt="kitten" src="http://placekitten.com/g/200/200" width="200" height="200" /></a></pre>
<h4>Float left</h4>
<pre>
<img class="alignleft" style="font-style: normal;" title="kitten" alt="kitten" src="http://placekitten.com/g/300/200" width="300" height="200" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.</pre>
<h4>Center</h4>
<pre>
<img class="aligncenter" style="font-style: normal; border-style: initial; border-color: initial; border-width: initial;" title="kitten" alt="kitten" src="http://placekitten.com/g/400/200" width="400" height="200" /></pre>
<h4>Float Right</h4>
<pre>
<img class="alignright" style="font-style: normal; border-style: initial; border-color: initial; border-width: initial;" title="kitten" alt="kitten" src="http://placekitten.com/g/300/200" width="300" height="200" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.</pre>
<h3>Captions</h3>
<h4>Short</h4>
<img title="Kittens" alt="kittens" src="http://placekitten.com/g/400/400" width="200" height="200" /> blah blah blah
<h4>Long</h4>
<img class=" " title="Kittens" alt="kittens" src="http://placekitten.com/g/400/400" width="200" height="200" /> Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
<h4>link</h4>
<pre>
<a href="http://placekitten.com/200/200"><img title="kitten" alt="kitten" src="http://placekitten.com/g/200/200" width="200" height="200" /></a></pre>
<h4>Float left</h4>
<img style="font-style: normal;" title="kitten" alt="kitten" src="http://placekitten.com/g/300/200" width="300" height="200" /> Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.</pre>
<h4>Center</h4>
<img style="font-style: normal;" title="kitten" alt="kitten" src="http://placekitten.com/g/400/200" width="400" height="200" /> Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
<h4>Float Right</h4>
<img style="font-style: normal;" title="kitten" alt="kitten" src="http://placekitten.com/g/300/200" width="300" height="200" /> Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem lacus, blandit vel scelerisque egestas, rutrum ac sapien. Etiam sollicitudin eleifend mauris, nec tincidunt purus blandit interdum. In purus purus, ornare at eleifend ac, semper quis ante. Etiam vitae leo sem. Quisque in libero eget velit egestas vestibulum. Aliquam erat volutpat. Suspendisse potenti.

Leave a Reply

Your email address will not be published. Required fields are marked *