WordPress has lots of option to get an eye-catching readymade theme whether you convert it from the platforms like Bootstrap or scratch. But many people prefer to get a customized theme for their WordPress website. If you want some specific […]
WordPress has lots of option to get an eye-catching readymade theme whether you convert it from the platforms like Bootstrap or scratch. But many people prefer to get a customized theme for their WordPress website. If you want some specific designs in your WordPress theme then here are 3 methods for you to add or manage the customized designs for your WordPress theme or you can hire a WordPress Agency for design and develop your website. But if you want to add a custom design to WordPress on your website on your own then you are not alone. We are happy to help you here.
- Method 1: CSS personalization field provided by the theme
Most themes, if not all, allow you to add custom CSS in your options. Normally, in light themes, this option is found in the theme’s personalization menu, in Appearance> Customize. There should appear a tab Custom CSS or additional CSS, as is my case. There we can put our CSS styles and it will work great.
Advantage: using this method we can see the changes we make in real-time, without having to save and reload the page.
- Method 2: add CSS through a plug-in
There is a variety of plug-ins that allows us to add our own CSS to WordPress. However, my favorite is Simple Custom CSS because it is simple and lightweight, but you are free to try any other.
Advantage: when using a plug-in our styles will remain even if we change the theme.
- Method 3: add CSS by modifying the CSS files
All themes come with CSS files that can be modified. The main CSS file is the style.css but there may be more depending on the complexity of the theme. If the file is to be modified it is always better to modify the style.css directly. It is found in the directory of our theme, in wp-content / themes.
Advantage: if we have all the styles in the same document, it means that the browser will only load a CSS resource which improves the loading speed.
What method do you recommend using?
This is easy:
If what you are going to stylize is elements that are not part of the theme but of a plug-in (for example woocommerce) I recommend using the second method, since if we change the theme (but keep the woocommerce) we will continue to have our custom styles for that plug-in. The most preferable is to hire a sketch to WordPress service for getting a good website.
If you are going to stylize elements that are part of the theme you can use the first or the third method, taking into account that the advantage of the first method is that it allows you to see the changes in real-time. The third method is recommended for more advanced users, who use a custom template or a fresh theme to avoid losing the changes after the update, or rather for people who know what they do.