Add class to wp_list_pages

  • Resolved Matt

    (@webmasterifcj)


    16 years, 3 months ago

    Hello guys,

    Wanted to know if someone can help me out on this problem.

    I have a series of unordered lists and among them I am calling a series of page titles. Here let me include my code:

    <?php if(is_page()){ ?>
  <div id="subnav">
    <ul id="bullets">
      <li><a href="http://www.ifcj.org/site/PageNavigator/sfi_about" class="about"><span>About Israel</span></a></li>
      <li><a href="http://www.ifcj.org/site/PageNavigator/sfi_news" class="news"><span>News & Blog</span></a></li>
      <li class="current_page_ancestor"><a href="http://www.ifcj.org/site/PageNavigator/sfi_issues" class="issues"><span>Issues</span></a>
        <ul id="bullets2">
        	<?php wp_list_pages("orderby=name&order=ASC&child_of=205&title_li="); ?>
        </ul>
      </li>
      <li><a href="http://www.ifcj.org/site/PageNavigator/sfi_takeaction" class="takeaction"><span>Take Action Now</span></a></li>
    </ul>
  </div>
<?php } else { ?>

    What I would like to do is add a class of “active_page” to the links that get generated by : <?php wp_list_pages("orderby=name&order=ASC&child_of=205&title_li="); ?>

    I have tried jQuery but for some reason the class does not get applied to the a tag.

    This is my jQuery code.

    $("ul#bullets2 li.current_page_item a").addClass("active_page");

    Anyone have any other ideas as to how I can do this.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • xdesi

    (@xdesi)

    16 years, 3 months ago

    Why do you not just style .current_page_item?

    Can you post up the HTML Source that’s produced from your wp_list_pages so we can check the jQuery

    Thread Starter Matt

    (@webmasterifcj)

    16 years, 3 months ago

    <div id="subnav">
    <ul id="bullets">
      <li><a href="mysite/site/PageNavigator/sfi_about" class="about"><span>About Israel</span></a></li>
      <li><a href="mysite/site/PageNavigator/sfi_news" class="news"><span>News & Blog</span></a></li>
      <li class="current_page_ancestor"><a href="mysite/site/PageNavigator/sfi_issues" class="issues"><span>Issues</span></a>
        <ul id="bullets2">
        	<li class="page_item page-item-211 current_page_item"><a href="mysite/issues/peace-keeping" title="Peacekeeping">Peacekeeping</a>
<ul>
	<li class="page_item page-item-177"><a href="mysite/issues/peace-keeping/first-lebanon-war" title="First Lebanon War">First Lebanon War</a></li>
	<li class="page_item page-item-162"><a href="mysite/issues/peace-keeping/intifada-ii-the-oslo-war" title="Intifada II: “The Oslo War”">Intifada II: “The Oslo War”</a></li>
	<li class="page_item page-item-186"><a href="mysite/issues/peace-keeping/oslo-accords" title="Oslo Accords">Oslo Accords</a></li>
	<li class="page_item page-item-195"><a href="mysite/issues/peace-keeping/road-map-for-peace" title="Road Map for Peace">Road Map for Peace</a></li>
	<li class="page_item page-item-159"><a href="mysite/issues/peace-keeping/the-first-intifada" title="The First Intifada">The First Intifada</a></li>
</ul>
</li>
<li class="page_item page-item-213"><a href="mysite/issues/security" title="Security and Identity">Security and Identity</a>
<ul>
	<li class="page_item page-item-156"><a href="mysite/issues/security/border-conflict" title="Border Conflict">Border Conflict</a></li>
	<li class="page_item page-item-174"><a href="mysite/issues/security/jerusalem-israels-capital" title="Jerusalem: Israel’s Capital">Jerusalem: Israel’s Capital</a></li>
	<li class="page_item page-item-91"><a href="mysite/issues/security/persecution-of-christians-in-the-middle-east" title="Persecution of Christians in the Middle East">Persecution of Christians in the Middle East</a></li>
	<li class="page_item page-item-74"><a href="mysite/issues/security/the-fence" title="The Fence">The Fence</a>
	<ul>
		<li class="page_item page-item-767"><a href="mysite/issues/security/the-fence/five-fence-myths" title="Five Myths About Israel’s Security Fence">Five Myths About Israel’s Security Fence</a></li>
	</ul>
</li>
	<li class="page_item page-item-201"><a href="mysite/issues/security/water-is-the-new-oil" title="Water is the New Oil">Water is the New Oil</a></li>
</ul>
</li>
<li class="page_item page-item-209"><a href="mysite/issues/terrorism" title="Terrorism">Terrorism</a>
<ul>
	<li class="page_item page-item-152"><a href="mysite/issues/terrorism/asymmetrical-warfare" title="Asymmetrical Warfare">Asymmetrical Warfare</a></li>
	<li class="page_item page-item-783"><a href="mysite/issues/terrorism/gilad-shalit" title="Gilad Shalit">Gilad Shalit</a></li>
	<li class="page_item page-item-168"><a href="mysite/issues/terrorism/hamas" title="Hamas">Hamas</a></li>
	<li class="page_item page-item-171"><a href="mysite/issues/terrorism/hezbollah" title="Hezbollah">Hezbollah</a></li>
	<li class="page_item page-item-86"><a href="mysite/issues/terrorism/iran" title="Iran">Iran</a>
	<ul>
		<li class="page_item page-item-336"><a href="mysite/issues/terrorism/iran/iranian-calls-for-israels-destruction" title="Iranian calls for Israel’s destruction">Iranian calls for Israel’s destruction</a></li>
		<li class="page_item page-item-332"><a href="mysite/issues/terrorism/iran/iran" title="Proxy Wars">Proxy Wars</a></li>
	</ul>
</li>
	<li class="page_item page-item-189"><a href="mysite/issues/terrorism/the-palestinian-authority" title="The Palestinian Authority">The Palestinian Authority</a></li>
</ul>
</li>
<li class="page_item page-item-207"><a href="mysite/issues/world-opinion" title="World Opinion">World Opinion</a>
<ul>
	<li class="page_item page-item-80"><a href="mysite/issues/world-opinion/apartheid" title="“Apartheid”">“Apartheid”</a></li>
	<li class="page_item page-item-84"><a href="mysite/issues/world-opinion/durban-ii" title="Durban">Durban</a></li>
	<li class="page_item page-item-192"><a href="mysite/issues/world-opinion/pan-arabism" title="Pan-Arabism">Pan-Arabism</a></li>
	<li class="page_item page-item-198"><a href="mysite/issues/world-opinion/settlements" title="Settlements">Settlements</a></li>
</ul>
</li>
        </ul>
      </li>
      <li><a href="http://mysite/sfi_takeaction" class="takeaction"><span>Take Action Now</span></a></li>
    </ul>
  </div>

    Here is the jQuery that I have:

    $("ul#bullets2 li.current_page_item a").addClass("active_page");

    Thread Starter Matt

    (@webmasterifcj)

    16 years, 3 months ago

    The problem is that in IE7 when “Peacekeeping” is selected all other

    • tags are getting the styled applied to them.

      • By style if mean the list-style of an image when that particular link is the active link.

      I fixed this before by placing a class on the actual link but for some reason its not allowing me to.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Add class to wp_list_pages’ is closed to new replies.