Languages: English • 한국어 • (Add your language)

When presenting lists of things, WordPress uses standard XHTML elements:

• <ol> for an Ordered List (where the order of items is important, so items are numbered)
• <ul> for an Unordered List (normally shown as items with bullets)
• <li> for each item in a list, ordered or unordered.

By default, most lists (and some list items) in WordPress are identified by id or class attributes, making styling lists easy. With fairly simple changes to the style.css file, you can display the list horizontally instead of vertically, feature dynamic menu highlighting, change the bullet or numbering style, remove the bullets altogether, or any combination of these.

Nested Lists Layout

Different Themes format lists in different ways. The most common lists users often want to modify in WordPress are the sidebar menu lists. Since many sidebars feature nested lists, let's look at those in more depth.

Begin by examining the style.css file found within the Theme's folder you are using. Most WordPress Themes label their sidebar menu section with the words sidebar, menu, or a combination of both. So, look for the sidebar Template file, typically called sidebar.php. This is a sample sidebar.php layout; your version may be different, but the concept will be the same.

<div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div>

When you are working with nested lists and you want an individual style for each list, you have to recreate the "nest" in the stylesheet (style.css).

#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}

ul 

The first style (#sidebar ul) sets the look for the overall list. It usually contains the margins and padding styles and may contain the font-family, color, and other details for the overall list.

li 

The #sidebar li assigns a style to the actual list item. Here you can set the format to include a bullet or not. You can also change the font, font-size, or color, and you can even add borders.

ul li 

The #sidebar ul li determines the style of the first nested list. Each first level nested list will be customized here, but you can style each of these sub-lists differently if they are contained within a specific CSS ID. In the above example, after the #search section, the first nested list is #pagenav. If you use Pages this is where the list of Pages would be generated. Since Pages work outside of The WordPress Loop, and often highlight specific information like "About Us", "Contact", and "Site Map", you may want to design the Pages style differently than the rest of your lists by putting the specific information about the look of the Pages in the #pagenav.

ul ul li 

The #sidebar ul ul li applies style to the links within the #sidebar ul ul to help customize the look of this list. Again, if you have customized the #pagenav list, it will be different from the rest of your nested list items.

ul ul ul li 

The #sidebar ul ul ul li is the style for the sub-sub-list. If you have a list of categories with subcategories, the category title will be the first level of the list, the categories would be the second level of the list, and any subcategories would be the third level, or sub-sub-list, such as the example below. Some designers like having the third level list feature a smaller font, a different bullet, or even a different color to highlight them from the list items above them:

• Category Title
  • Category One
  • Category Two
    • Sub-Category One
    • Sub-Category Two
  • Category Three

Styling Specific List Items

Do you want your Categories List to look different from your Archives List? Then open up the index.php or sidebar.php and carefully add the following style references to the appropriate list item:

To customize the Categories and Archives list, add the following to your stylesheet to customize these individually:

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

Go through any other sections of your list and give them a style reference name and add them to your style sheet. When you've identified which part of the list controls which aspect of the list, it's time to start changing the look of the list.

Styling individual items

If you want to use image replacement techniques to style your list, each <li> tag will need its own class or ID. Try the Classy wp_list_pages plugin.

Styling Your Lists

An important part of a list is the bullet - an eye catching dot, spot, or graphic that tells viewers "this is a list". The style of bullet or numbering for a list is determined by a list-style-type property in the style sheet. The default value is disc. Other basic values are circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, and none. Let's change the default value to something else, like a square.

#sidebar li {
   list-style: square;
}

Instead of typing list-style-type, you see a shorthand form of list-style, and instead of using the default disc, the list now features small squares.

But not all lists need bullets. By their overall layout, you just know a list is a list. To eliminate the bullet, change the stylesheet to this:

#sidebar li {
   list-style: none;
}

Now, anything tagged with <li>, within the DIV of the ID of #sidebar, would have no bullet. Experiment with different values to see the results you can achieve.

HINT: In terms of accessibility, an ordered list is easier to navigate than an unordered list.

Using a Custom Image Instead of a Bullet

Tired of boring bullets? Let's get rid of the boring with a few CSS techniques. In this case, use list-style-image to instruct the browser to use your bullet image instead of the old boring default bullets.

Find some interesting bullet graphics and add the following code in your style sheet to add some jazzy bullets to your lists:

#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }

Note that you could also use an absolute link rather than a relative link. Simply change the url(/wp-images/image.gif ) to url(http://example.com/wp-images/image.gif).

Adding a Border to Your List

To add a border, like an underline, after your title, you can simply add a border style to the top of the <ul> under the title, rather than on the title itself.

#sidebar ul ul {...; border-top: solid 1px blue; ....}

Go a step further and add a whole box around your list with the title sitting atop it:

#sidebar ul ul {...; border: solid 1px blue; ....}

Add a colored background to your list along with its new border:

#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}

And your end result would look like this:

Or really expand the possibilities to something like this:

You can have a lot of fun with your list bullets and list layouts. If you are having trouble with your bullets and lists, check out the resources listed below and then visit the WordPress support forums to get more help.

Troubleshooting Nested Lists

If you are having trouble with your nested lists, the following might provide the solution. Also check CSS Troubleshooting for more styling help issues.

Improper Tag Structure

The number one cause of errors or non-validation within a nested list is the lack of proper list structure. Here is a very simplified and correct nested list layout. Note that when a (new) nested list begins, the <li> tag of the current list item is not closed yet. It is left open until the nested list is completed, and then closed.

<ul>
   <li>Category One</li>
   <li>Category Two     <----Note: No Closing List Tag
      <ul>
          <li>Sub-Category One</li>
          <li>Sub-Category Two     <----Note: No Closing List Tag
              <ul>
                 <li>Sub-Sub-Category One</li>
                 <li>Sub-Sub-Category Two</li>     <----Note: Closing List Tag
              </ul></li>           <----Note: Nested List Closed
           <li>Sub-Category Three</li>
      </ul></li>       <----Note: Nested List Closed
    <li>Category Three</li>
</ul>      <----Note: End of entire list

Template Tag Lists

Different Template Tags used for displaying lists have different ways of using and relying upon HTML list tags. Some template tags automatically include the <ul> and <li> tags so all you have to do is include the tag in the list by itself and it will do all the work. Other tags require the <ul> to be in place followed by the template tag and it generates its own <li> tags. Other template tags require designating which type of list tags are needed or use none at all if not listed in the tag's parameters.

If you are having trouble with your nested lists when using template tags like wp_list_cats or wp_list_pages, check their parameters to see how they use the list tags and compare it with your usage.

Parent/Child Relationships

Discussed in The CSS Parent and Child Relationship, lists are one of the big culprits. Styles in the child list items are influenced by its "parents". If the parent's list style features the color "red" and you want the children to be in "blue", then you need to specify the color in the children's list styles to be "blue" so they will override the parent's style

Nested lists within the WordPress Sidebar typically contain links. Therefore, while you can style the list as much as you want, the style for links will override the list style. You can control the way the links in the list work by giving them a specific style class of their own, including their hover attributes:

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}

Resources

• Creating Horizontal Menus
• Dynamic Menu Highlighting
• Customizing Your Sidebar
• Site Architecture 1.5
• Stepping Into Template Tags
• W3.org's CSS-2 - Generated Content, Automatic Numbering, and Lists