Recently we have talked about Autoptimize plugin configuration to improve WordPress site performance. In this post, I will try to explain WordPress widget styling and give it a little bit of cool feel.
Normally people search for WordPress plugins to tweak the widgets but you will need to go through limitations. A plugin may or may not give you the exact style which is simple but fit nicely with your website. Another point is that a plugin will come with lots of designs to be called as feature-rich, among which you are going to use only one style at a time. You gotta think about your site performance too.
The goal of this article is to express WordPress widget styling technique in a unique way, simple and light but attractive.
Point to Note: Since we are going the change the theme style which is not theme's default property, you would like to have a child theme or a plugin for custom CSS. This way you won't lose your custom design when the theme gets updated.
If you are looking for a detailed & easy to follow guide to create a WordPress site I recommend you read this article.
So, let's start the customization process...
#1. Detect the Widget's CSS id
This is the first thing you need to do before jumping into the customization. Every element of your theme consist of it's unique ID which is the reference for the property that element poses. So when you want to change the style of any element you need to find it's id.
You can do this by inspecting the element on your browser.
Right click over the element + select inspect.
Now you need to find the ID of that widget under the element section of the dev tool (inspecting tool). This step is important because you need to pick the right ID for your widget otherwise the changes we are going to do will not reflect on the widget. Instead, the changes will be applied to other widgets or non of it at all.
You should get the widget ID like this,
For me the widget id is "recent-posts-3", and in the next step your are going to use this id for styling the respective widget.
I have mentioned earlier that you should get a child theme or use a custom CSS plugin before making changes to the widget to keep customization in the long run. You can use the Simple Custom CSS plugin. If you have a child theme already then you can use the default WordPress theme customizer's "additional CSS" feature.
#2. What are the required steps for WordPress widget styling?
You need to remember that while styling it's important to know what is the structure of the widget?
Simple widgets like recent post or recent comments has,
- A container which constructs the primary structure of the widget
- It has a Tittle which represents the name of the widget box
- It also has the links of posts that you need to customize as well.
This means you will have three blocks of CSS codes to customize the entire widget's style.
#3. Start with the widget container
it's a good way to start with the container, first you need to call for the widget id "recent-posts-3" and on that ID you need to assign the values for background color, padding, front-family and border radius. The value choice is completely under your control.
The CSS code input should be like this,
recent-posts-3 {
background-color: #1E73BE;
padding: 30px;
font-family: Times New Roman;
border-radius: 10px;
}
Pro tips: You can use any color picker browser extension to take the matching color hashcode (example: #1E73BE) and use it during WordPress Widget Styling.
The result of adding this code block would be,
You can also experiment with the code to understand what line is bringing what changes to the widget!
#4. Style the Widget Title
Editing the tittle is also important to match it with the widget style. To edit the title you will need the Widget ID again and also you need to figure out which heading is being used on the widget. Typically for recent post widget its H2 heading.
You can underline the heading using a text-decoration tag, set a color for title, and have the font size on your control.
The code block would be like this,
recent-posts-3 h2 {
text-decoration: underline;
color: black;
font-size: 1.3em;
}
#5. Style the post links inside the widget
Once the title is ready you need to edit the post link's color, font type, and you can use underline as well (optional).
Code for editing the post links,
recent-posts-3 a {
color: #ffffff;
font-size: 1 em;
}
Make sure the post links are purely visible and size is well optimized and looks catchy with the theme.
That's it. The complete CSS code for this recent post widget modification looks like this,
recent-posts-3 {
background-color: #1E73BE;
padding: 30px;
font-family: Times New Roman;
border-radius: 10px;
}
recent-posts-3 h2 {
text-decoration: underline;
color: black;
font-size: 1.3em;
}
recent-posts-3 a {
color: #ffffff;
font-size: 1 em;
}
The customization I have added in this post is a simple explanation WordPress widget styling in a few steps. You can customize your widgets in your own unique way.
Finally, you would always like to recheck the performance of your website in order to verify that the recently added code is not affecting the overall site performance.
Here's what this page's performance looks like,
If you have any confusion regarding this article drop a comment below I will be in touch as soon as possible. That being said... let's meet again in the upcoming article.
Follow our social media profiles on Twitter and Facebook 🙂
Need help with getting stuff done? Try Fiverr! You can find content writers for your website at a reasonable rate.