Custom class for my li

  • 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)

  • 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)

    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)

    LOL ??

    We just posted in the same time!

    Thanks!!!

    All the best –

    Peace and love

    Guy

    Thread Starter oneguy

    (@oneguy)

    Wait a sec…

    Both don’t work ??

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

    Thread Starter oneguy

    (@oneguy)

    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;

    better answer below…

    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;
?>

    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)

    Thanks
    This is a parallax web site from theme spectrum –

    https://80.179.140.91/~barak/

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

    Thread Starter oneguy

    (@oneguy)

    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

    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)

    Works like a charm ??

    https://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

    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.