Blog

WordPress Recent Posts Widget

If you’re like me, you have several post categories, and you want to use a recent posts menu to show posts from a particular category. Oddly, WordPress doesn’t have a simple category-based, recent posts widget built in (at the time of this writing), and there are no simple solutions available in the plugin repository. You can see an example of this exact script in the sidebar on this page, and other places on this site. The only prerequisites for this script are confidence editing your functions.php file and Font Awesome 5.

Add the PHP code below to your functions.php file and then inset the shortcode in a text element to display the menu. This script is offered as is.

PHP

// RECENT POSTS WIDGET
function sv_insert_recent_posts_shortcode($attributes = array()) {
    extract(shortcode_atts(array(
        'category' => '',
        'limit' => '',
        'show_date' => '',
        'show_title' => ''
    ), $attributes));
    $args = array( 'category' => $category, 'numberposts' => $limit, 'orderby' => 'date', 'order' => 'DESC');
    $my_posts = get_posts( $args);

    if (!empty($my_posts)) {
        $output = '<div class="sv-recent-posts">';
        if ($show_title) $output .= '<h3>' . get_cat_name($category) . '</h3>';
        $output .= '<ul>';
        foreach ($my_posts as $p) {
            $output .= '<li><a href="' . get_permalink( $p->ID ) . '"/>' . $p->post_title . '</a>';
            if ($show_date) $output .= '<div class="post-date">' . get_the_date( 'F d, Y', $p->ID ) . '</div>';
            $output .= '</li>';
        }
        $output .= '</ul></div>';
        return $output;
    }
}
add_shortcode('sv_recent_posts_menu', 'sv_insert_recent_posts_shortcode');

add_action( 'wp_head', function () { ?>
<style>
.sv-recent-posts ul {
    list-style:none;
    margin:0 0 30px 0;
    padding:0;
}
.sv-recent-posts li {
    border-bottom:1px solid #ccc;
    margin:0;
    padding:10px 10px 10px 28px;
    line-height:1.3em;
    font-weight:bold;
    position: relative;
}
.sv-recent-posts li:before {
    content:"\f101";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    position:absolute;
    left:10px;
    top:11px;
}
</style>
<?php } );

Shortcode

[sv_recent_posts_menu category="20" limit="10" show_date="1" show_title="1"]

The “category” is the category ID, and “limit” is the max number of posts to show. “show_title” will display the category name if set to 1, hidden if set to 0.

More Blog Posts

About the Author

Share This Story

Share on facebook
Share on twitter
Share on linkedin

Contact Us