Home Blog Styling WordPress Lists with CSS

Styling WordPress Lists with CSS


If you’re in business, the generic bullet-style of list is a little bland. Thankfully, styling lists in WordPress is easy. Instead of using the boring dot or hyphen provided by a default WordPress installation (or via your theme) you can style the list icon to be anything you like.

This is what a standard list looks like (on our site, anyhow).

  • The list is boring.
  • There’s no icon to convey a message.
  • It has no personality.

A Styled List

A styled list looks like this:

  • It has personality.
  • It is different…
  • It conveys a message.

… or if you wanted to go the other way and show a cross.

  • This is a list of bad things.
  • Makes it clear that it’s something you shouldn’t do.

In our case, we might use a small BM icon to represent company lists (it’s the same as our tired favicon).

  • The BM icon makes it clear that it’s a BeliefMedia list.
  • You could use icons that represent the type of list you’re making.

To prove a point, you can put anything you like as an icon in a list.

  • Since we do a lot of work in the aviation field…
  • … an aircraft icon or two might be used.

The Code

You will have to modify two files; your functions.php file (or if you have it installed, your custom-functions.php file), and your custom.css file. If you’ve downloaded our custom plugin plugin this whole process is going to be a piece of cake.


Copy and paste the following into custom.css. Alter the URL to reflect the location of your own images.

Alter the margin and padding as required.

WordPress Shortcode

Copy and paste the following into your custom functions file.


To style the list, wrap your list in the appropriate shortcode. To render tick list items, use:

[bmlist type="tick"]
<li>This is item one</li>
<li>This is item two</li>
<li>This is item three</li>

To render cross list items, use:

[bmlist type="cross"]
<li>This is item one</li>
<li>This is item two</li>
<li>This is item three</li>

The code can easily be modified to include whatever icon you like, and create unlimited types of lists.


Title: Styling WordPress Lists with CSS
Description: Styling WordPress Lists with CSS. Requires a custom functions and CSS file. Plugin forthcoming.
Download: Shortcode (V0.2) | Plugin Page

■ ■ ■

Interested in WordPress and Web Design? Subscribe to our list and we'll send you subscriber-only tools and plugins

Short URL for this post: http://shor.tt/Jnn


Please enter your comment!
Please enter your name here