Creating a WordPress Stylesheet

Header elements

When users use the WordPress WYSIWYG editor, they have the ability to add all six header classes. This means we need to include styles for h1, h2, h3, h4, h5, and h6. It is not necessary to create link styles for all these classes, but the most important link style to remember is the H2 header. WordPress uses the H2 tag as the default title for each post and is usually turned into a hyper-link on the homepage. If we are creating a link for h2 a, then it is probably a good idea to create a hover state for this link as well.

All of the header elements should have no margin or padding on top, and should have their spacing decided by the margin or padding below the element. 15 px is a good padding-bottom for header elements.

Blockquote

blockquoteThe blockquote is a common element found on almost any website today. The blockquote not only enhances the stated quote, but it also provides texture and space to the entire article--making the article easier to read. Most blockquote elements will contain padding on all sides, a border or background, and margin below the element.

Unordered List

 

There are a few ways to go about an unordered list, but most importantly is that it does gets included in your stylesheet!

For the style icon we can use list-style: disc or list-style:circle. Another common practice would be to use list-style:none, add some padding to the left side of your list item (15 to 20 pixels should work), and add a background to the list item. With this css technique we can use any shape or icon we want as our list-style.

For spacing the unordered list, I recommend adding margin-bottom:5px to the list item. You will also need to add margin-bottom to the unordered list but that is dependent on the space between your paragraph tags. The margin-bottom of your unordered list should be equal to the margin-bottom of your p tag MINUS the margin-bottom of your li (Margin Bottom ul = margin bottom p - margin-bottom list item). This formula will give you the same spacing after your unordered list as you have after your paragraph tag.

Ordered Lists

Ordered ListOrdered lists are much simpler than unordered lists to style because there is no good way to style an ordered list outside of list-style: decimal. This is the most common ordered list styling, and nothing more than this is usually required. It can be nice to add a background to the ordered list number, but this can cause issues when the number has two digits. Stick with list-style: decimal.

As far as spacing goes, I recommend using the same spacing as you used in your Unordered List. This would be 5 px margin bottom to the li and another 5 px margin-bottom to the ordered list.

Links, Bold and Italics

There are a few other elements that are essential to the WordPress stylesheet, and any stylesheet for that matter. The strong tag should be added for bold, the em tag should use font-style:italic. There should also be a default link color, a, and a default hover state, a:hover.

.alignleft and .alignright

These two classes are used by WordPress when adding images to any post. These images should always float to the side name of the class and have margin to the OPPOSITE side and bottom of the element.

For example, .alignleft will float:left and have margin-bottom:10px and margin-right:10px.

.wp-caption

Another class applied by WordPress when adding images to any post is the .wp-caption.

This will be applied to your image if you enter a caption in the Flash Uploader. This is used to provide a caption for the image and is usually enhanced by a border of some sort. For the class .wp-caption we should add padding-top:5px and also text-align:center. These two styles will center the text and the image within the caption

.post

The end of your entry should be distinct. The page should not flow aimlessly from one post in to another.

Readers have the right to know when the article ends and a new one begins. Use the class .post to apply distinct spacing or a border-bottom to the end of each article.

Click here to download the stylesheet and images

Categories:

Subscribe to
Our Newsletter

Leave a Comment on this post

*
*