Fixing bullet points (list items) in WordPress
Thursday, July 9th, 2009As I was working today, I got a request to fix an issue in which bullet points and numbers for ordered lists were not displaying at all. The list would display, but the bullets would not, and this was especially frustrating when using an ordered (numbered) list.
The problem
To understand the problem, first you need to have a brief lesson in WordPress (and probably HTML in general) structure. What we commonly refer to as bullet points when talking about a PowerPoint presentation, or an outline, or a Word document, is known as a “list-item” (<li>) in geekspeak. List items come in two flavors: unordered lists (bullet points, <ul>), and ordered lists (numbered lists, <ol>).
In web design, lists have far-reaching usefulness, above and beyond just a list of stuff that you’d put in your slideshow or report. <ul>’s are used for sidebars, drop-down menus, links, pretty much any instance in which there is a series of several of the same kind of thing. The problem, then, is that a lot of those things (say, sidebars, for instance) aren’t the type of thing that you would want to slap a • in front of. This is resolved by putting this into the stylesheet:
li {
list-style-type: none;
}
Now you can have a sidebar and not have a bullet in front of every box in the sidebar, and every item within each box.
So what happens if you want bullets or numbered lists? Because, as a side effect of declaring that all lists have “none” for their “list-style-type” you’re applying that declaration for list items that may want the bullets, like in a post.
The thing that I’ve noticed is that this is especially (and somewhat unnecessarily) prevalent in WordPress themes. It doesn’t have to be this way. You could just say something like:
.sidebar li {
list-style-type: none;
}
and not have it affect all the lists known to man (or at least known to your site). But a lot of WordPress themes are based, to one degree or other, on one theme: the Kubrick theme that is the WordPress default theme. Among other things, Kubrick has this in the style.css:
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}
What Kubrick does is replace the standard bullet points with » which is written in CSS as:
.entry ul li:before, #sidebar ul ul li:before {
content: "\00BB \0020"
}
What I’ve noticed, though, is that a lot of theme designers will take this out, not wanting the » in front of all bulleted lists, and either leave it out completely or replace it with “content: none;”.
How to fix it
Well the easy solution to fix it is to search for “.entry ul” (CTRL + F to find specific phrases is your friend), and see if you can find the “list-style: none” or “list-style-type: none” in there. If it is, then you can just delete that line, or, if you’re afraid of breaking things you can’t fix later, comment it out like this:
/* list-style: none;*/
If you can’t find it anywhere, or don’t want to modify the original code, you can use this method which will recreate the standard bullets down to three levels (you can smack this at the very bottom of your stylesheet, not touch any other code, and everything will still be hunky dory):
html>body .entry li {
list-style-type: disc; /* this starts with the standard bullet point for all <li>'s */
}
html>body .entry ol li {
list-style-type: decimal; /* for ordered lists, use a number */
}
html>body .entry ol ol li {
list-style-type: upper-roman; /* for the second level of ordered lists, use uppercase roman numerals */
}
html>body .entry ol ol ol li { /* for the third level of ol's, use lowercase roman numerals */
list-style-type: lower-roman;
}
html>body .entry ol ul li {
list-style-type: disc; /* for an unordered list inside an ordered list, use a bullet */
padding-left: 10px; /* and give it a bit more room than the others */
}
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style-type: disc; /* for regular unordered lists, we use bullets */
padding-left: 10px;
}
html>body .entry ul ul li {
list-style-type: circle; /* for the second level, we use an open circle */
}
html>body .entry ul ul ul li {
list-style-type: square; /* for the third level, we use a square */
}
This also makes it so that anything beyond 3 levels (that’s not an ordered list) will default to a regular bullet point.
Isn’t this overkill?
Well, yes, since as I established, if you can find the line that is taking the bullet points out of post entries, it’s a whole lot of code vs. one line. HOWEVER, if, say, you wanted your default bullets to be something other than a disc, say a square, you can use this code and swap around the options. W3CSchools.com has an excellent document that talks about all the options you can use for the “list-style-type” property.
Alternately, you can use an image that you define, rather than the default circle, square, roman numeral, decimal, etc. Using this:
list-style-image: url('http://www.arcanepalette.com.nyud.net/tag/total-freaking-geekery/page/path.to.your/image.gif')
instead of this:
list-style-type: square;
There’s also a W3Schools article on that, too.
