{"id":15571,"date":"2020-11-08T15:00:31","date_gmt":"2020-11-08T14:00:31","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=15571"},"modified":"2021-05-11T13:49:23","modified_gmt":"2021-05-11T11:49:23","slug":"display-wordpress-random-posts","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/display-wordpress-random-posts\/","title":{"rendered":"How to Display Random Posts in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]When showing blog posts, WordPress websites most commonly display them descending by date. That way readers get to see the latest articles first. By taking advantage of this method, the number of views on those articles will quickly go up.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, once the number of articles on your blog increases, your older posts will receive less and less traffic as they will be harder to reach under all the newer posts. This is beneficial if the content of your older posts becomes outdated, but detrimental if those posts contain evergreen content that readers will miss out on. This can skew your traffic statistics and affect how you approach your analytics reports. Another issue that can affect your traffic is readers wanting to locate additional information and leaving your site if that information proves too hard to locate. The most common ways of tackling these issues are adding internal links to your articles, <a href=\"https:\/\/qodeinteractive.com\/magazine\/display-posts-on-page-in-wordpress\/\">showing all posts on the same page<\/a>, or providing visitors with the option to view random posts. We will talk about the latter in this article and cover the following topics:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#benefits-of-displaying-random-posts\">Benefits of displaying random posts in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-plugins\">Displaying random posts using plugins<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-custom-code\">Displaying random posts using custom code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"benefits-of-displaying-random-posts\"><\/a>Benefits of displaying random posts in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]The best places to display random posts include the sidebar, the area below the post content, or within the footer. Adding a relevant random posts section on any of these three places can work wonders for enhancing the layout of your blog posts, and give your readers quick and effortless access to other articles. If you take the time to include appropriate metadata (e.g. categories, tags, or excerpts) next to the articles, you can help your visitors easily figure out which article to read next.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, WordPress doesn\u2019t possess a built-in functionality for displaying random posts. Currently, the only two ways of managing this are to use an appropriate WordPress plugin or to create custom code. In the sections below, we will take you through both methods. Our examples will focus on displaying random posts inside a sidebar, but the same methods could be applied to other locations on your site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;blog-magazine-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-plugins\"><\/a>Using plugins<\/h2>\n<p>[\/vc_column_text][vc_column_text]When wanting to add a certain feature or functionality to your WordPress website, you should always look for a suitable WordPress plugin first. Thanks to the abundance of good WordPress plugins, the chances of finding one to do what you want, in this case, display random posts, are very high. However, when hunting for a plugin, you should always broaden the search a bit and look for multipurpose plugins as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this specific case, you should search for plugins that show random posts but also display recent posts or posts in general. And you can consider using redirection-related plugins. In the following section, we will show you two plugins that are well-suited for displaying random posts, even though their names might not indicate it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Recent Posts Widget With Thumbnails<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/recent-posts-widget-with-thumbnails\/\" target=\"_blank\" rel=\"noopener noreferrer\">Recent Posts Widget With Thumbnails<\/a> plugin is an intuitive, light-weight plugin. It provides a widget for displaying recent posts based on the default WordPress widget called <em>Recent posts<\/em>. However, since it has the option to display posts in a random order, it is perfectly suited for our needs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing the plugin<\/a>, <strong>navigate to Appearance &gt; Widgets<\/strong>, and <strong>find the <em>Recent Posts<\/em> with <em>Thumbnails<\/em> widget. Insert the widget inside the widget area of your choice and adjust its options to your preference.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The widget has quite a few options, but don\u2019t be tempted to skip them. <strong>At least make sure to fill out the number of posts you wish to show and tick the checkbox next to the <em>Show posts in random order?<\/em> option<\/strong>. Apart from that, we took the time to insert a title for the widget and ticked the checkbox next to the <em>Show thumbnail<\/em> option, while creating the examples for this article. By using widget options, you can also opt to show the author, categories, publish date, excerpt, and comments for each of the random posts.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"480\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Recent-Posts-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Recent Posts Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Recent-Posts-Widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Recent-Posts-Widget-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Recent-Posts-Widget-620x425.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With the settings we choose, we got the following widget output.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Recent-Posts-Widget-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Recent Posts Widget Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Recent-Posts-Widget-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Recent-Posts-Widget-Preview-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Recent-Posts-Widget-Preview-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Redirect URL to post<\/h3>\n<p>[\/vc_column_text][vc_column_text]Some users might only want to display a single random post as opposed to a list of them. In that case, the best option would be using a button or a link that redirects to a random post. The plugin we picked to demonstrate this is the <a href=\"https:\/\/wordpress.org\/plugins\/redirect-url-to-post\/\" target=\"_blank\" rel=\"noopener noreferrer\">Redirect URL to Post<\/a> plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After installing it, this plugin allows you to insert a redirect link that leads to a random post. Furthermore, you can even <strong>specify where your readers will be directed by appending query parameters to the URL<\/strong>. That\u2019s done using target and filter parameters. The target parameters are used to direct visitors to a random, oldest, previous, or a custom-set post. And the filter parameters, combined with the target ones, can help narrow down which of those posts can be selected for display. These filters can help you exclude certain posts, display random posts from a specific author, or even showcase posts that have a set number of comments already on them. However, as this topic is advanced, we suggest reading through <a href=\"https:\/\/documentation.chattymango.com\/documentation\/redirect-url-to-post\/\" target=\"_blank\" rel=\"noopener noreferrer\">the plugin&#8217;s documentation<\/a> for more information. You should particularly focus on <a href=\"https:\/\/documentation.chattymango.com\/documentation\/redirect-url-to-post\/getting-started-redirect-url-to-post\/examples-wordpress-redirects-to-posts\/\" target=\"_blank\" rel=\"noopener noreferrer\">the examples of possible URLs<\/a> to see how you can control the redirection.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After you\u2019ve examined the documentation and decided how you want your redirect link to be, you should add it. As we mentioned previously, we will focus on adding random posts to the sidebar, but you can add yours anywhere you like.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To insert a random post to the sidebar, <strong>navigate to Appearance &gt; Customize &gt; Widgets<\/strong>. Then <strong>add a Text widget inside the widget area designated for the sidebar<\/strong>. Please note that the name of the widget area can vary depending on the theme you are using. In our case, we\u2019re using <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/lekker-portfolio-wordpress-theme\/\">the Lekker WordPress theme<\/a> and the name of the widget area there is <em>Main Sidebar<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After adding the Text widget, <strong>open its <em>Text<\/em> tab<\/strong> and <strong>click on the link button to add a link<\/strong>. In the following popup window, <strong>insert the redirect URL, link text<\/strong>, and, if you like, <strong>tick the checkbox next to the <em>Open link in a new tab<\/em> option<\/strong>. Then, <strong>press the <em>Add Link<\/em> button<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As you can see from the screenshots below, the redirect link we used is <em>https:\/\/your-website.com\/?redirect_to=random<\/em>. This is just an example, so the part with <em>your-website.com<\/em> should be replaced with an actual URL.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Widget-Sidebar-Text.jpg\" class=\"attachment-full size-full\" alt=\"Widget Sidebar Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Widget-Sidebar-Text.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Widget-Sidebar-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Widget-Sidebar-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inserting-a-Link.jpg\" class=\"attachment-full size-full\" alt=\"Inserting a Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inserting-a-Link.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inserting-a-Link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inserting-a-Link-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Just using the <em>Link Text<\/em> field will net you a neat, straightforward look for the redirect link, as you can see on the following screenshot. However, you can also opt to insert some additional text to the Text widget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Link-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Redirect URL Link Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Link-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Link-Preview-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Link-Preview-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moreover, this plugin provides users with a custom redirect button shortcode that you can use inside the content of your pages or widgets. You can find more information on it in <a href=\"https:\/\/documentation.chattymango.com\/documentation\/redirect-url-to-post\/getting-started-redirect-url-to-post\/redirect-button\/\" target=\"_blank\" rel=\"noopener noreferrer\">the documentation regarding the redirect button shortcode<\/a>. And, if you aren\u2019t sure what custom shortcodes are or how to use them, you can take a look at <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/\">our article on custom shortcodes<\/a> to learn more.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve brushed up on your knowledge of custom shortcodes and their use, you can insert the redirect button shortcode in the place of your choosing. In our example, we will show you how you can insert the redirect button for random posts within a sidebar.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Start by <strong>navigating to Appearance &gt; Widgets<\/strong>, then<strong> insert a Text widget inside your theme\u2019s sidebar widget area<\/strong>. After that, <strong>add the shortcode call<\/strong> within the widget. At this point, you can just insert [redirect_to_post_button] to finish the job, as all the arguments will show their default values. However, for added customization, you can also insert arguments in the key=\u201dvalue\u201d form to specify some of the arguments.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In our example, we inserted <strong>text=\u201dClick here to see a random post\u201d<\/strong>. This specifies the text that will be written on the button. And we also added <strong>button_class=\u201drandom-post\u201d<\/strong>. That adds a custom class to the button which we can use to stylize it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Redirect URL Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Plugin.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Plugin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Plugin-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019ve inserted the redirect button shortcode, you might decide to <strong>add CSS to stylize it. Generally, that\u2019s done to make this new functionality match with the style of the theme you are using, and ensure your site looks harmonious. Therefore, creating suitable CSS is done on a case-by-case basis as it depends on your current site design. And, once you\u2019ve created the CSS, you should insert it in Appearance &gt; Customize &gt; Additional CSS.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this article, we created CSS that makes the random posts button fit with <a href=\"https:\/\/lekker.qodeinteractive.com\/\">Lekker<\/a>, the theme we\u2019re using. The CSS we created was specifically made for the <strong>random-post<\/strong> class we previously added to the button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">button.random-post {\r\nborder-radius: 20px;\r\nposition: relative;\r\nmargin: 0 2px 2px 0;\r\npadding: 5px 20.5px;\r\nfont-family: inherit;\r\nline-height: inherit;\r\nletter-spacing: 0.05em;\r\nbackground-color: #f55758;\r\ncolor: white;\r\n}\r\nbutton.random-post:hover {\r\nbackground: #e82a2a !important;\r\ncolor: #fff !important;\r\ncursor: pointer;\r\n}\r\nbutton.random-post:focus{\r\noutline: none;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s how the button looked after inserting the CSS.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Button-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Redirect URL Button Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Button-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Button-Preview-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Redirect-URL-Button-Preview-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;90px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-custom-code\"><\/a>Using custom code<\/h2>\n<p>[\/vc_column_text][vc_column_text]Another way of displaying random posts in WordPress involves the use of custom code. Because of that, the method explained in this section is geared towards the more experienced WordPress users. Level of difficulty aside, this method has a clear benefit\u2014you can code the random posts section to fit your needs exactly. But keep in mind, when creating the code, you should review it carefully before adding it to your site. Any coding mistake could potentially break your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we included an example of code you can use to create a random posts section. The code should be added either in the functions.php file of your theme or inside a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>. We will show the former method of adding below. As it requires <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">the use of FTP<\/a>, we suggest brushing up on it. We also suggest <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-backup-wordpress-files\/\">making a backup of your WordPress files<\/a>, just in case. Having done so, let us proceed to the steps.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, <strong>connect to your server<\/strong> using your FTP credentials and <strong>navigate to your root WordPress directory,<\/strong> often called public_html.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML.jpg\" class=\"attachment-full size-full\" alt=\"FTP Public HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>navigate to the \/wp-content\/themes directory<\/strong> and <strong>click on your theme\u2019s folder<\/strong> to open it. <strong>Locate the functions.php file<\/strong> within, <strong>right-click on it<\/strong> and <strong>select the <em>View\/Edit<\/em> option<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/FTP-Themes.jpg\" class=\"attachment-full size-full\" alt=\"FTP Themes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/FTP-Themes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/FTP-Themes-300x214.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/FTP-Themes-620x443.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Open the file<\/strong> using your preferred text editor and <strong>scroll to the bottom. Insert the following code at the end of the file.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_random_posts() {\r\nglobal $post;\r\n$html = '';\r\n$args = array(\r\n'post_type' =&gt; 'post',\r\n'orderby' =&gt; 'rand',\r\n'posts_per_page' =&gt; 2,\r\n);\r\nif ( isset( $post-&gt;ID ) &amp;&amp; is_singular( 'post' ) ) {\r\n$args['post__not_in'] = array( $post-&gt;ID );\r\n}\r\n$the_query = new WP_Query( $args );\r\nif ( $the_query-&gt;have_posts() ) {\r\n$html .= '&lt;ul class =\"post-holder\"&gt;';\r\nwhile ( $the_query-&gt;have_posts() ) {\r\n$the_query-&gt;the_post();\r\n$html .= '&lt;li class=\"post\"&gt;&lt;a href=\"' . get_permalink() . '\"&gt;';\r\nif ( has_post_thumbnail( $post-&gt;ID ) ) {\r\n$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'single-post-thumbnail' );\r\n$html .= '&lt;img class=\"featured-image\" src=\"' . esc_url( $image[0] ) . '\"&gt;';\r\n}\r\n$html .= get_the_title() . '&lt;\/a&gt;';\r\n$long_excerpt = get_the_excerpt();\r\nif ( ! empty( $long_excerpt ) ) {\r\n$short_excerpt = substr( get_the_excerpt(), 0, 80 );\r\n$excerpt = substr( $short_excerpt, 0, strrpos( $short_excerpt, ' ' ) );\r\n$excerpt .= '[&amp;hellip;]';\r\n$html .= '&lt;p&gt;' . wp_kses_post( $excerpt ) . '&lt;\/p&gt;';\r\n}\r\n$html .= '&lt;\/li&gt;';\r\n}\r\n$html .= '&lt;\/ul&gt;';\r\nwp_reset_postdata();\r\n} else {\r\n$html .= '&lt;div class=\"no-random-posts\"&gt;' . esc_html__( 'No posts were found.', 'textdomain' ) . '&lt;\/div&gt;';\r\n}\r\nreturn $html;\r\n}\r\nadd_shortcode( 'random-posts', 'qode_random_posts' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"506\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/FTP-Code-1.jpg\" class=\"attachment-full size-full\" alt=\"FTP Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/FTP-Code-1.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/FTP-Code-1-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/FTP-Code-1-620x448.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, <strong>save the changes<\/strong> you made and <strong>upload the edited file back to your server<\/strong> to override the current one.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before we go farther, let us elaborate on the code we included above. To make it easier to follow, we simplified the code slightly and divided it into two parts.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, the code is equivalent to the following, shortened, version.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_random_posts() {\r\nglobal $post;\r\n$html = '';\r\n$args = array(\r\n'post_type' =&gt; 'post',\r\n'orderby' =&gt; 'rand',\r\n'posts_per_page' =&gt; 2,\r\n);\r\nif ( isset( $post-&gt;ID ) &amp;&amp; is_singular( 'post' ) ) {\r\n$args['post__not_in'] = array( $post-&gt;ID );\r\n}\r\n$the_query = new WP_Query( $args );\r\nif ( $the_query-&gt;have_posts() ) {\r\n$html .= '&lt;ul class =\"post-holder\"&gt;';\r\nwhile ( $the_query-&gt;have_posts() ) {\r\n$the_query-&gt;the_post();\r\n\/\/ Some code here\r\n}\r\n$html .= '&lt;\/ul&gt;';\r\nwp_reset_postdata();\r\n} else {\r\n$html .= '&lt;div class=\"no-random-posts\"&gt;' . esc_html__( 'No posts were found.', 'textdomain' ) . '&lt;\/div&gt;';\r\n}\r\nreturn $html;\r\n}\r\nadd_shortcode( 'random-posts', 'qode_random_posts' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code represents a shortcode called <strong>random-posts<\/strong>. It performs certain operations using the information that corresponds to the posts that matched a given query. And the query is quite simple, as it <strong>selects two random posts from the list of all published posts<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Additionally, if this shortcode is shown inside a post, then that same post can\u2019t be chosen to avoid showing duplicate information. However, that restriction doesn\u2019t apply if the shortcode is used on other types of pages. And in case that there are no published posts, a message stating <em>No posts were found<\/em> will be shown.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Secondly, to make sure all published posts are covered, we used <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\" target=\"_blank\" rel=\"noopener noreferrer\">the WordPress Loop<\/a>. The inner part of the code, which you can see below, is responsible for showing the relevant data belonging to the two selected posts.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">$html .= '&lt;li class=\"post\"&gt;&lt;a href=\"' . get_permalink() . '\"&gt;';\r\nif ( has_post_thumbnail( $post-&gt;ID ) ) {\r\n$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'single-post-thumbnail' );\r\n$html .= '&lt;img class=\"featured-image\" src=\"' . esc_url( $image[0] ) . '\"&gt;';\r\n}\r\n$html .= get_the_title() . '&lt;\/a&gt;';\r\n$long_excerpt = get_the_excerpt();\r\nif ( ! empty( $long_excerpt ) ) {\r\n$short_excerpt = substr( get_the_excerpt(), 0, 80 );\r\n$excerpt = substr( $short_excerpt, 0, strrpos( $short_excerpt, ' ' ) );\r\n$excerpt .= '[&amp;hellip;]';\r\n$html .= '&lt;p&gt;' . wp_kses_post( $excerpt ) . '&lt;\/p&gt;';\r\n}\r\n$html .= '&lt;\/li&gt;';<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]More precisely, the following information will be displayed: a post title linking to the post itself, the post\u2019s featured image, and its excerpt (if the given post has either of the last two). The excerpt is shortened to the last whole word before the 80th character, to avoid any word-breaks.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can use this shortcode anywhere on your pages or posts, or you can add it to your chosen widget area. Below, we will explain how you can include this shortcode inside the sidebar of your theme. If you aren\u2019t familiar with shortcodes and how to use them, we suggest taking a look at <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/\">our article on custom shortcodes<\/a> before continuing.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To insert our example code inside the sidebar, <strong>navigate to Appearance &gt; Widgets<\/strong>. Then <strong>insert a Text widget inside the sidebar widget area of the theme you are currently using<\/strong>. Remember that the name of the widget area can differ from theme to theme. In our case, that widget area is called <em>Main Sidebar<\/em>.<strong> Insert <em>[random-posts]<\/em><\/strong> to call the shortcode. And, if you want, you can add a title to the Text widget containing the shortcode.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Custom-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Custom Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Custom-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Custom-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Custom-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that you have a better understanding of the shortcode, you can consider creating additional CSS code. In most cases, additional CSS will be needed to stylize the content, as it could be only partially styled by your current theme or have a default browser stylization. As we mentioned previously, <strong>you should create that CSS code yourself, since it should be made on a case-by-case basis. After putting yours together, insert it in Appearance &gt; Customize &gt; Additional CSS.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Below, you can see the CSS we created for displaying random posts in the Lekker WordPress theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">ul.post-holder .post {\r\nmargin-bottom: 30px !important;\r\nborder-bottom: 2px dotted black;\r\n}\r\nul.post-holder .post a{\r\ncolor: red !important;\r\n}\r\nul.post-holder .post a:hover{\r\ncolor: #2e629c !important;\r\n}\r\nul.post-holder .post img {\r\nmargin-bottom: 10px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After inserting the shortcode and the CSS as described, we got the resulting random posts section (which you can see on the screenshot below).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"430\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Custom-Code-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Custom-Code-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Custom-Code-Preview-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Custom-Code-Preview-620x381.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Displaying random posts in suitable places on your website is a handy option that every blog should take advantage of. It can help funnel much-needed traffic to your older, but still relevant posts, as well as keep your readers engaged. While showing random posts isn\u2019t a default WordPress feature, you can enable it quite easily. Simply follow the methods we outlined in this article and your readers will soon be spoiled for choice. Don\u2019t forget to make sure that the random posts section you include matches the design of your website by adding some CSS code. Then sit back and reap all the benefits that the influx in website traffic will bring. And, if you feel like shaking things up later on, you can always <a href=\"https:\/\/qodeinteractive.com\/magazine\/display-most-popular-posts-wordpress\/\">show your most popular posts<\/a> instead. As they have already proven popular with your readers, they are sure to draw in a crowd and give your page views a bump.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Wondering how to spice up your blog? Showing random posts that will entice visitors to read on might be just the thing you&#8217;re looking for.<\/p>\n","protected":false},"author":11229,"featured_media":15576,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,39,13],"class_list":["post-15571","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-tools","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/15571","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=15571"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/15571\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/15576"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=15571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=15571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=15571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}