Easily add custom CSS and Javascript with LuckyWP Scripts control

Try Cloudways Hosting for free!!

Frequently, we have to add custom CSS and Javascript to our WordPress website. We can add custom CSS using the customizer. However, with this approach, it is difficult to organize and track the CSS rules we add, and we may add duplicate CSS rules, which is not something we want to do.

For this reason, it is better to use a dedicated plugin like LuckyWP Scripts Control (LSC). LSC allows you to ccontrol which part of the page your snippet is added to.

Adding snippets to the head section:

Adding snippets to the beginning of the body

adding snippets to the beginning of the body with LuckyWP

 

 

Adding snippets at the end of the body

I want to turn this title “Services” to red color :

I will add this CSS to the head section using LuckyWP :

This is the CSS rule that I added :

<Style>
.elementor-heading-title{color:red !important;}
</style>

And now when we refresh the page, the title should be red in color:

 

 

Try Cloudways Hosting for free!!

Now I want to add custom javascript using the LuckyWp plugin. For this, I have added a button to the services page:

 I will add this javascript to the end of body in LuckyWp :

<script>
document.getElementById("lucky").onclick=function() {myFunction();}
function() {alert("LuckyWP is awesome!");}
</script>

When I click the button, it will display an alert :

So, the script is working!

 

This Post Has 2 Comments

    1. Santosh Savadatti

      Hi Faisal, it has no effect on load times. It is a convenient way of managing scripts. Other than that there is nothing more to it. Also with the release of WordPress 5.5, I recommend Insert headers and Footers over this plugin

Leave a Reply