Designing a WordPress Theme: Building a Post Sandbox

When designing and testing a WordPress Theme, or any web page design, it helps to put the design through the maximum amount of testing. In other words, you have to test all the code that might appear on a web page.

Bold in one WordPress Theme may look different in another. Link styles change from Theme to Theme, as does the spacing in and around post titles, images, paragraphs… everything changes from Theme to Theme and you quickly find that choosing a WordPress Theme isn’t just about picking one with a pretty color scheme or header. It’s all about the details.

To help you notice the details, I recommend that you create a “sandbox” test post on your blog. Then try on different WordPress Themes to see how that post looks and evaluate all its styles.

To save you the trouble of creating a sandbox test post, I’ve put together all of the core HTML design elements most commonly found within a blog post, including bold, italic, underline, links, lists, blockquotes, headings, and images. You can download the sandbox post text file or copy from the example of the sandbox post text content below.

A sandbox post helps you test what is styled, and what is not, in a Theme. It shows you how images will look, how headings are styled, how lists are displayed, all the possible styles found within the post content area. As you scroll through the sandbox post text below, you will see all the design choices for the WordPress Theme on my blog. Compare it to what you see on your Theme tests.

Download Sandbox Post Text FileDownload this sandbox post text file with all the basic HTML elements found within a WordPress Theme post and copy it and paste it into a new blog post, following the instructions within this post to test a WordPress Theme.

NOTE: WordPress now uses alignright, alignleft, and aligncenter by default. Please add these classes to the images in the file.

To use this sandbox post content for testing WordPress Themes publicly on your new WordPress blog:

Copy the content below, between the “copy here” warnings, or open or download this sandbox post text file with all the basic HTML elements found within a WordPress Theme post and copy it.

Paste the content into a blog post, like you were writing a post.

Title it as test post.

Put it in a category and add some tags so those design elements will appear in and around your test post.

Publish the post.

Try on different WordPress Themes to see how the design works on your test blog post. Add some comments to see how those will look, and check out all the various pageviews of the Theme to see how the front page with your test blog post, archives, categories, tags, search, and other pageviews look with content on a page.

Content For Your WordPress Theme Post Sandbox

The sandbox post example below can be copied and used with permission for testing your WordPress blog. Or download the sandbox post text file and copy the sandbox content into your blog post for testing.

<– COPY FROM HERE –>

This is the H1 Heading

Above this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to display:none which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area.

If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area.

Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme.You need to know what that will look like as part of structuring your styles.

This is the H2 Heading

While WordPress assigns the H1 and H2 headings to specific places, such as the header and post title, not always are they in the same places. For your Theme, the H2 might be the post title, or it might be used in the sidebar for the section titles, and the H3 is used for the post title. You need to know what each looks like and identify it on your Theme and layout.

Look at how the heading is styled, but also look at the space around it. It might have a huge amount of margin or padding above or below, background colors, and other effects. If you want them for that heading, fine, but if not, change them.

This is the H3 Heading

Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog’s stylesheet.

Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the link color, link hover color, and visited link color. Be sure and design for each style.

This is the H4 Heading

In this section under the H4 heading, we’re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want.

Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists.

General Lists using the <ul> tag

Ordered Lists using the <ol> tag

Definition Lists using the <dl> tag

Definition Lists use two other tags to generate the list:

<dt> sets up the word or phrase to be “defined”, usually set in bold, and

<dd> sets up the definition, which is usually in a normal or slightly smaller font and indented under the definition.

And that’s the end of the lists

And we’ve just tested a paragraph before and after a general list along with a nested list to help you see what at least three levels of the list will look like. Make sure that each level of the list is styled to match your specific needs. You might want to use the default disc or circle, or you might want to add graphic bullets to your list, too.

This is the H5 Heading

While the H5 heading is not always used, maybe you might find a need for it if your H1 and H2 and H3 headings are used. You might need one to two levels of subheadings in your post content, so this one gives you another option.

We also need to look at the other two lists and then add some images and other styles to flesh out your WordPress Theme sandbox.

You need to do this first.

You need to do this second.

You could do this in between.

Or give this a try, too.

But this is the third and last thing to do.

This should give you an idea of how a nested number list would look on your site. Now, let’s look at a definition list.

WordPress Themes

A WordPress Theme is not a “skin”. Though many young people call it one. The reality is that a WordPress Theme contains many files that come together in various ways to generate a WordPress web page. A “skin” simply changes the look, and rarely the results.

WordPress Plugins

WordPress Plugins add flexibility, features, and capabilities to your WordPress site. There are hundreds to choose from. Some add power and control like monitoring and busting comment spam and enhancing your administration features. Others add fun things like random elements and polling and rating systems.

