You always want to show your users the newest contents on your blog. That’s why in this post, I will guide you on how to add stylish recent posts widget in WordPress sidebar without adding any other third party plugin or any of such to accumulate the process and disk space of your site.
We will use the default “Recent Posts” widget in your blog then add cool styles to it. But before adding styles to the recent post sidebar widget, we will have to add the widget first.
Adding Recent Post Sidebar Widget.
Login to your WordPress blog then go to Appearance > Widgets.
Locate the “Recent Posts” option then drag it to the sidebar. You can customise how many posts posts you will want to show and change the heading if you will want to use another one.
Adding Styles to the Widget.
Now that you have successfully added the widget to your blog, it is time to start styling the widget using CSS.
To add CSS the simplest way, we will need to navigate to the customise appearance then additional CSS option. To do this, follow the guide below.
Once you’re in the admin dashboard of your site, go to “Dashboard > Appearance > Customize > Additional CSS”.
Open the Additional CSS then copy and paste the following codes.
/* sidebar boxes customization by Startblog.tech */
#recent-posts-7 h2 {
background-color:#00253e;
color:white;
text-align:center;
border-radius:7px;
}
#recent-posts-7 {
background-color:#eef4fa;
border-top:4px solid #00253e;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#recent-posts-7 li{
background-color:white;
padding:3px 21px;
border-radius:8px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#recent-posts-7 li a{
color:#00253e;
font-size:13px;
}
FYI: Adding the CSS code to your website will not make the Recent Posts Widget to get its styling immediately. The CSS selectors will have to be changed.
To do this, Open your blog post, locate the “Recent Posts Widget”, then right click on it to Inspect.
Copy the “ID”. In my case, the ID is “recent-posts-6”.
Go back to the code above and change the CSS selectors accordingly.
Final words on How to Add Stylish Recent Posts Widget in WordPress.
Now that you have successfully styled the recent post option in your WordPress site without a plugin, I am sure this will save you some time, stress and bucks.
Go ahead and let me know if this tutorial was helpful.
See you in the next tutorial.
This post is credited to Turbohosty.
