{"id":5961,"date":"2010-03-18T06:39:50","date_gmt":"2010-03-18T13:39:50","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=5961"},"modified":"2011-05-03T10:09:18","modified_gmt":"2011-05-03T17:09:18","slug":"list-posts-highlight-current","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/wordpress\/list-posts-highlight-current\/","title":{"rendered":"List Posts, Highlight Current"},"content":{"rendered":"

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()<\/a> function and running your own loop through the results. <\/p>\n

The parameters for get_posts() below are just examples, replace with your needs.<\/p>\n

<ul>\r\n\r\n    <?php\r\n        $lastposts = get_posts('numberposts=5&orderby=rand&cat=-52');\r\n        foreach($lastposts as $post) :\r\n        setup_postdata($post); ?>\r\n\r\n        <li<?php if ( $post->ID == $wp_query->post->ID ) { echo ' class=\"current\"'; } else {} ?>>\r\n            \r\n            <a href=\"<?php the_permalink() ?>\"><?php the_title(); ?><\/a>\r\n            \r\n        <\/li>\r\n\r\n    <?php endforeach; ?>\r\n\r\n<\/ul><\/code><\/pre>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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) […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3229,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":4566,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/custom-loop-based-on-custom-fields\/","url_meta":{"origin":5961,"position":0},"title":"Custom Loop\/Query Based on Custom Fields","date":"October 30, 2009","format":false,"excerpt":"Last updated by Jason Witt. If you design or develop WordPress themes or plugins, there's a good chance that someday you'll need to make a query for custom meta fields. These are those completely custom key\/value pairs that you can attach to any post, page, or custom post type. WordPress\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192718,"url":"https:\/\/css-tricks.com\/snippets\/sass\/functional-programming-functions\/","url_meta":{"origin":5961,"position":1},"title":"Functional Programming Functions","date":"January 9, 2015","format":false,"excerpt":"For library makers and framework builders, having a couple of extra functions to dynamically apply functions to items of a list might come in handy. Here are 4 functions inspired by JavaScript and PHP equivalents, implemented in Sass. walk() The walk() function applies a given function to every item of\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191222,"url":"https:\/\/css-tricks.com\/snippets\/sass\/advanced-type-checking\/","url_meta":{"origin":5961,"position":2},"title":"Advanced Type Checking","date":"December 19, 2014","format":false,"excerpt":"This collection of functions is for testing if the value of a variable is of a certain type. For instance, is 13rem a relative length? TRUE! Is \"frosty the snowman\" and integer? FALSE! This is likely most useful for advanced mixin and framework creators who aim to make their code\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192767,"url":"https:\/\/css-tricks.com\/snippets\/sass\/fix-number-n-digits\/","url_meta":{"origin":5961,"position":3},"title":"Fix a Number to N Digits","date":"January 9, 2015","format":false,"excerpt":"When dealing with numbers in JavaScript or any other programming language, there is a way to truncate a number after n digits. Unfortunately, there is no such function in Sass. Still, rounding and precision issues do happen when dealing with percentage based grid systems for instance. Here is a Sass\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191217,"url":"https:\/\/css-tricks.com\/snippets\/sass\/str-replace-function\/","url_meta":{"origin":5961,"position":4},"title":"Str-replace Function","date":"December 19, 2014","format":false,"excerpt":"Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one. \/\/\/ Replace `$search` with `$replace` in `$string` \/\/\/ @author Kitty Giraudel \/\/\/ @param {String} $string - Initial\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196692,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/cross-browser-dependency-free-dom-ready\/","url_meta":{"origin":5961,"position":5},"title":"Cross-Browser Dependency-Free DOM Ready","date":"February 24, 2015","format":false,"excerpt":"Denis Ciccale's version: var DOMReady = function(a, b, c) { b = document c = 'addEventListener' b[c] ? b[c]('DocumentContentLoaded', a) : window.attachEvent('onload', a) } DOMReady(function () { alert('The DOM is Ready!'); }); Minimized: var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)} Dustin Diaz's version: function r(f){\/in\/.test(document.readyState)?setTimeout('r('+f+')',9):f()} He also had a repo for it where\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5961"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5961"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5961\/revisions"}],"predecessor-version":[{"id":9250,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5961\/revisions\/9250"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3229"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5961"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}