WordPress: Modifying Your Lists via CSS

While I sit here and look over my various sites including my Photography site, I noticed that the unordered lists were not styled. Raul also mentioned how I should write about styling unordered <ul></ul> or ordered <ol></ol> lists within a WordPress theme, as his was also missing styling. This won’t be a terribly in depth post about how to completely restyle your unordered or ordered lists but it will hopefully help you learn the basics you need to know when playing with them, within your WordPress Theme or Template. This also applies outside of the world of WordPress as well since I will not be targeting a particular class or id name within a stylesheet.

The Lists

Alright I’ve mentioned both unordered and ordered lists, but what is the difference between them? Normally, I use unordered lists <ul></ul> which are primarily used for listing items in no particular order, like a shopping list!

The other is an ordered list <ol></ol>, which I don’t think I ever use. Ordered lists are for listing items in a particular order. Wasn’t that obvious?

Now that we got what they are out of the way, what do they look like in HTML?

Simple and straight-forward list right? Though now you are probably wondering how do you go about editing your stylesheet for your theme to suit your needs? Well, it too is pretty straight-forward.

CSS – Cascading StyleSheet

Your cascading stylesheet is located among the rest of your WordPress Theme files (/wp-content/themes/your-theme/) and is usually called stylesheet.css.

Now stylesheets can vary greatly from theme to theme,  but let’s try to keep this uncomplicated and apply a specific styling to the above list. We would modify the above list by adding a class reference or name to it.

We give the class the name mylist just for easy reference, typically it is best to name it something that will be easily identifiable to you for editing purposes. With your favorite text editor (notepad, notepad++, simpletext, bbedit, etc) open up the stylesheet.css file. Chances are you do not have a class called mylist so let’s get started. Pick an area to insert the class declaration, I normally place it after the #content declaration. The cascading stylesheet is typically read from top to bottom, hence the name cascading.

This will set up the class declaration for the unordered list we’re about to create. We will start filling in the guts of the style as well as editing the internal parts of a list which are the list items <li></li>. Some attributes that I modify when I play with a list, whether or not its an ordered or unordered list, is the padding and margin. You can also change the look of the “bullets” you decide to use as well.

What the above does is changes the look of the “bullets” to discs, I also remove the margins from the list. This will remove the extra spaces around the list itself. I find sometimes that when I insert a list within a paragraph or between paragraphs there is too much of a space between them all. Setting the margin to 0 will help. I then nudge the list over by 10 pixels which is like indenting it. If you are using an ordered list <ol></ol> you can change how the numeric representation looks too, like numerals, roman numerals etc.

To style the list items you start a new declaration below the parent style.

Say we wanted to change the color of the items within the list to a red and underline them, this is how you would apply the style:

Globally Changing Your Lists

Another option you have is to globally change how your ordered and unordered lists work. Instead of using a class or an id you would just use the tag itself:

This would give the default style to any <ul></ul>(unordered) tags throughout your whole WordPress Theme.

Afterthoughts

• Cheese
• Bacon
• Milk
• Bread
• Eggs

The above example is how my blog (custom WordPress Theme) handles unordered lists. The CSS behind the list is relatively simple too:

Take the outer class (or parent) post, which is typical of most WordPress Themes. I’ve told the stylesheet.css to use a disc type with adding padding to the bottom of the unordered list. I then tell the list items to nudge over by 25 pixels and pad them a little bit as well. This allows for an easier to read list of whatever I decide, or at least I think so.

More advanced styling would be to remove the default bullet style and replacing it with a positioned background graphic. Perhaps you have a logo you would like to use as the “bullet” instead. You can see this in action over at my photography site. Any unordered list use a background image (of a single arrow) as the “bullet”.

Typically WordPress Theme navigation (like home, about, contact etc) are also unordered lists, though they have a bit more styling applied to them. The style applied is usually the removable of the “bullets” (list-style-type:none;) and aligning the items horizontally not vertically (display: inline .

Hopefully this has shed some light on ordered and unordered lists within your WordPress Theme or in general web design usage. I’ll answer any questions you might have, and if any of the above is incorrect, please feel free to correct me so I can make changes.