And here is another paragraph to show the relationship between the various parts and pieces.

This is the H3 Heading

If the H3 heading is your in-post section heading, then you need to see how it works within the post itself. If it isn’t, simply change the H3 to whatever heading number you are using.

We need to look at how images, another major feature of most WordPress sites, are used within the site. Images tend to sit on the left, right, or middle of your post, depending upon how you are using them. For an image sitting on the left or right, you need to add appropriate padding around the image on the text side to push the text away from the image so the text won’t push up against the edges of the image.

A centered image is a little different. It is centered in the middle and the text is pushed above and below it. NOTE:Currently, the Theme used here doesn’t feature “right” or “left” or “centered” styles. It uses the CSS deprecated “align”. Please change the code here from align to class so your site will validate and you will have much more control over image placement.

How to add the CSS styles for images is discussed in the Codex article, Using Images.

Testing Font Looks – H3 Heading

You will need to test the looks of the different font styles, too. This is bold and THIS IS BOLD.This is italic and THIS IS ITALIC.This is bold and italic and THIS IS BOLD AND ITALIC.This is code and THIS IS CODE. And now let’s look at what the PRE tag, also known as the preformatted tag, looks like:

This is the pre tag.
It should be formatted as written
so if you add spaces to the front of the line
it will show the spaces and the <code> as written

This should be back to the normal paragraph style and we hope you have been paying attention to the margins and padding around each element, including the paragraph, so you can position things appropriately to the rest of the content.

Your CSS Here – H3 Heading

Let’s look at the blockquote, one of the most common tags used in most blogs. It is designed to “frame” a quote from another blog, website, or reference that you are “quoting” from. For the most part, there are three examples of usage:

This is a simple quote. It is either preceded or followed by a link within the text to the credited source. A blockquote must be designed to stand out from the rest of the text content, but it does not have to “really” stand out, just separate itself from the content so we know it’s not your words.

A second style to the blockquote is one that includes a citation. Under HTML guidelines, this citation should be wrapped in the <cite> tag and then that tag can be styled to be in italics, bold, or whatever look you want in your design.

Take care with the style of the <cite> tag as some WordPress Themes use it in the comments area. I recommend you style it specifically withblockquote cite {style declarations} in your stylesheet.

The citation includes a link and text to help you see what a link and text will look like within the cite tag.

There are many tags that can be found within a blockquote, just as can be found within any container within your web page design, but a last example includes an unordered list. Many bloggers love to quote examples from lists, so this is a good tag series to test.

Within this web design sandbox test page, we’ve tested:

Headings

Text styles like bold and italic

Ordered (numbered) and unordered (bullets) lists

Links

Code and PRE tags

Blockquotes

And much more…

Which should show you what a list looks like within a blockquote.

Each website is unique with it’s own look and feel for the various parts and pieces. This cut and paste section looks only at what you might have within your content section. So if you will have boxes for lists or little aside information, you will need to add them so you can see how they will look in the overall page layout.

Some elements in a WordPress Theme are controlled by the style sheet, while others are controlled by the Template files. Try to work on as much as you can from the style sheet first, then you can mess with the template files.

Remember, any changes you make to the style sheet and template files will be not available if you change themes. If you want them carried over, you will need to copy and paste them into the new Theme folder.

As a last element in the content area and throughout your site, check the hypertext links. These are the links to external websites and/or internal pages within your site. They come in three flavors: active, visited, and hover. Make sure you work on the styles for each of these.

<– STOP COPYING HERE –>

Your Turn to Play in the Sandbox

Now, it’s your turn to play in the WordPress Theme Sandbox.

If you use tables or want boxes for a form of in-post sidebars or pullquotes, or to use other HTML tags within your blog posts, add those to the Sandbox so you can test drive those design elements.

If you need help with this, leave a comment below and I’ll try to answer your question. Remember, there is a ton of information on styling and designing your WordPress Theme and layout, and here are some links to help:

NOTE:I’ve closed comments and trackbacks to this post as I get dozens of trackbacks every week from people using this web design post sandbox on their test sites. Some of those test sites are just that, tests, and never become real blogs. This saves everyone a lot of time and trouble with comment and trackback links. Thanks for your support and I’m so glad this is being appreciated.

For anyone who would like to take the “sandbox” idea a little bit further, I would recommend installing wordpress locally on Windows, and have a fully functioning WP version without worrying for bandwidth etc. Here’s a tutorial for that:http://www.tamba2.org.uk/wordpress/xampp/ .

However Lorelle, I should thank you for this post because I design and tweak themes all the time and this list of HTML tags really help to make sure it all works well.

