We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 28353
    • 28 Posts
    hey Guys,

    How do i add a different class and a different id to my li’s in the wayfinder template? how would you specifiy that?

    <ul="primaryNav">
    <li id="id1" class="class1"></li>
    <li id="id2" class="class2"></li>
    <li id="id3" class="class3"></li>
    </ul>

    Thanks,
      • 16183
      • 1,390 Posts
      Hi stalwil

      I have no idea why you want unique classes alongside ids for your lis but here goes.

      Options for the ul class

      1. You can use the parameter outerClass=`primaryNav` in your WF call and remember to use the [+wf.classes+] placeholder in your outerTpl

      or

      2. You can add the class directly to your outerTpl

      <ul class="primaryNav">[+wf.wrapper+]</ul>


      If you want ul id instead

      Add the id directly to your outerTpl

      <ul id="primaryNav">[+wf.wrapper+]</ul>


      For the li id

      Use the rowIdPrefix parameter in conjunction with the [+wf.id+] placeholder

      For the unique li classes

      There’s no single parameter for this but we can "trick" WF to help us. There’s several ways to do this. Here’s one solution (tested and working) - the ids are not sequential though:

      Create a rowTpl with the following code:

      <li [+wf.id+] class="nav[+wf.docid+]" >
      <a href="[+wf.link+]" title="[+wf.title+]" >[+wf.linktext+]</a>
      [+wf.wrapper+]
      </li>
      


      Note:

      1. The [+wf.id+] is for the unique li ids

      2. There shouldn’t be a space between "nav" and "[+wf.docid+]"

      3. [+wf.docid+] outputs the document identifier for each respective menu item

      The above rowTpl will make WF output lis similar to:
      <li  id="menu48" class="nav48" >
      <a href="http://localhost/modxtests/" title="Home" >Home</a>
      </li>
      <li  id="menu49" class="nav49" >
      <a href="/modxtests/corporate.html" title="Corporate Branding" >
      Corporate Branding</a>
      </li>
      


      The ids in the lis, e.g. id="menu48" are coming from [+wf.id+] and the rowIdPrefix I told WF to use.

      There’s probably an easier way of doing this in the new WF Beta 2.5

      You probably want to check out this site (if you haven’t done so yet): http://www.muddydogpaws.com/development/wayfinder/parameters.html

      See my signature too for a WF e-book

      cheers/k