Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggreagtion Enquires Welcome

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.

CSS

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

1
.bm_cross ul {
2
    margin-left: 50px;
3
    list-style: none!important
4
}
5
 
6
.bm_cross ul li {
7
    list-style-type: none;
8
    padding: 5px 5px 5px 30px;
9
    background: #fff url('http://www.yourdomain.com/images/cross.png') no-repeat center left;
10
}
11
 
12
 
13
.bm_tick ul {
14
    margin-left: 50px;
15
    list-style: none!important
16
}
17
 
18
.bm_tick ul li {
19
    list-style-type: none;
20
    padding: 5px 5px 5px 30px;
21
    background: #fff url('http://www.yourdomain.com/images/tick.png') no-repeat center left;
22
}

Alter the margin and padding as required.

WordPress Shortcode

Copy and paste the following into your custom functions file.

1
<?php 
2
/*
3
    Styling WordPress Lists with CSS
4
    http://www.beliefmedia.com/wordpress-lists
5
*/
6
 
7
function beliefmedia_custom_list($atts, $content = null) {
8
 
9
  $atts = shortcode_atts(array(
10
    'type' => 'tick'
11
  ), $atts);
12
 
13
 return '<div class=&quot;bm_' . $atts['type'] . '&quot;>' . $content . '</div>';
14
}
15
add_shortcode('bmlist', 'beliefmedia_custom_list');

Usage

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

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

To render cross list items, use:

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

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

Download

Title: Styling WordPress Lists with CSS
Description: Styling WordPress Lists with CSS. Requires a custom functions and CSS file. Plugin forthcoming.
  Download • Version 0.2, 7.6K, zip, Category: WordPress Shortcodes

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

READY TO HAVE A CHAT? CALL US ANYTIME ON 1300 235 433