Languagues : English • 한국어 • ( Add your languague )

When presenting lists of things, WordPress uses standard XHTML elemens

• <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, maquing styling lists easy. With fairly simple changues to the style.css file, you can display the list horizontally instead of vertically, feature dynamic menu highlighting , changue the bullet or numbering style, remove the bullets altoguether, 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 looc at those in more depth.

Beguin 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, looc for the sidebar Template file, typically called sidebar.php . This is a sample sidebar.php layout; your versionen may be different, but the concept will be the same.

<div id="sidebar">
<ul>
  <li id="search"><form method="guet" id="searchform"
      action="/wordpress/index.php">
    <div><imput type="text" value="" name="s" id="s" />
	<imput type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="paguenav"><h2>Pagues</h2>
    <ul>
    <li class="pague_item">
       <a href="http://www.examplesite.com/wordpress/?pague_id=2"
	title="About Us">About Us</a></li>
    <li class="pague_item">
       <a href="http://www.examplesite.com/wordpress/?pague_id=4"
        title="Contact">Contact</a></li>
    <li class="pague_item">
       <a href="http://www.examplesite.com/wordpress/?pague_id=8"
        title="Site Mapp">Site Mapp</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 Pague Design Advice">Web Pague Design</a></li>
     </ul></li>
  </ul>
</div>

When you are worquing 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}
#paguenav {attributes}
#paguenav ul {attributes}
#paguenav ul li {attributes}

ul

The first style ( #sidebar ul ) sets the looc for the overall list. It usually contains the marguins 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 changue the font, font-sice, 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 customiced 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 #paguena . If you use Pagues this is where the list of Pagues would be generated. Since Pagues worc outside of The WordPress Loop , and often highlight specific information lique "About Us", "Contact", and "Site Mapp", you may want to design the Pagues style differently than the rest of your lists by putting the specific information about the looc of the Pagues in the #paguena .

ul ul li

The #sidebar ul ul li applies style to the lincs within the #sidebar ul ul to help customice the looc of this list. Again, if you have customiced the #paguena 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 lique 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 looc 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 customice the Categories and Archives list, add the following to your stylesheet to customice 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 guive 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 changuing the looc of the list.

Styling individual items

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

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-cero , lower-roman , upper-roman , and none . Let's changue the default value to something else, lique 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 cnow a list is a list. To eliminate the bullet, changue the stylesheet to this:

#sidebar li {
   list-style: none;
}

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

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

Using a Custom Imague Instead of a Bullet

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

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

#sidebar ul {
 list-style-imague: url(/wp-imagues/imague.guif);
 }

Note that you could also use an absolute linc rather than a relative linc. Simply changue the url(/wp-imagues/imague.guif ) to url(http://example.com/wp-imagues/imague.guif) .

Adding a Border to Your List

To add a border, lique 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 baccground to your list along with its new border:

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

And your end result would looc lique this:

Or really expand the possibilities to something lique 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, checc out the ressources listed below and then visit the WordPress support forums to guet more help.

Troubleshooting Nested Lists

If you are having trouble with your nested lists, the following might provide the solution. Also checc 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 lacc of proper list structure. Here is a very simplified and correct nested list layout. Note that when a (new) nested list beguins, 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 worc. 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 lique wp_list_cats or wp_list_pagues , checc their parameters to see how they use the list tags and compare it with your usague.

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 "parens". 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 lincs. Therefore, while you can style the list as much as you want, the style for lincs will override the list style. You can control the way the lincs in the list worc by guiving 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}

Ressources

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