Hi,
Just wanted to thank you for this post.
I’ve been blogging for a while now, all this time painfully aware my site is butt-ugly.
I decided to redesign it – And found this post which has everything I was looking for.

Glad to help, and remember that blockquote and a few other tags are missing from this example. See this article for tips and resources to make sure your sandbox page has all the features you may, or may not, need for your Theme. Good luck and glad to help, Avi.

Hi; i was wondering,… and i know that this is a lot to ask but im taking a chance with asking anyway… lol; Seen as you are brilliant at all this and i dont have a clue; i was wondering if you would be able to compose a theme for me with the same logo, and menu bar at the top; thats it. And the rest just white text, white underlined hyperlinks and black background. Then i could trym hence try do the rest of it…

Im guessing it would only take you like 5 mins to do this but im just… rubbish at things like this.

I really recommend that you find a WordPress Theme close to what you want and then dig in. Or ask one of those groups I recommend as sources for finding web designers for WordPress on my WordPress Resources page, under WordPress Web Designers to help you. On the same page you will find a lot of step by step instructions on how to create your own Theme, as you will also find on my Site Map. It isn’t hard to do what you want, and these easy instructions should help.

And honestly, even the lightest weight design doesn’t take 5 minutes. A professional takes a lot more time to make sure everything is right. While you can change the look of a site within a few minutes, it needs to be tested and checked in different browsers and then all those little nitpicky things come up that need to be adjusted and tweaked…it takes time.

I am traveling right now extensively, so even if I wanted to do this for you, for a fee, the soonest I could consider it would be August or September at the earliest. I’m sure you don’t want to wait that long. 😉

Googling ‘sandbox theme wordpress’, and guess who comes out on top: Lorelle – the very one and only Lorelle I’ve been reading ever since I made up my mind about starting a blog of my own ! You’re amazing – and your advice on how to make a sandbox is just what I needed.

Thumbs- (and keep-) up

PS: however, it seems Google is better at finding the right post than your own wordpress search tool.

Thanks for the kind words. And unfortunately, the WordPress search function, especially with this particular WordPress Theme, in a word: sucks. This is why I put so much energy into my Site Map. You can always check there and in the sidebar for a better “table of contents” which are categorized by topics to help you find your way throughout all the stuff I’ve written.

The Edit CSS feature in Firefox is really a time-saver. Even when I run WordPress locally, I always play with CSS from within Firefox. Though I have a nasty habit of suddenly navigating away before I’ve saved my changes. Sigh. I need to learn how to work effectively.

As discussed on the WordPress.com support forum, you can copy the styles from one WordPress Theme and use them as a template for creating a custom Theme using a combination of the paid upgrade WordPress.com CSS Editor and the Sandbox Theme with NO CSS styles.

Using Firefox and the Web Developer Edit CSS Firefox Extension, view the CSS on any WordPress Theme. Copy the CSS into a text editor.

With extensive familiarity with web page design and CSS, download and copy and paste all the All The Styles for the Sandbox Theme into another page in your text editor and start sweating.

Go through every line and replace the styles in the copied Theme stylesheet with the appropriate and matching selectors (style references) in the Sandbox Theme. They will not match, so you have to change them. When they are changed, and you’ve run some tests to make sure, which this article describes, then copy and paste the new revised CSS into the CSS Editor and you will have the same WordPress Theme design, with your own variations.

I will be soon publishing, here and on the Codex, instructions on how to use the CSS Editor and all the customization features we can think of. Be patient. This is exciting, but also very frustrating as it is not for the timid or basic web page designer. Hardly for the intermediate level web page designer sometimes. I’ve been doing this for over a decade and I’m still trying to figure out what goes where.

For simple things, just change the second to make it look like what you want and leave the rest as it is.

Great tutorial, I’m having masses of fun with my sandbox. With regard to the centered image; how do you center it without the use of a div element? I’ve gone with setting the left padding to 40% but am concerned that this may cause problems later on. Also this wouldn’t work with images of different sizes.

Hi Lorelle!
I’m just diving into WordPress and I need to modify a theme to include my banner graphic and maybe some images in the sidebar. I was going thru the Sandbox Method and all was well until it came time to:
‘Click on EDIT CSS from the toolbar and your CSS file will appear in a sidebar. Look for #header, usually towards the top, and type in the following at the front of the first bracket’

My CSS sidebar was empty. Is this because the theme I chose is not editable? Do I have to upgrade to the full version of WordPress to modify ANY theme, or does it just give me more flexibility?

Or I might have broken the Style sheet because I wasn’t sure where/how to cut out the image url references…mine look like this:

