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.

Here’s an unordered list.

• Proin lacinia nibh quis massa.
• Sed sed justo sodales justo scelerisque ultricies.
• Ut sodales pretium augue.
• Proin interdum, enim ut ullamcorper hendrerit, felis turpis malesuada risus, ac gravida nulla mauris et odio.

Here’s an ordered list.

1. Proin lacinia nibh quis massa.
2. Sed sed justo sodales justo scelerisque ultricies.
3. Ut sodales pretium augue.
4. Proin interdum, enim ut ullamcorper hendrerit, felis turpis malesuada risus, ac gravida nulla mauris et odio.

Here’s a blockquote.

Nunc nonummy, quam sodales gravida dictum, turpis mauris egestas tellus, lacinia consectetuer sapien felis quis leo. Duis ligula erat, vehicula et, accumsan nec, aliquet bibendum, justo. Sed vitae libero ac massa ultrices sollicitudin. Maecenas molestie gravida diam. Suspendisse at nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse enim ligula, hendrerit nec, consectetuer eget, tincidunt non, urna. Maecenas sapien. Praesent volutpat. Vestibulum at massa id leo euismod vestibulum. Nam vel magna non neque aliquam feugiat. Phasellus scelerisque enim at elit. Nam molestie, ipsum et elementum facilisis, mauris elit pretium felis, vitae lobortis sapien neque quis dui. Sed in elit a lectus ullamcorper faucibus. Nullam suscipit massa a felis tempus scelerisque.

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.

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 adminstration features. Others add fun things like random elements and polling and rating systems.

Here’s a Table

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

Here’s an image aligned to the left.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Etiam non pede quis ante convallis convallis. Cras at tortor euismod leo molestie aliquet. Quisque posuere ornare nulla. Proin scelerisque dignissim erat. Donec dapibus euismod est. Nam molestie consequat lacus. Fusce euismod dignissim libero. Morbi laoreet dolor sed mi. Aenean urna diam, malesuada eu, tempor non, euismod sed, arcu. Nullam egestas nisi non nulla bibendum pharetra. Cras pellentesque nunc nec odio. Aliquam sed eros eu lectus congue rhoncus. Praesent accumsan nisl at leo. Sed enim. Integer nisl.

Here’s an image centered.

Here’s an image aligned to the right.

Proin lacinia nibh quis massa. Sed sed justo sodales justo scelerisque ultricies. Ut sodales pretium augue. Proin interdum, enim ut ullamcorper hendrerit, felis turpis malesuada risus, ac gravida nulla mauris et odio. Nunc nonummy, quam sodales gravida dictum, turpis mauris egestas tellus, lacinia consectetuer sapien felis quis leo. Duis ligula erat, vehicula et, accumsan nec, aliquet bibendum, justo.

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 preformated 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 paddding around each element, including the paragraph, so you can position things appropriately to the rest of the content.

H3 Heading

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.