{"id":20778,"date":"2021-02-24T17:00:09","date_gmt":"2021-02-24T16:00:09","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=20778"},"modified":"2022-01-12T14:39:03","modified_gmt":"2022-01-12T13:39:03","slug":"show-wordpress-recent-posts","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/show-wordpress-recent-posts\/","title":{"rendered":"How to Display Recent WordPress Posts from a Specific Category"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Even though its purpose has expanded vastly since its beginnings, WordPress remains the best platform for managing a blogging website. It lets many less experienced users make their blogs with little to no effort. This is possible thanks to the numerous themes and plugins specialized for blogging, as well as the core functionalities WordPress offers.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The most important page on every blog website is the Blog page that displays the most recent posts you made across all categories. Even though this page attracts the most readers to your website, some may still decide to leave upon having to scroll through a long list of seemingly unrelated articles. To stop those readers from leaving, you can offer them a smaller list of recent posts, focused on a single category. This list should be tailored to show articles relevant to the page they\u2019re on. This will improve the likelihood that the readers will click through your website.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You can also feature posts from a specific category created for drawing attention to your website or simply feature some of the most important articles on your website. Using methods like these in conjunction with the regular blog feature will improve the traffic your website receives significantly. As such, we put together this article to show you how to display a list of WordPress recent posts from a specific category. Let us proceed.
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”blog-magazine-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to display recent WordPress posts from a specific category<\/h2>\n

[\/vc_column_text][vc_column_text]Displaying recent WordPress posts from a specific category can be done using a suitable WordPress plugin or through the use of custom code. Depending on the theme you are using, this functionality could even be integrated within the features of that theme. Therefore, you should examine the possibilities offered by your WordPress theme before proceeding. If it doesn\u2019t include a feature for displaying WordPress recent posts from a specific category, you should carry on with this article. In the following sections, we will be exploring the possibility of displaying recent posts using a plugin and using code.
\n[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Using a plugin<\/h3>\n

[\/vc_column_text][vc_column_text]Most WordPress users opt for using a plugin when implementing a new functionality as it is a very beginner-friendly method. With the abundance of WordPress plugins, the chances that you will find a plugin for displaying WordPress recent posts that suits you are fairly high. When browsing, look for plugins that are specifically created for showing recent posts or ones that are made for displaying posts in general.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The plugin that caught our eye while searching through the WordPress plugin repository was the Recent Posts Widget With Thumbnails<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This lightweight plugin is made specifically for displaying recent posts by extending the basic functionality of the WordPress Recent posts widget. The plugin offers a simple and intuitive widget that can be used for displaying posts that match the options you set. As such, you can use it to display a list of recent posts within a single category, or even a list of random posts<\/a>, if you choose to. The widget options allow you to adjust the additional information about each of the posts you display. That includes post titles, featured images, author and category names, dates, and more.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To use this plugin, you will need to install it<\/a> first. Then, navigate to Appearance > Widgets<\/strong>, and find the Recent Posts with Thumbnails widget. Insert the widget inside the widget area of your choice<\/strong> and adjust the options<\/strong> as you see fit.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Plugin <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Plugin <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The widget offers a lot of options that you can explore. We highlighted the ones we considered to be the most relevant, and which we used for this article. Those are the number of posts the widget shows, whether the current post should be excluded from the output or not, showing the excerpt and choosing its length, as well as the ability to show recent posts within a single category, which is the point of this article.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Apart from that, we also chose to show the featured image and specified its dimensions exactly. It is important to note that the Size of the thumbnail<\/em> option also allows you to specify the image dimensions in accordance with the registered image sizes<\/a> within the theme you are using.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After adjusting all of those options, we got the following output.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Recent <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you aren\u2019t fully satisfied with the display, you can further stylize it with some CSS. To help you do that, the plugin developer left a list of available CSS selectors you\u2019ll be able to use for the task. You can find them on the plugin\u2019s official page, near the end of the Details<\/em> tab.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"CSS <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, any CSS you create should be added under Appearance > Customize to keep the plugin lightweight, as noted in the FAQ section.
\n[\/vc_column_text][vc_empty_space height=”81px”][vc_widget_sidebar sidebar_id=”qi-banner”][vc_empty_space height=”84px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Using custom code<\/h3>\n

[\/vc_column_text][vc_column_text]Adding WordPress recent posts by category using custom code is best suited for the more advanced WordPress users. Simply put, this method requires some existing coding knowledge. The benefit of using it is that it offers the flexibility of manually adjusting everything so that the feature or functionality you want to add matches your wishes exactly. This is the main reason why some opt for this method.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Needless to say, there are a lot of coding approaches you can take to creating a recent posts section based on a single category. For this article, we have created a sample code that you can use directly or improve upon, as you see fit. You can add the custom code either in the functions.php file of your theme or within a site-specific plugin<\/a>. We will show the former. As adding code into the functions.php file requires the knowledge of FTP<\/a>, we advise brushing up on it before going further. Additionally, we advise making a backup of your website<\/a> to avoid potentially harming it. Afterward, proceed as described below.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]First, connect to your server<\/strong> using your FTP credentials and navigate to your root WordPress directory<\/strong>, often called public_html.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Public <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, navigate to \/wp-content\/themes<\/strong> and click on the directory of the theme you are currently using<\/strong> to open it. Find the functions.php file<\/strong> of the theme within the directory, right-click on it<\/strong>, and select the View\/Edit<\/em> option<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"FTP\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Open the file using your preferred text editor<\/strong> and insert the following code<\/strong> at the end of it.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
function custom_recent_posts_function( $atts ) {\r\n\r\n$default_atts = array(\r\n\r\n\"category\" => 'uncategorized'\r\n);\r\n$params = shortcode_atts( $default_atts, $atts );\r\n\r\n$recent_posts = new WP_Query(\r\narray(\r\n'post_type' => 'post',\r\n'post_status' => 'publish',\r\n'posts_per_page' => 3,\r\n'category_name' => $params['category'],\r\n'post__not_in' => array( get_the_ID() ),\r\n'orderby' => 'date',\r\n'order' => 'DESC'\r\n)\r\n);\r\n\r\n$html = '';\r\nglobal $post;\r\n\r\nif ( $recent_posts->have_posts() ) {\r\n$html .= '<div class=\"recent-posts\">';\r\nwhile ( $recent_posts->have_posts() ) {\r\n$recent_posts->the_post();\r\n$html .= '<div class=\"recent-posts-item\"><a rel=\"bookmark\" href=\"';\r\n$html .= get_the_permalink();\r\n$html .= '\" class=\"recent-posts-link\">';\r\nif ( has_post_thumbnail( $post->ID ) ) {\r\n$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );\r\n$html .= '<img class=\"featured-image\" src=\"' . esc_url( $image[0] ) . '\">';\r\n}\r\n$html .= '<h4 class=\"recent-post-title\">' . get_the_title() . '<\/h4>';\r\n$html .= '<\/a>';\r\n$long_excerpt = get_the_excerpt();\r\nif ( ! empty( $long_excerpt ) ) {\r\n$short_excerpt = substr( get_the_excerpt(), 0, 40 );\r\n$excerpt = substr( $short_excerpt, 0, strrpos( $short_excerpt, ' ' ) );\r\n$excerpt .= '[&hellip;]';\r\n$html .= '<p>' . wp_kses_post( $excerpt ) . '<\/p>';\r\n}\r\n$html .= '<\/div>';\r\n}\r\n$html .= '<\/div>';\r\nwp_reset_postdata();\r\n} else {\r\n$html .= '<div class=\"recent-posts\">' . esc_html__( 'There are no posts within this category.', 'textdomain' ) . '<\/div>';\r\n}\r\n\r\nreturn $html;\r\n}\r\nadd_shortcode( 'custom_recent_posts', 'custom_recent_posts_function' );<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Then, save the changes<\/strong> you made and upload the file back to your server<\/strong> to override the old version of it that\u2019s currently there.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now, let\u2019s explain the code. We\u2019ll start by looking at it in a simplified form, shown below.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
function custom_recent_posts_function( $atts ) {\r\n\r\n$default_atts = array(\r\n\r\n\"category\" => 'uncategorized'\r\n);\r\n$params = shortcode_atts( $default_atts, $atts );\r\n\r\n$recent_posts = new WP_Query(\r\narray(\r\n'post_type' => 'post',\r\n'post_status' => 'publish',\r\n'posts_per_page' => 3,\r\n'category_name' => $params['category'],\r\n'post__not_in' => array( get_the_ID() ),\r\n'orderby' => 'date',\r\n'order' => 'DESC'\r\n)\r\n);\r\n\r\n$html = '';\r\nglobal $post;\r\n\r\nif ( $recent_posts->have_posts() ) {\r\n\/\/ Some code here\r\n} else {\r\n$html .= '<div class=\"recent-posts\">' . esc_html__( 'There are no available posts within this category.', 'textdomain' ) . '<\/div>';\r\n}\r\n\r\nreturn $html;\r\n}\r\nadd_shortcode( 'custom_recent_posts', 'custom_recent_posts_function' );<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Looking at the code like this, it becomes clear that it represents a shortcode called custom_recent_posts<\/strong> (created using the add_shortcode()<\/a> function) and the callback function we created called custom_recent_posts_function. This shortcode only has one parameter that you can insert; it\u2019s called category<\/em>, and it has the default value of uncategorized<\/em>.<\/strong> Meaning, if the category parameter isn\u2019t used when \u201ccalling\u201d the shortcode, then this default value will be used.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Afterward, you can see the $recent_posts variable, which is a WP_Query<\/a> class. Using the parameters we have given to it, we will be able to show specific posts. More precisely, we will be able to show three published blog posts, whose category slug matches the category that the user inserts when calling the shortcode. The posts will be sorted by date in descending order, i.e. from the most recently published to older ones. Finally, if the shortcode is \u201ccalled\u201d within a post that matches these conditions, that post will be excluded,<\/strong> to avoid duplicate entries<\/a>.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If we look at the remaining part of the simplified version of the code, we can see an if-else<\/a> statement. These are rather simple to interpret \u2013 if the previous conditions are met, then a specific part of code within the curly brackets of the IF statement is executed, else the other part of the code is executed. In this case, if the previously described conditions aren\u2019t met, then a message There are no available posts within this category.<\/em> will be shown.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Let\u2019s focus on the remaining code, found within the curly brackets of the IF statement.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
if ( $recent_posts->have_posts() ) {\r\n$html .= '<div class=\"recent-posts\">';\r\nwhile ( $recent_posts->have_posts() ) {\r\n$recent_posts->the_post();\r\n$html .= '<div class=\"recent-posts-item\"><a rel=\"bookmark\" href=\"';\r\n$html .= get_the_permalink();\r\n$html .= '\" class=\"recent-posts-link\">';\r\nif ( has_post_thumbnail( $post->ID ) ) {\r\n$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium_large' );\r\n$html .= '<img class=\"featured-image\" src=\"' . esc_url( $image[0] ) . '\">';\r\n}\r\n$html .= '<h4 class=\"recent-post-title\">' . get_the_title() . '<\/h4>';\r\n$html .= '<\/a>';\r\n$long_excerpt = get_the_excerpt();\r\nif ( ! empty( $long_excerpt ) ) {\r\n$short_excerpt = substr( get_the_excerpt(), 0, 100 );\r\n$excerpt = substr( $short_excerpt, 0, strrpos( $short_excerpt, ' ' ) );\r\n$excerpt .= '[&hellip;]';\r\n$html .= '<p>' . wp_kses_post( $excerpt ) . '<\/p>';\r\n}\r\n$html .= '<\/div>';\r\n}\r\n$html .= '<\/div>';\r\nwp_reset_postdata();\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The IF statement is, in fact, part of the so-called WordPress Loop<\/a>. For every post that matches the aforementioned conditions, a section is created. This section will contain the title of that post and its featured image with a predefined medium_large image size if that post has a featured image. Furthermore, both the title and the image will serve as a link that will lead readers to that post. Additionally, this section will contain the post excerpt, provided the post has an excerpt. The excerpt will be shortened to the last whole word before the 100th character and it will end with an ellipsis.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This concludes the explanation of the shortcode, so we can focus now on how to use it. In this case, we suggest employing it within a widget. And, if you\u2019d like to learn about other ways of using shortcodes, you can take a look at our article on custom shortcodes<\/a>. With that being said, let us proceed.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To use this shortcode within a widget, first, navigate to Appearance > Widgets<\/strong>. Then, locate the widget area where you want to use the shortcode<\/strong> and add a Text widget to it<\/strong>. Next, add the following shortcode call<\/strong> within the main section of the Text widget:[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
[custom_recent_posts category='your-category-slug-here'][\/custom_recent_posts]<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Make sure to replace the your-category-slug-here<\/em> part with a slug from one of your site\u2019s categories<\/strong>. And, if you want, you can add a title to your Text widget. When you are done, press the Save<\/em> button<\/strong> below and check the frontend of your website<\/strong> to see the results.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Appearance                        <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n    
\n                                    \"Recent                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]With this shortcode, you will be able to display recent posts within a chosen category. However, depending on the theme you are using, the output of the shortcode could require some additional stylization with CSS code. This CSS should be made on a case by case basis as it needs to match individual site design, so we can\u2019t recommend a code that would be globally applied. However, we will share the small CSS tweak we used to make our output look how we wanted it to.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
.recent-posts-item {\r\nmargin-bottom: 25px;\r\n}\r\n.recent-post-title {\r\nmargin: 12px 0;\r\nfont-size: 22px;\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Small CSS code snippets like this should always be added in Appearance > Additional CSS. However, if you need larger quantities of CSS to stylize your output, we advise putting it in a separate .css file and enqueueing that stylesheet<\/a>, which is proper programming practice.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Finally, here is how the output of our recent posts widget looked after adding the above-mentioned CSS.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Custom                        <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Final Thoughts<\/h2>\n
[\/vc_column_text][vc_column_text]Displaying WordPress recent posts from a specific category can be quite useful for improving the traffic your blog receives. Showing a few selected articles will guide your readers through your website while keeping them engaged. In this article, we have shown you two possible ways of adding a category-based recent posts section. Whether you decide to go the plugin route or opt to use the code, we don\u2019t doubt that you will be able to add this feature to your site in a matter of minutes. And, as showing WordPress recent posts based on their category is helpful for both blogging websites and websites in other niches, we suggest bookmarking this article for future use.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Your blog has been getting more hits on posts within a certain category? It might be time to start showing your WordPress recent posts by categories!<\/p>\n","protected":false},"author":11229,"featured_media":20833,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,15,4,13],"class_list":["post-20778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=20778"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/20833"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=20778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=20778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=20778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}