The Recent Posts Widget Extended is great plugin that displays your posts in a widget with some added options. This plugin makes creating and customizing your blog page very simple but it lacks a core feature, displaying the category of the post.
In this post, I’ll go over how to add the blog post category to the widget output. First, we’ll look at the code we’re adding.
1.) Copy and paste this line of code where you want the category to be displayed.
$html .= '<div class="blog-category">';
$categories = get_the_category();
if ( ! empty( $categories ) ) {
$html .= '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a></div>';
}
2.) In the WordPress Dashboard, go to Plugins > Editor and select Recent Posts Widget Extended then click ‘Select’. In the list on the right side, locate the function.php file (named recent-posts-widget-extended/includes/functions.php).
Now we’ll locate where we want to add the category to. In this case, we’re adding it just above the blog post title which starts with an h3 tag.
endif;
$html .= '<h3 class="rpwe-title"><a href="' . esc_url( get_permalink() ) . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'recent-posts-widget-extended' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark">' . esc_attr( get_the_title() ) . '</a></h3>';
if ( $args['date'] ) :
$date = get_the_date();
if ( $args['date_relative'] ) :
$date = sprintf( __( '%s ago', 'recent-posts-widget-extended' ), human_time_diff( get_the_date( 'U' ), current_time( 'timestamp' ) ) );
endif;
$html .= '<time class="rpwe-time published" datetime="' . esc_html( get_the_date( 'c' ) ) . '">' . esc_html( $date ) . '</time>';
elseif ( $args['date_modified'] ) : // if both date functions are provided, we use date to be backwards compatible
$date = get_the_modified_date();
if ( $args['date_relative'] ) :
$date = sprintf( __( '%s ago', 'recent-posts-widget-extended' ), human_time_diff( get_the_modified_date( 'U' ), current_time( 'timestamp' ) ) );
endif;
$html .= '<time class="rpwe-time modfied" datetime="' . esc_html( get_the_modified_date( 'c' ) ) . '">' . esc_html( $date ) . '</time>';
endif;
3.) Now paste the lines of code from step 1 between the endif; and the $html .= ‘<h3 lines. The example below shows what the file should look like with the new lines of code added to it.
The green text represents the code added to the functions.php file. Click save and we’ll now see the blog post category listed above the post title.
endif;
$html .= '<div class="blog-category">';
$categories = get_the_category();
if ( ! empty( $categories ) ) {
$html .= '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a></div>';
}
$html .= '<h3 class="rpwe-title"><a href="' . esc_url( get_permalink() ) . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'recent-posts-widget-extended' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark">' . esc_attr( get_the_title() ) . '</a></h3>';
4.) We can now use the .blog-category class to customize the css properties of our new output.
.blog-category {
font-size: 10px;
font-weight: 100;
text-transform: uppercase;
margin-top: 10px;
}
5.) Refresh the page and we’ll notice the changes. Most of the other basic customization can be done directly with CSS.
Here’s a sample image of what was done.
