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.
Alter the margin and padding as required.
WordPress Shortcode
Copy and paste the following into your custom functions file.
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.
