pcbway




Enqueue Scripts Files in WordPress Plugin, add scripts in wordpress plugin, script files in wordpress plugin,Enqueue Scripts FilesHello everyone, I hope you all are fine and having fun with your lives. In today’s tutorial, I am gonna show you How to Enqueue Scripts Files in WordPress Plugin. It’s the third tutorial in this series of WordPress Plugin Creation. In our previous tutorial, we have seen How to Add Basic Functions in WordPress Plugin, so now the next thing we need to add is our scripts .js files and style .css files.

As I told you in my previous tutorial that we can add these codes in a single file as well but it will make the file too heavy and complex. But if we divide our code in separate files then it will be quite easily to handle and debug in future. So, let’s have a look at How to Enqueue Scripts Files in WordPress Plugin:

Enqueue Scripts Files in WordPress Plugin

  • Let’s first create a sample .js and .css files.
  • So create a new folder in your main folder and rename it to assests.
  • In this assets folder, create two files and rename them to:
    • mystyle.css
    • myscript.js
  • Here’s the folder and files tree which we have created so far:

Enqueue Scripts Files in WordPress Plugin, add scripts in wordpress plugin, script files in wordpress plugin,Enqueue Scripts Files

  • Today, I am not gonna add any code in .js or .css files, we will only include them in our Main PHP File.
  • In coming tutorials, we will add codes in these files.
  • So, now we have created our files, let’s Enqueue Scripts Files in main PHP file.

  • In the above code, you can see I have added a new function named enqueue().
  • The method used to include css file is wp_enqueue_style, which is a predefined WordPress method.
  • I have provided it with the path of our newly created css file, placed in assets folder.
  • Same goes for the js file with a slight change in predefined WordPress method, for script it is wp_enqueue_script.
  • We have successfully created the files and then the enqueue function, now we also need to call this function.
  • We can call it in the construct function as construct is automatically called on class initialization but it’s better to not add much load on the construct function.
  • So here’s how we are gonna do that:

  • You can see in the above code that I have created a new function called init_func() and I have simply called enqueue function there.
  • I have highlighted another line at the bottom where I have used the variable having new instance of our class, and then triggered the init_func() method.
  • It’s like an initialization function so if we need to call some other functions at start, we will simply place them in this init_func().

Enqueue Scripts Files in WordPress Plugin, add scripts in wordpress plugin, script files in wordpress plugin,Enqueue Scripts Files

So, that’s how we can easily Enqueue Scripts Files in WordPress Plugin. I hope you guys have enjoyed today’s tutorial. In the next tutorial, we are gonna have a look at How to insert custom Links in WordPress Plugin. Till then take care and have fun !!! 🙂

Leave a Reply

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

Post comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.