Custom class for my li

  • oneguy

    (@oneguy)


    14 years ago

    Hi There

    I have downloaded a theme that uses this code to produce the links for my main nav – 

    <?php $i = 1; while ( have_posts() ) : the_post();
    echo '<li><a href="#block';?><?php echo $i; ?> <?php $i++; ?> <?php echo '" title="'; ?> <?php the_title(); ?> <?php echo '">';
	the_title();
	echo '</a></li>';
	?>
<?php endwhile;

    I wish to add the variable $i to the li class so I get different class for each li, or really any other variable that will help me style each one of them differently.

    How can I do that?

    I tried so many variations so far….

    Thanks 🙂

    Guy

Viewing 13 replies - 1 through 13 (of 13 total)
  • sangram.patra

    (@sangrampatra)

    14 years ago

    hi oneguy !!!!!!!

    Use this as your requirement

    <?php $i = 1; while ( have_posts() ) : the_post();
    echo ‘<li class=”my_li_class_.’$i.'”><?php echo $i; ?> <?php $i++; ?> <?php echo ‘” title=”‘; ?> <?php the_title(); ?> <?php echo ‘”>’;
    the_title();
    echo ‘    ‘;
    ?>
    <?php endwhile;

    Thread Starter oneguy

    (@oneguy)

    14 years ago

    Solved 🙂

    <?php $i = 1; while ( have_posts() ) : the_post(); 

    echo '<li class="home';?><?php echo $i; ?>"<a href="#block';?><?php echo $i; ?> <?php $i++; ?> <?php echo '" title="'; ?> <?php the_title(); ?> <?php echo '">';the_title();
	echo'</a></li>';
	?>
<?php endwhile;
    Thread Starter oneguy

    (@oneguy)

    14 years ago

    LOL 🙂

    We just posted in the same time!

    Thanks!!!

    All the best –

    Peace and love

    Guy

    Thread Starter oneguy

    (@oneguy)

    14 years ago

    Wait a sec…

    Both don’t work 🙁

    Yours don’t have the A href part….
    Mine just doesn’t work…

    Thread Starter oneguy

    (@oneguy)

    14 years ago

    I think this one does the trick – 

    <?php $i = 1; while ( have_posts() ) : the_post();
	echo '<li class="block';?><?php echo $i; ?><?php $i++; ?><?php echo '">';
	echo '
	<a href="#block';?><?php echo $i; ?> <?php $i++; ?> <?php echo '" title="'; ?> <?php the_title(); ?> <?php echo '">';
	the_title();
	echo '</a>

	</li>';
	?>
<?php endwhile;
    lee@digitalacorn

    (@leedigitalacorn)

    14 years ago

    better answer below…

    lee@digitalacorn

    (@leedigitalacorn)

    14 years ago

    better…

    <?php
$i = 1;
while ( have_posts() ) : the_post();
    echo "<li class=\"block-" . $i . "\"><a href=\"get_permalink()\" title=\"" . get_the_title() . "\">" . get_the_title() . "</a></li>";
$i++;
endwhile;
?>
    lee@digitalacorn

    (@leedigitalacorn)

    14 years ago

    or exactly as your code is…

    <?php
$i = 1;
while ( have_posts() ) : the_post();
    echo "<li class=\"block-" . $i . "\"><a href=\"#block-" . $i . "\" title=\"" . get_the_title() . "\">" . get_the_title() . "</a></li>";
$i++;
endwhile;
?>

    Are you linking to anchor or something?

    Thread Starter oneguy

    (@oneguy)

    14 years ago

    Thanks
    This is a parallax web site from theme spectrum –

    http://80.179.140.91/~barak/

    It’s not yet done. just started working on it….

    Thread Starter oneguy

    (@oneguy)

    14 years ago

    Thanks –
    Your code rocks!
    But now I have another enigma –
    Considering the face that they are leading to anchors –
    Is there a way to add an active class as well for each link being pressed?
    If that’s not possible or too much, tell me…

    Thanks 🙂

    Guy

    lee@digitalacorn

    (@leedigitalacorn)

    14 years ago

    it is (like everything) possible.

    Change the code I gave you to this..

    <?php
$i = 1;
while ( have_posts() ) : the_post();
    echo "<li class=\"blocks block-" . $i . "\"><a class=\"block_link\" href=\"#block-" . $i . "\" title=\"" . get_the_title() . "\">" . get_the_title() . "</a></li>";
$i++;
endwhile;
?>

    Then add this jquery to (preferably) the head of your page…

    <script type="text/javascript">
$(document).ready(function(){
$("a.block_link").click(function(){
   $("a.block_link.active").removeClass("active");
   $(this).addClass("active");
});
})
</script>

    then you can style the active links with a.block_link.active {}

    Something like that I can not/have not tested it.

    Let me know if it works – if it does not work, link me to a page where you have it and I will have a look.

    PS. I have added n extra class to the li’s so you can style all of them with the main class .blocks and individually style the .block-1 or .block-2 li’s

    Lee.

    Thread Starter oneguy

    (@oneguy)

    14 years ago

    Works like a charm 🙂

    http://80.179.140.91/~barak/

    Just watch this theme!!!
    Still missing all the background images but I think you can get the feel of it!

    Thank you ever so much.

    It’s so good to be smart 🙂

    Thanks again

    Guy

    lee@digitalacorn

    (@leedigitalacorn)

    14 years ago

    Wow! Looks amazing.

    Glad to be of help.

    Lee.

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

The topic ‘Custom class for my li’ is closed to new replies.