WordPress.org

Ready to get started?Download WordPress

Forums

Custom class for my li (14 posts)

  1. oneguy
    Member
    Posted 2 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

  2. sangram.patra
    Member
    Posted 2 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;

  3. oneguy
    Member
    Posted 2 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;
  4. oneguy
    Member
    Posted 2 years ago #

    LOL :)

    We just posted in the same time!

    Thanks!!!

    All the best -

    Peace and love

    Guy

  5. oneguy
    Member
    Posted 2 years ago #

    Wait a sec...

    Both don't work :(

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

  6. oneguy
    Member
    Posted 2 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;
  7. lee@digitalacorn
    Member
    Posted 2 years ago #

    better answer below...

  8. lee@digitalacorn
    Member
    Posted 2 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;
    ?>
  9. lee@digitalacorn
    Member
    Posted 2 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?

  10. oneguy
    Member
    Posted 2 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....

  11. oneguy
    Member
    Posted 2 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

  12. lee@digitalacorn
    Member
    Posted 2 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.

  13. oneguy
    Member
    Posted 2 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

  14. lee@digitalacorn
    Member
    Posted 2 years ago #

    Wow! Looks amazing.

    Glad to be of help.

    Lee.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags