{"id":699,"date":"2017-06-06T06:09:36","date_gmt":"2017-06-06T06:09:36","guid":{"rendered":"http:\/\/genesiswp.net\/?p=132"},"modified":"2018-04-17T16:10:32","modified_gmt":"2018-04-17T16:10:32","slug":"customize-lists-recent-posts-widget-genesis","status":"publish","type":"post","link":"https:\/\/leaguewp.com\/customize-lists-recent-posts-widget-genesis\/","title":{"rendered":"How to Customize Lists in Recent Posts Widget (Genesis)"},"content":{"rendered":"

In a minimalist web design world where many are going without sidebars, it’s really strange to obsess over sidebar design. But, that’s okay.<\/p>\n

Recently, I bumped into the Adweek website and wanted to use \u2018counter-increment\u2019 property in the recent posts widget of my Genesis theme, just the way they’ve done<\/a> on their website sidebar. The problem was the recent posts widget didn’t have a class and I needed to modify the code so I could use a custom class. I saw that Genesis didn’t have a function for recent posts since it is core WordPress widget.<\/p>\n

With little research, I found the solution in Stack Exchange<\/a>. So, here’s what you need to do:<\/p>\n

    \n
  1. Copy the recent posts widget code to your functions.php<\/li>\n
  2. Modify the list and use a custom class<\/li>\n
  3. Use CSS ::before pseudo-element to add counter numbers<\/li>\n
  4. Make necessary CSS adjustment as per your theme<\/li>\n<\/ol>\n

    Please, note that\u00a0this guide is not limited to Genesis theme users; this can work for any sites running with WordPress.<\/p>\n

    Moreover, use your FTP to make any changes to your functions.php. Don’t proceed if you’re not familiar with FTP.<\/p>\n

    So, let’s get started:<\/p>\n

    Add the following code to your functions.php file<\/strong><\/p>\n