Different IDs For each WordPress Submenu?

3 Views

Does anyone know of a way to add a unique ID to each submenu wordpress Generates?
As of now, WP generates: 

<ul class="sub-menu"></ul>

Ideally, I’d like it to generate

Read More
<ul class="sub-menu" id="radio"></ul>

So that I can assign a different style to each sub menu generated via css.

Any help is appreciated.

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. This would require modifying your theme’s files. Which theme you use will determine how your elements are laid out. I would consider just using the nth-of-type css selector to style them.

    http://jsfiddle.net/yhcYY/

    ul:nth-of-type(1) { color: blue; }
ul:nth-of-type(2) { color: red; }
ul:nth-of-type(3) { color: green; }
ul:nth-of-type(4) { color: orange; }

    You should also consider asking this on http://wordpress.stackexchange.com which is better at WP theme development questions.

  2. when you are at the WP-Menu editor (Appearance > Menu) you go to the “Screen Options” located at the top upper right and click it and then check the “CSS Classes” option.

    Then you will see you can see a new field labeled CSS Classes. There you can add your class for your Menu.

    Hope this helps.

  3. This may not be the best way, but it did the trick for me..

    <script>
$(function(){
    var i =0;
 $('ul.sub-menu').addClass (function(idx) {

     return "item-" + idx;
 });
 });
 </script>

    It appends the class item-0, item-1, etc to each sub-menu it finds.

  4. The best way to get Uniuqe CSS around your sub menus would be to create a WordPress child theme that uses either the Twenty Ten Theme or Twenty Eleven Theme as your base theme.

    Each child theme will inherit all the magical code that the WordPress team has already created to do just what you want.