---

 

This is the H1 Heading This is the H1 Heading This is the H1 Heading This is the H1 Heading This is the H1 Heading This is the H1 Heading This is the H1 Heading This is the H1 Heading 

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.

This is the H2 Heading This is the H2 Heading This is the H2 Heading This is the H2 Heading This is the H2 Heading This is the H2 Heading This is the H2 Heading This is the H2 Heading 

Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content.

This is the H3 Heading This is the H3 Heading This is the H3 Heading This is the H3 Heading This is the H3 Heading 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.

This is the H4 Heading This is the H4 Heading This is the H4 Heading This is the H4 Heading This is the H4 Heading This is the H4 Heading This is the H4 Heading 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.

• 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.

This is the H5 Heading This is the H5 Heading This is the H5 Heading This is the H5 Heading This is the H5 Heading This is the H5 Heading This is the H5 Heading This is the H5 Heading This is the H5 Heading This is the H5 Heading This is the H5 Heading 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.

This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading This is the H6 Heading

While the H6 heading is not always used, maybe you might find a need for it if your H1 and H2 and H3 headings are used.

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.

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.

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 – H5 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 with blockquote cite {style declarations} in your stylesheet.

This is an example of a blockquote which also contains a link to Blog Design and Layout articles on the WordPress Codex, the online manual for WordPress Users, 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.