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. With a CSS Sandbox for WordPress Themes, you are creating a single page with all the styling details that make up a typical page on your WordPress site, and then playing with it to build your own sand castles or fortresses.

WordPress is browser controlled and generated on the web. So the time you spend tweaking the styles here and there, you must be connected to the Internet and constantly uploading the new style.css style sheet to your Theme’s folder, eating up bandwidth and Internet access. Also, because your site might be public, every small change is witnessed by visitors, and you might want to make some drastic changes through the testing process.

By making a sandbox test page, you can use it on your hard drive disconnected from the Internet, and play to your heart’s content.

The process is actually very simple. If your WordPress site is new, make sure you have at least three posts entered. They don’t have to be eloquent, just have some content in them along with an image or two and put them in at least one category. From there, the instructions are:

1. Generate the page view you want to edit. I recommend you start with a single post view of your site, so click the title of a post to see the single post view.
2. From the browser menu, choose File > Save As or something similar. Give the file a simple name like test.html and save it to its own folder on your computer.
3. Copy the style.css from your Theme folder into the same test folder.
4. Copy all the images you want to use in your Theme such as bullet graphics, artwork, photographs, and other images into that same test folder or in a subfolder within it such as /images.
5. Using a text only editor, not a word processor, open or edit the test.html file.
6. Go through the head of the HTML file and look for a reference to the style.css. Delete all website and folder URL address parts to the style sheet link so it only shows style.css.
7. With the text editor, go through the HTML file and change all references to images in that file to the new location or remove the old location address.
8. Open the style.css and also change or remove all folder references to all the images within the style sheet. Do not remove the image links, just the folder references.
9. Save both files.
10. Using your browser menu, choose File > Open and open the new test.html file and you should see your site, for the most part.
11. If any graphics or images are missing, check again to see that the links to those are set to the new folder and that the images are in the folder.
12. Now it’s time to start playing in your sandbox.

Content For Your WordPress Theme Sandbox

To really play with your new WordPress Theme Sandbox, you will need the following:

1. Download the Firefox Internet Browser (You can still keep IE, just get this free Internet browser now!)
2. Get and install the two free add-on Extensions for Firefox: Edit CSS and Web Development Tools.

That’s it. You now have a free, and very powerful, HTML WYSIWYG web editor at your fingertips. All built into Firefox.

To use them, close and reopen Firefox and reload your sandbox test page. 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:

#header {border:solid red 4px; ...}

You should instantly see a red border appear around your header. WOW!

Most every change you make in that CSS file will appear on the page so you can edit the style sheet and see the effect as you go. When you are totally happy with the look and you are ready for full testing, copy the file and replace the old one in your style.css file with the new one, save it, and reload the page. Looks great? Then keep going until it looks like what you want.

Now, all you need is test data.

The test data should include all the HTML/XHTML and CSS styles you will use within your WordPress site and Theme. You can use the following as your test post data.

1. While viewing this page on our site in your browser, look at the source code (VIEW > SOURCE).
2. Between the sections on this page that say COPY FROM HERE to STOP COPYING, copy it.
3. Open the test.html with a text editor and delete your test post section where the post content begins below the title and post content CSS tags. It ends on a </div>, above the navigation, comments, sidebar and footer. Do not remove the </div> or anything below it.
4. Paste in the new post test data.
5. Go through it carefully and add or make any changes to match your styles and CSS needs.
6. Save the HTML text file and refresh your browser window with that page.

<– COPY FROM HERE –>

This is the H1 Heading

Inside of this test data section, you need to recreate the core HTML and XHTML and CSS styles that you will use within your WordPress Theme. For instance, above is the heading for the H1 HTML tag, which might contain a graphic in some Themes, or actually control the size of the font and text within your header. 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

Again, 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? If so, you can use this, or the one below, the H4, for section headings within your post to divide up topics.

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.

1. You need to do this first.
2. You need to do this second.
   • You could do this in between.
   • Or give this a try, too.
3. 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.

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 all things WordPress and blogging

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:

• WordPress Lessons and Tutorials
• WordPress Blog Design and Layout
• WordPress 1.5 Site Architecture, HTML, and CSS structure
• WordPress Template Files
• Choosing a WordPress Theme
• Help Me Find a WordPress Theme
• Looking for Lists of WordPress Themes?
• How Do You Choose a WordPress Theme?
• My WordPress Theme is Broken
• The Secret of Successful Editing of WordPress Themes
• Designing a WordPress Theme From Scratch
• Navigating Your WordPress Site
• WordPress Design Details
• WordPress Template Files and Style Sheets - Give Them a Name
• Using Javascript in WordPress
• WordPress.com Blog Bling
• WordPress.com Blog Bling: Decorating Your WordPress.com Blog with photographs, graphics, and more
• WordPress.com Blog Bling: Lines and Smilies
• Social Bookmarking Submit Links on WordPress Blogs
• WordPress.com Blog Bling: Fun Font Bling
• WordPress.com Blog Bling: Blockquotes and Quotes
• WordPress.com Blog Bling: Blogroll and Sidebar Bling
• WordPress.com Blog Bling: Signatures and Writing Code
• Adding Video and Podcasting Bling to Your WordPress.com Blogs

---

Site Search Tags: wordpress themes, designing wordpress themes, wordpress theme sandbox, how to design a wordpress theme, post HTML tags, HTML, CSS, HTML tags, stylesheet, web page design, WordPress Theme design, designing web pages, web page styles, post styles, sandbox, wordpress tips, wordpress help, wordpress design, template, wordpress template, wordpress template design
Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.