How To Customize Unordered Lists Style Type

In this simple tutorial for beginners, i’ll show you how easy it is to change the styling of your unordered lists.

If you’re a complete newbie, let me first explain the difference between ordered (numbered) & unordered lists.

WordPress offer 2 ways to create lists using 2 simple features in the editor which look like this:

By default, most themes simply insert a small block or small circle next to each unordered list.

Looks something like this:

I’ll show you how to change that to something like this:

Style Sheet

By editing some of the CSS code in your child themes style.css file, you can customize the background and styling.

Once you open your style.css file, scroll down to the section which looks something like this:

/* Ordered / Unordered Lists
———————————————————— */

Underneath you’ll find the code which needs to be edited.

To change the default block style of unordered lists to an image, change the code to something like this:

.archive-page ul li,
.entry-content ul li {
background: url(images/list.png) no-repeat 0 12px;
list-style-type: none;
margin: 0 0 0 20px;
padding: 5px 0 5px 20px;
word-wrap: break-word;
text-shadow: 1px 1px #fff;

}

You’ll also need to upload an image to your child themes images folder on your server.

This is the image i use on this sites unordered lists.

You could also use this image or find one on icon-finder.com

Here’s the style.css file which i edited in my child theme.

That’s all for now folks.

If you’d like more simple tutorials on how to customize the appearance of WordPress, sign up for email updates.