Hey Friends,
Where do you write your JavaScript when designing websites with Divi? Earlier I used to put them inside head element using <script> tags. But when the code becomes bigger, it’s ready difficult to manage the code as we have a little space inside. In this tutorial I’m going to talk about writing custom CSS and java scripts to add social media icons to Divi website.

It was the same for CSS, Although Divi comes with a separate section to add custom CSS it becomes very difficult to edit when you have lots of CSS in there.

social media icons and custom css

Therefore, I have been trying different plugins to overcome this issue and a way to split my big JavaScript codes into small parts, like we do when creating a custom website without WordPress.

After a couple of hours of searching and research, I was able to find a nice plugin that does exactly what I wanted. It’s called Simple Custom CSS and JS.

Add JavaScript

Let’s install the plugin. Go to Plugins -> Add New and search for “simple custom CSS and js”. Then the plugin will appear as below.

social media icons and custom css

Click the “Install Now” button and activate it. Next on the WordPress sidebar, a new Item will appear as “Custom CSS & JS” with a + icon in Infront of it. Hover over it and click the “Add Custom JS” link. It will take you to a page like below. You can give the code any name.

social media icons and custom css

Please remember to remove all the comments before you enter any code and make sure you enter your JavaScript code inside WordPress jQuery no conflict wrapper.

Next, make sure you change “Where on page” on the right side to “Footer” and keep other settings as it is and click “Publish”.

Add custom CSS code

This plugin can also be used to write custom CSS on WordPress. The process is pretty much the same as we added JavaScript. Hover over the “CSS& JS” item on the left sidebar and click “Add Custom CSS”.

social media icons and custom css

Here make sure you select the “Where on page” setting on the right sidebar to “Header”. Like we did, you can add as much as Stylesheets and JavaScript codes to add social media icons to your website as below.

social media icons and custom css

I hope that although this is a short tutorial, It will be helpful for you. I will see you in the next tutorial. Till then happy Designing.