Skip to Main Content

How to Add a CSS Code Safely to WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Has this ever happened to you? You install a plugin, it has the exact functionality you are looking for, but… it doesn't work properly. Even after changing all the settings, it does not always adapt to your WordPress theme. So, because of this little flaw, you are probably considering choosing another solution. How to add wordpress css code 1

Still, if you are a little DIY, and you may have been able to add CSS code here and there to solve a problem on your blog, then you can fix it, especially if in the plugin that does not work not properly, the developer does not offer CSS section, you will have to do it yourself.

This tutorial will allow you to get there by adding a code correctly on your WordPress plugin.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog.

Then, back to why we are here.

Custom CSS Styles = More Control over Appearance

Custom CSS styles allow you to manipulate the appearance of various elements beyond what the developer intended. Today, many high-end plugins include custom styling options, but free plugins aren't always meticulous enough in this regard.

Take one of the most popular plugins: Contact Form 7. It offers very little maneuverability on the CSS side. However, thanks to the personalized CSS, you can completely change all aspects of your forms.

But still, even plugins with detailed options do not always give you the ability to customize CSS code.

So, learning a little CSS, and adding it safely, will allow you to to be able to model what visitors can see

Why do you need to correctly add CSS code?

You certainly do not want to add messy CSS on your website. As many developers think, there is a good and bad way to add CSS code to your blog.How to add wordpress css code 2

Discover our 4 WordPress plugins to customize CSS on your blog

When you add CSS styles in the right way, they will always be safe, even if you update your WordPress theme, and you will be able to copy them easily and paste them on a new theme if you ever decide to change yours.

See also How to customize the CSS of your WordPress website

Conversely, by adding them in the wrong way, your CSS code will be much more exposed and may not be effective. Some of you are using the Divi WordPress theme. So I will show you how to add CSS code on this WordPress theme.

Where to add a CSS style on Divi

To safely add a CSS code on Divi, you will need to access the " Theme Options In your Divi menu:

add-a-code-css-on-theme-wordpress

Then, in the "General" tab (which will be the tab loaded by default), you will need to scroll to the bottom of the page. There you will find a section called " Custom CSS ":

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Code-css-customize-divi

Technically, all you need to do is enter your custom CSS code here and click " Save Changes ". But, because we want it to be really easy to move or copy, we're going to take it a step further. Discover other tutorials on Divi by consulting our best resources on Divi

Because you may have already added some custom codes to Divi, it will help you organize custom CSS in this section. To do this, you need to add a comment saying something like " CSS Styles Start Here Plugin ". Then you can add the custom CSS code in this section.

To add a comment, all you need to do is copy and paste this code:

/ * Plugin CSS Styles Start Here * /

add-a-code-css-customize-divi

The comment will not affect anything, but will help you organize your different custom CSS styles. Divi will also keep your custom CSS styles safe during updates, so you can not worry about losing them.

Where to add CSS code on other WordPress themes

If you use a different WordPress theme, you will need to add your custom CSS codes to your child theme. If you do not use a child theme, or do not know what it is, I invite you to read this tutorial: How to install a child theme on WordPress

Assuming you have your child theme set up, you can edit it directly in your WordPress dashboard by going to " Appearance> Editor "

Customization-of-theme-wordpress

Make sure you change the correct child theme. Your changes must be made to the file " styles.css ».

Then you just need to add your custom CSS exactly like you did before. First, create a comment block, and add your code:

add several-pack-of-code-css-on-wordpress

To summarize

Before you embark on this adventure, you will need to have some knowledge of CSS. You will find various courses online. Also, you need to know that adding a code is not just about adding code. To find yourself in your changes, you will need to use comment blocks for example to give a reason for any CSS changes.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

We offer you here some premium WordPress plugins that will help you do that.

1. Slider

Slider Pro is one of CodeCanyon's top three sellers. It provides a clean and intuitive user interface in the administration area and a smooth browsing experience for users and visitors.Slider pro responsive wordpress slider plugin

It avoids unnecessary fantasies, which are often an obstacle for users who are looking for the information they need. In addition, it focuses on simplicity and performance, while offering a wide range of customization possibilities.

See also How to create a slideshow with Slider Revolution on WordPress

Its management of Urls on the browser's search bar is one of the features that marked us on the latter. As the name suggests, this is the professional solution you need.

Read also our 5 WordPress plugins to create FAQs on a blog

Its features are: theoptimized harnessing of images, the peasy customization,Flowing nimations, pmany layouts et more.

Download | Demo | Web hosting

2. ARMember

ARMember is a WordPress content protection plugin. It's a unique solution that allows you to sell subscriptions on any website. It has a whole range of tools that allows you to protect completely or partially its contents.

Armember wordpress membership plugin

Another of its features is the fact that it offers a free option that is a bit limited in terms of features. Speaking of features, this powerful WordPress plugin offers among others: The possibility of plan its contents, support for several subscription plans, easy configuration, migration between different subscription plans, WooCommerce support, several models of forms, and more.

It is also a reference in this niche.

Download | Demo | Web hosting 

3. WooCommerce Cart Based Shipping

Cart based shipping allows you to set different shipping rates based on the items a customer has in their cart. There are three methods of calculation: by the total price, by the number of items in the basket, and by the weight. WooCommerce-cart-based-shipping-plugin-WooCommerce-shipping-BASED-on-cart

For example, the greater the subtotal or the weight of the basket, or the more items the customer buys, the higher the shipping rate.

See also our 10 WooCommerce plugins to create shipping scenarios

You can also set this feature to be available only in certain countries.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it for this tutorial that shows you how to add custom CSS code safely to WordPress. If you have some Comments or suggestions, do not hesitate to let us know in the reserved section.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks

... 

This article features 1 comment

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
19 shares
Share12
tweet4
Save3