How to Create Custom Bullet Points in WordPress

Bullet points are an especially effective way to communicate certain information on the web. Of course they can very good in print too, but as we all know, reading on the web is different. People scan more. They expect a more graphic presentation of text. And their eyes get tired easier.

If we were to make a quick list of the benefits of bullet points, we might say they …

• Make for easy reading
• Break up copy
• Draw the eye of scanners
• Emphasize the unifying idea between points
• Communicate ideas quickly

And so bullet points are important, especially in text heavy posts. Getting the styling of your bullet points right is also important. Some may scoff at that, but any writer who cares about his/her words knows that when a bulleted list doesn’t look right, it seems to take away from the content itself.

And so below we’re going to go over some basic principles you can use to get your bulleted lists looking the way you want them to.

Here is what we’ll cover in this article:

• Create a Child Theme
• The Theme Bullet Points Style
• Finding the Class Name of Your Content
• HTML Code for Bullet Points
• Styling Bullet Points with CSS

Create a Child Theme

When making changes to your theme, it’s best to use a child theme. This way, if your theme gets updated, you don’t lose your changes. And so that’s what we’re going to be using for this tutorial (a child theme of the default Twenty Twelve WordPress theme). You can learn how to make a child theme here.

Note: Some more advanced themes might already have a special stylesheet incorporated into the theme for your customizations. If making a child theme doesn’t seem to work for you, you might seek out a solution online or with the theme author. If you’re having problems making a child theme with your particular theme, then others are probably having the same problems.

The Theme Bullet Points Style

The style of your bullet points is controlled by your theme. And so in order to change that style, you need to know how your theme references them in the stylesheet.

The style for your bullet points will be a subsection of the style of your main content. Many themes will probably classify the overall content as “entry-content.” In other words, they will create a “class” called “entry-content,” and then reference that name (entry-content) in the stylesheet.

But there’s also a chance that your theme may give it a different name, and so the first thing you should do is find out what “class”  your theme assigns to the content on a post.

Finding the Class Name of Your Content

In order to find the class name for your content, you can just go to a post that you’ve already published, and then look at the code for that page. You can do this by right-clicking on the page and then clicking “View Page Source” or “View source,” etc.

Next, pick the first few words from your post and search the code for those words. When you find them, you should also see some code not far above them that will tell you what class your theme has given to the content on the page.

I did this in the default Twenty Twelve theme, and I found the class to be “entry-content.” As mentioned, yours might be the same, but it might also be different. Look for the “class” tag inside of a div near the top of your content.

*Note: There’s a chance that your theme is a lot more complex than the above, and you may find several classes. If so, just keep trying each one until you find the one that works for you.

HTML Code for Bullet Points

A list of bullet points in WordPress is going to be created by using two different tags.

First there’s the <ul> tag. “UL” stands for “unordered list,” as opposed to <ol> — which stands for “ordered list.” An unordered list will not be numbered (it will have bullet points). An ordered list is a numbered list.

The next tag in a bullet list is the <li> tag. This stands for “list item.”

If you make a bullet list in your WordPress editor and then switch to the “Text” view, you can see these two tags in action.

Styling Bullet Points with CSS

OK, now on to the fun part – actually customizing your bullet lists. If you haven’t yet, remember to activate your child theme. Now you’ll need to go to the stylesheet in your child theme. (Appearance > Editor > Stylesheet – style.css)

Remember that in my theme the class for my content was named “entry-content.” And so that’s what I will be using in the examples below. If you found that your class was named something else, just substitute that in.

To begin with, let’s take a look at the default style for bullet lists in the Twenty Twelve theme. From there, we’ll gradually change things up.

Here’s the default look.

Changing the Font

We’ll start with something really simple. This will let you get an idea of how things get changed. We’re simply going to make the font bold with the following CSS.

.entry-content ul li{
 font-weight: bold;
 }

Here’s the result.

And for this first one, I’ll just show you what the stylesheet in my newly create child theme looks like.

Of course you can change the color too. As a dramatic example, we’ll change the list to bright green by adding “color: #00FF00;”

.entry-content ul li{
font-weight: bold;
color: #00FF00;
}

And here’s how it looks.

Add Different Styles

OK, now we’re going start change the bullets themselves. We’re going to change the filled in circles to empty circles by adding this bit of CSS code: list-style:circle;