I assume you are talking about using the Firefox Web Developer Extension, right? That’s where you can edit the CSS you see on the screen, but you are not editing your actual stylesheet. You understand that, right? You then copy the changes you’ve made as you see them on the page to your stylesheet, replacing the “old” styles you’ve changed.

A WordPress Theme can have multiple stylesheets depending upon how it is styled and the Plugins it uses. At the top of the Edit CSS sidebar panel, there are “tabs” for the different stylesheets. If the stylesheet isn’t properly named or the styles are embedded within the web page you are viewing, you may see a tiny blank tab behind the others.

It also looks like you want to change the header art. If the Theme is based upon the Default/Kubrick design, follow the instructions in the WordPress Codex article on Designing Headers, since it may involve a series of steps to get the header changed.

Hi Lorelle!
Yes, I should have said: I am using Firefox with the Web Developer Tools, and I’m working locally with WordPress. The theme that I started with is called Webplus 1.0, and actually the Header was the one thing that did work. My CSS tab was empty and the imbedded styles tab behind it just had: ‘#page { background: url(“”) repeat-y top; border: none; }’
My WordPress page looked like it had no style applied at all (but the Header image loaded properly), so I’m thinking the CSS style sheet is not being referenced somehow (it is in the folder with my test page).

Whew! I go one day from feeling like I can do this, to the next day wanting to hire someone who does this stuff every day. I did look at your list of web designers and first link to Laughing Squid should be updated to this: http://laughingsquid.net/web-designers/
The second link is broken. The third was a little scary because I wasn’t sure to what I was subscribing.
I also posted my WordPress site design as a job on Elance a week and a half ago, but didn’t get any bids. Is that because WordPress is free and too easy to make money with, or is there some bias against it in the “pro web design” world?

A lot of people think this web design stuff is easy. You are learning the real truth, aren’t you. Thanks for the update on Laughing Squid, and you should also know that the best list is now Automattic’s WordPress Consultants for finding the professionals who will help you.

Thanks for the new list of WordPress designers, Lorelle.
No, I never thought that web design was easy. I’m one of those people that thought it was magic! But now I think with a little help, I’ll be able to come up with something I’ll really like.

Thanks so much for the tutorial, Lorelle. And EEEEEK! I’m stuck at instruction number 10.

I open my sandbox test.html page in my web browser and find that it has changed the typeface from san serif to serif. All type displays as san serif online. All type displays as serif in my sandbox. Other than that, the sandbox appears to like the stylesheet.

First, there is no font-size for “small”. There is a small HTML tag, but you can’t have a small font. You have to be specific. I use 1 em in the body style and then scale everything from there with percentages. Works wonderfully.

Kick ass! I’ve been busy redesigning a simple site for a friend. So far he has been using pure HTML and JS – sooo 2002, I know – so I wanted to use WP as a CMS, and this whole “not having to upload every minor revision” thing will save me a butt load of hassle – especially since the transition to a new host hasn’t been completed yet. Thanks!

Gaah! Or, why didn’t I look for this two years ago… You don’t have a clue (or – maybe you do) how much easier you’ve made bloglife. I’m the kind of person that can’t keep my hands way from the code and for two years it’s been a lot of upload-reload-check-modify-upload… and so on.

Maybe if I’ve had a little bit of patience and actually tried to learn first and do later when I started out coding, css-ing and blogging. maybe then I would have found you earlier.

Is there a plugin or widget available that works like a sandbox? I want to edit my theme offline and I tried your tutorial but I just don’t understand everything and find myself guessing…unsuccessfully. I know you have an excellent grasp of coding for WordPress but I’m new and find that most descriptions leave out details that a new person needs. So far, I have found no resource that can explain things simply enough for a new person to understand.

Therefore, though I love this tutorial, I’m really hoping that by now someone has made it easier. Can you suggest anything? Thanks.

I’m trying to graduate from creating simple page designs to creating a blog theme design. I hope to transition my simple brochure site to a blog, but I’m not a graphic designer. I want to maintain the clean design and colors that I already have in place on my site.

I already know CSS and am comfortable with writing scripts, so PHP template tags don’t intimidate me. But putting everything together seems overwhelming because the pieces are in separate files, and I can’t always interpret how styles in the pre-designed themes are being used. I have read a lot of codex topics but am wishing for a sequential tutorial. I have a book on WordPress Theme Design, but I just don’t relate to the examples or understand the rationale for many of the design decisions.

So in a nutshell, I’m not making much progress. Could you recommend a resource that puts the process together in sequential order?

