Support » Fixing WordPress » 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;

    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;

    LOL 🙂

    We just posted in the same time!

    Thanks!!!

    All the best –

    Peace and love

    Guy

    Wait a sec…

    Both don’t work 🙁

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

    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?

    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….

    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.

    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

    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.