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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.bm_cross ul { margin-left: 50px; list-style: none!important } .bm_cross ul li { list-style-type: none; padding: 5px 5px 5px 30px; background: #fff url('http://www.yourdomain.com/images/cross.png') no-repeat center left; } .bm_tick ul { margin-left: 50px; list-style: none!important } .bm_tick ul li { list-style-type: none; padding: 5px 5px 5px 30px; background: #fff url('http://www.yourdomain.com/images/tick.png') no-repeat center left; } |
Alter the margin and padding as required.
WordPress Shortcode
Copy and paste the following into your custom functions file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Styling WordPress Lists with CSS http://www.beliefmedia.com/wordpress-lists */ function beliefmedia_custom_list($atts, $content = null) { $atts = shortcode_atts(array( 'type' => 'tick' ), $atts); return '<div class="bm_' . $atts['type'] . '">' . $content . '</div>'; } 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
Short URL for this post: http://shor.tt/Jnn