My CSS code now looks like this:

.entry-content ul li{
 font-weight: bold;
 list-style:circle;
 }

And this is the result.

You can also change those empty circles to square by changing

list-style:circle;

to

list-style:square;

And here’s the result.

There is also the “disc” style, which is a filled in circle.

.entry-content ul li {
font-weight: bold;
list-style: disc;
}

There are other values that you can use with the “list-style” property, many of which apply to using number (ordered lists). You can find more info on those here.

Using Images as Bullet Points

You can also add images as your bullet points. The way to do that is to add the following line of CSS code:

list-style-image:url(url-of-your-image);

So, for example, if keeping the font bolded, your CSS code would look something like this:

.entry-content ul li{
 font-weight: bold;
 list-style-image:url(http://mysite.com/images/bullet-16x16.png);
 }

Here’s a look at an image that I uploaded. It looks pretty good, but you’ll notice that the alignment of the image is a little off. The images appear to be a little too high.

If that happens to you, you can take a different approach to using images. Instead of using the “list-style-image” property,  you can use the image as a background. That will allow you to then move the image around to get it looking right.

Because we’re using the image as a background, we’re going to need indicate that we don’t want a “normal” bullet point. In order to do that, we’re going to use “list-style-type: none;” in addition to the background CSS code.

The code I ended up putting into my CSS file looked something like the below. The 5px number is what I played with until it looked right. Of course your image probably won’t be off in exactly the same way mine was, so you’ll have to play with things  yourself until it looks right.

.entry-content ul li {
font-weight: bold;
list-style-type: none;
background: url(http://mysite.com/bullet-16x16.png) no-repeat 7px 5px;
margin: 0;
padding: 0px 0px 3px 35px;
vertical-align: middle;
}

And here’s the result.

Adding Unicode Characters

Something else you may want to try for bullet points is Unicode characters. Unicode characters are things like ❤ … ✈ … ✽.

As mentioned above, by putting in “list-style-type:none;” it removes the normal bullet point. And so that’s what you will need to do here. (Again, we don’t want the normal bullet points showing up. We’re going to replace those with a Unicode character.)

We’re also going to add a different property that will indicate that the character should go before the list item.

Here’s a look at using the  ∅ character as a bullet point.

.entry-content ul li {
list-style-type: none;
font-weight: bold;
}
.entry-content ul li:before {
content: "∅";
padding-right: 5px;
}

And here’s how it looks.

If you’d like to make the character a different color from the text, then just add the color property to the top section to change the text color, or add the color property to the bottom section to change the bullet point color. Or, of course, you can add color properties to both.

In this example, I’ve added the color property to both.

.entry-content ul li {
list-style-type: none;
font-weight: bold;
color: #2E89FF;
}
.entry-content ul li:before {
content: "∅";
padding-right: 5px;
color: #FFA62F;
}

And here’s the result.

As  you can see, you don’t use special code in your CSS file to get a Unicode character. Just copy the Unicode character itself and paste it into your CSS code.

You can find a list of these symbols here. That’s a long list, so here are a few of the more popular ones: arrows, box drawing, block elements, geometric shapes, miscellaneous symbols, and dingbats.

WPMU DEV’s Bullet Lists

And, finally, we’ll end with this. As you may have noticed, the bullet point lists here on WPMU have a light blue bullet point with a dark blue text. That’s created by separating the bullet point out from text as we did above with the Unicode characters.

The little blue box we use as a bullet point is created by creating a box with CSS (that’s the two 5px values you see below). While this isn’t exactly the way our code is set up in our stylesheet, the following below should give you the same effect.

.entry-content ul li {
padding-left: 30px;
color: #3D5365;
font-size: 90%;
position: relative;
list-style-type: none;
}
.entry-content ul li:before {
content: '';
position: absolute;
left: 10px;
top: 9px;
width: 5px;
height: 5px;
background-color: #7AA8CC;
}

And, of course, this is how it looks. (I’ll include an image here in case we change it, and you’re reading this at a later date.)

Time to Bite the Bullet

Do your bullet points look the way you want them to? If not, maybe it’s time to bite the bullet, dig into your stylesheet, and get them up to speed.

Photo credit: D. Sharon Pruitt