Grow your CSS skills. Land your dream job.

Last updated on:

List Posts, Highlight Current

WordPress lacks a wp_list_posts() function that might seem logical go with the robust and useful wp_list_pages() function. You can simulate it though, by using the get_posts() function and running your own loop through the results.

The parameters for get_posts() below are just examples, replace with your needs.

<ul>

    <?php
        $lastposts = get_posts('numberposts=5&orderby=rand&cat=-52');
        foreach($lastposts as $post) :
        setup_postdata($post); ?>

        <li<?php if ( $post->ID == $wp_query->post->ID ) { echo ' class="current"'; } else {} ?>>
            
            <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
            
        </li>

    <?php endforeach; ?>

</ul>

wp_list_pages() also has the feature of adding a class name of "current_page_item" to the list element when that page is the active one. Notice the opening list tag above, which replicates that functionality by seeing if the ID from the current query matches the ID from the current iteration of the loop.

Comments

  1. Martin

    I was receiving an error when I pasted this code into one of my templates.

    Replacing:
    { echo " class="current""; }

    with:
    { echo ' class="current"'; }

    has resolved the problem.

  2. Permalink to comment#

    Just what I needed for a website I am working on right now.

    Thanks!

    And thanks Martin for saving my time looking for the reason why it didn’t work at first :P

  3. Tom Bosch
    Permalink to comment#

    Thnx!!! After days of searching, found this code!

  4. Permalink to comment#

    Thank you!!! Lifesaving snippet!

  5. Thank you !!! save me !!

  6. Permalink to comment#

    Thanks for this! I’m wondering how to modify so that only the most recent posts from a particular category would be listed.

    thanks!

  7. Willem
    Permalink to comment#

    When i display a list with this technique on my homepage, the photoviewer and addThis-plugin content, from a post in the list, is displayed as well. How do i prevent this behavior? I only want to display the title…

  8. Permalink to comment#

    Thats what i was looking for! Thanks for sharing!

  9. Permalink to comment#

    Very useful post. Thanks. I’m using it at several sites now.

  10. YES! YES! YES!!!! Thank you again Mr. Coyier! Code worked like a charm!

  11. Permalink to comment#

    Thank you for this information, I was actually looking for this piece of code for my theme. I will test this.

  12. Permalink to comment#

    Thanks for sharing this. How would you apply this to a list of archives?
    I have am using this
    <?php wp_get_archives(); ?>
    in the sidebar.php. , but this codex already includes the li tags. So how do you get the class=”current” in there? Thanks for any help.

  13. Permalink to comment#

    Hi!

    Thanks for this post, but I have one problem with it. I do not get the links to work! Seems like the get_permatlink() doenst do what it should.

    I want to make a meny that lists all the posts, that what I am trying to use this code for.

  14. Permalink to comment#

    Hey guys!

    Do you know how to set the current post to always be the first? I’m making an encyclopedia web-site and the posts are listed in the content order, so I want the first post always to be highlighted first when the page loads. Any suggestions?

    • Hi Dmitry…

      Don’t really understand your question but if you are talking about making the recent post show first on the archive page the simply change in the above code

      $lastposts = get_posts('numberposts=5&orderby=rand&cat=-52');
      $lastposts = get_posts('numberposts=5&orderby=date&cat=-52');
      

      Noticed I changed the rand to date.

      Hope this will help

  15. Thanks For sharing this useful trick… I really was searching for a way to get the list of all my post on a page as an archive. I even ignorantly tried wp-list-posts() but got errors but your code works perfectly and I’m able to tweak it to my own taste also.

    Thanks

  16. erik
    Permalink to comment#

    Hi,

    Thanx for your snippet!!! It works great, accept for one thing.
    I use it in my template, in the footer, to show a list of the last 5 posts. When clicking on it, it shows the post and applies the class current (and highlights it accordingly) so far so good.

    But on my 404 page, it goes wrong.
    Somehow it finds that the $post->ID equals the $wp_query->post->ID and applies the class current to one title in my list of posts.

    I think i know a part of the puzzle. I changed the permalinkstructure. With the standard structure, everything works fine as expected.
    But when i change it to: /recent-projcts/%postname%/ it goes wrong…

    Unfortunately, my knowledge of php is Insufficient, so i can’t figure this one out…
    Any suggestions are more then welcome!
    Erik

  17. This loop on my menu in home page active last post from products loop

  18. Wondering if it is possible to have this working with the http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html ajax loading style post template? My client would like both functionalities, I can get this working on Single post pages but when new page is loaded the current class is not affected! Help!

  19. your website is awesome in one word. but if you provide the screenshot with your codes then we can see the results that what is happening. there are many people who do not know many CSS, PHP, HTML related words.please keep that in mind which will be helpful for me and my type of people.

  20. Umm Exaclty get what i am searching.
    Thanks for the useful code.

  21. Andrew
    Permalink to comment#

    This was very helpful.

  22. Permalink to comment#

    A trick for the last wordpress version…
    Thank you for the snippet and keep up the good work!

  23. darja
    Permalink to comment#

    Very useful snippet, thank you very much!
    But I have a question: is it possible to make this query category-independent?
    what I mean: I have several categories (for example, 10) and for each single post in every different category I’d like to use this query. And I don’t want to create 10 queries, I want to create only 1, smart enough to show posts (and highlight current!) just from the category this post belongs.
    I’m sure it is possible, but I have no idea how to make it. Thank you!

  24. Permalink to comment#

    Hi,
    I am finding a wordpress plugin which helps me to convert a keyword to a image. For example: i have keyword “Rapidshare” in many posts, i want “Rapidshare” keyword will display as Rapidshare logo image. Please help me to do…

    Thanks so much !

  25. Peter
    Permalink to comment#

    Cheers. Worked grate! Looking for this for quit a while today.

  26. Fast and clean!

  27. Alexxali
    Permalink to comment#

    I’ve read Codex but still don’t understand what does setup_postdata() mean? Can someone explain, please?

  28. Permalink to comment#

    This is how I used it.
    Thanks!

    <ul>
            <?php while ($loop3->have_posts()) : $loop3->the_post(); ?>         
    
    
    
    
            <li<?php if ( $post->ID == $wp_query->post->ID ) { echo ' class="current-menu-item"'; } else {} ?>>
    
            <a href="<?php the_permalink(); ?>">
    
            <hr>
            <small><?php the_time('d/m/Y') ?></small>
            <br>
            <?php the_title(); ?>
    
            </a>
    
            </li>
    
            <?php endwhile; ?>
            </ul>
            <hr>
            <?php wp_reset_postdata(); ?>
    

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".