each li with its own class – automatic…

  • billnanson

    (@billnanson)


    14 years, 10 months ago

    I assumed that this is easy, but 45 minutes of google and support forum searching has yielded zilch – so maybe not 😉

    I’m making a tabbed panel (easy-squeezy) containing lists of most recently updated articles, latest comments, news rss from another site etc. I’d like it to be even prettier by assigning a class to each ‘li’ so that I can have an image for each of the numbers 1-5 i.e. :
    <li class=”img1″>blah, blah
    <li class=”img2″>blah, blah
    <li class=”img3″>blah, blah etc…
    (I expect it would be UL rather than OL)

    CSS seems straight forward, but for wp/theme to automatically generate the classes I have no solution – a floral image to the first that can fix it!!!
    🙂
    Thanks

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

    (@esmi)

    14 years, 10 months ago

    Is the tabbed menu hardcoded or are you using template tags?

    Thread Starter billnanson

    (@billnanson)

    14 years, 10 months ago

    Hmm – makes a difference Esmi? I was hard coding, and just anticipating putting a nice formula in each of the OLs

    esmi

    (@esmi)

    14 years, 10 months ago

    Hardcoded should make it easier. Some of the template tags don’t wrangle so easily. If the link data was stored in a hardcoded array…

    <?php
$class='';
$tabs = array(
'/urlA/' => 'Recent Articles',
'/urlB/' => 'Latest Comments',
[...]
);
if(count($tabs) > 0) {
	echo '<ul>';
	foreach ($tabs as $url=>$tab_title) {
		$class .= str_replace(' ','-',strtolower($tab_title));
		echo '<li'.$class.'><a href="'.bloginfo('url').$url'">'.$tab_title.'</a></li>';
	}
	echo '</ul>';
}
?>

    That’s just in theory though. I’ve not tested it out but it should produce links like <li class="recent-articles"><a href="http://some_domain/urlA/">Recent Articles</a></li>.

    Depends on how you want to hardcode the link data really.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘each li with its own class – automatic…’ is closed to new replies.