There is no sequential order. You change what needs changing and leave the rest alone. The stylesheet governs how each individual template file is styled, as well as the whole. The Sandbox WordPress Theme is a brilliant example worth studying to see how this is all done, a fantastic canvas.

There is no order. You either start from scratch and design the site, then add the WordPress template tags to generate the HTML content, or you start with a Theme design you like, like the Sandbox Theme, and then add your own styles to its stylesheet. You don’t do header first, then footer, then content, then comments. You work on the element that is next on your list, not mine.

The rationale for a lot of design decisions have nothing to do with WordPress. They have to do with the designer and the goals of the site. There are hundreds and hundreds of expert web designers blogging the tips and insights you may need there, but unless you can be more specific, you are in the same boat as the rest of us.

I just came across your site as I am looking at a heavy redesign on my personal site (using a stock theme) and on my After Hours Computer Service site. Thank you for all the advice in this article. I’m still learning CSS, and this article is going to be extremely helpful as soon as I can get it completely digested. 🙂

I would like to second the recommendation of your No. 2 post by Sarit. I use XAMPP extensively when testing new WordPress themes and plugins, Drupal, and more recently Joomla. It makes it extremely easy to play and learn, and not have to worry about messing up the folder structure on a production site.

I recommend the full XAMPP install, only because you have the full package. You may not use everything, but if you are on the road, without internet access and need something, you most likely already have it. I also recommend the PERL add-on as well. PHP is great, but every once in a while I like to play with a Perl program.

I started using WordPress a couple of months ago and managed to muddle my way through a theme and CSS. Now I’m ready to do more — maybe make a contribution or two to the community — and this site is absolutely awesome. Thanks so much for making all of this information available and easy to understand.

[…] converting Gscape opensource template to a basic wordpress theme. this template was created by Gururaj and was found here on OSWD. As well as the wordpress codex I also used information from the following blogs – AndrewStrojney.com, Leon Kilat ::: The Cybercafe Experiments, UrbanGiraffe, and Lorelle on WordPress. […]

[…] This template was created by Gururaj and was found here on OSWD. As well as the wordpress codex I also used information from the following blogs – AndrewStrojney.com, Leon Kilat ::: The Cybercafe Experiments, UrbanGiraffe, and Lorelle on WordPress. […]

[…] Well after reading the docs on WordPress’s site and after getting a little confussed, I found this article that makes designing a WordPress theme a snap. I found this article very easy to follow and I also found this sandbox way of editing CSS is awesome! I will have to try this more in the future. Now I have to figure out what a Post slug and a various other things are. […]

[…] Moving up the ranks to more intense WordPress Theme building, I wrote “Designing a WordPress Theme – Building a Sandbox” and “Designing a WordPress Theme From Scratch” to help you build your WordPress Theme from the ground up. […]

[…] Not every WordPress Theme is easy to work with, no matter how minimalist it looks. Every WordPress Theme looks the same when you take away the stylesheet. So start with the structure you like, strip away the rest, and you have a seriously minimalist WordPress Theme to start your WordPress Theme design process. […]

[…] VanFossen of Lorelle on WordPress for pointing me to the Web Developer plugin in her article “Designing a WordPress Theme – Building a Sandbox“. If you would like more information about the technique I just shared, her article is a […]

[…] VanFossen of Lorelle on WordPress for pointing me to the Web Developer plugin in her article “Designing a WordPress Theme – Building a Sandbox“. If you would like more information about the technique I just shared, her article is a […]

[…] VanFossen of Lorelle on WordPress for pointing me to the Web Developer plugin in her article “Designing a WordPress Theme – Building a Sandbox“. If you would like more information about the technique I just shared, her article is a great […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a blockquote. Lorelle on WordPress, your guide to […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a blockquote. Lorelle on WordPress, your guide to […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a blockquote. Lorelle on WordPress, your guide to […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a blockquote. Lorelle on WordPress, your guide to […]

[…] A WordPress Theme sandbox, in coding terms, is little different from a child’s sandbox. It’s a place to experiment with construction, building sand castles and great fortresses. More Blog Resources […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a blockquote. Lorelle on WordPress, your guide to […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a […]

[…] declarations} in your stylesheet. This is an example of a blockquote which also contains a link to Designing a WordPress Theme – Building a SandBox to help you see what links will look link within a […]

[…] Sandbox Content Updated The thirteenth blog post published on Lorelle on WordPress was Designing a WordPress Theme – Building a Post Sandbox. This post continues to be useful to WordPress Theme developers and testers, so I’ve updated […]

Search

Helping you learn more about blogging and WordPress every day with help, tips, advice, and techniques for blogging and using WordPress and WordPress.com. The blogging help you need. Now.