• Blog
  • Blogzone
  • Camolin
  • Collon
  • Contact Me
  • Home
  • Ivory
  • Ryzen
  • Trex
No Result
View All Result
Vicky.Dev
  • Tutorials
  • Themes
  • Plugins
  • SEO
  • Tech
  • Blockchain
  • Misc
  • Contact Me
  • Tutorials
  • Themes
  • Plugins
  • SEO
  • Tech
  • Blockchain
  • Misc
  • Contact Me
No Result
View All Result
Vicky.Dev
No Result
View All Result

wp_enqueue_style & wp_enqueue_script In WordPress – How To Use? Beginners Guide

Vicky Bhandari by Vicky Bhandari
October 21, 2022
in Tutorials
0
wordpress function image

Image by Pexels.com

Table of Contents

Toggle
  • What is wp_enqueue_style & wp_enqueue_scripts In WordPress ?
    • wp_enqueue_style –
    • Why it needed to enque wp_enqueue_style & wp_enqueue_scripts-
    • Let me just show you how this function works.
    • wp_enqueue_scripts function :

What is wp_enqueue_style & wp_enqueue_scripts In WordPress ?

WordPress is very interesting platform. Specially if you are a developer, there are so many things to learn. wp_enqueue_style and wp_enqueue_scripts, these two are the most common WordPress functions. If you are familiar with WordPress then you may already have some idea about this. Today we are going to write about the same. This article will give you complete idea about these two function.

wp_enqueue_style –

Stylesheets are the most important part of the development. This thing is not limited to just WordPress. All the visual part of the web is to related stylesheet.  The stylesheets that you make in the WordPress are loaded through wp_enqueue_style();  function.

If you are a beginner then you might feel overwhelmed after reading this. But don’t worry, wp_enqueue_style & wp_enqueue_scripts functions are not that complicated as it seems to be. At this point you might be wondering, why we are using this? Because in HTML we just have to give the path of the stylesheet to include styling.

This happens because WordPress doesn’t work this way. In WordPress we have to use functions like wp_enqueue_style & wp_enqueue_scripts to get the path, and tell WordPress to load it. This is not a complex function as I already said, but there some things that you should understand properly. This guide will cover all the important things about wp_enqueue_style function.

Why it needed to enque wp_enqueue_style & wp_enqueue_scripts-

You can add stylesheets and scripts by just using <scripts></scripts> tag. But this can many problems when we use other plugins and scripts. In simple words this way can conflict in between them.

Let me just show you how this function works.

<?php 

 //registring function to load scripts​ //

<?php function load_scripts() {
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',array('jquery'),'4.6.1',true);
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',array(),'4.6.1','all');
    wp_enqueue_style('template', 'get_template_directory_uri'().'/css/template.css');
}
add_action('wp_enqueue_scripts','load_scripts');

In the above example you can clearly see that we first registered function to load scripts. You can give this function any name of your choice. All the paths for stylesheets and JavaScript files are written inside it.

1.  Step 1-

<?php function load_scripts() {

}

2.  Step 2-
Now we can enqueue the stylesheet. In this step we have to give WordPress the path of the file that we want to load. The get_template_directory_uri(); function brings the path of the file that we want to load.

   wp_enqueue_style('template', 'get_template_directory_uri'().'/css/template.css');

Step 3 –
Now we have everything ready we can simply tell WordPress to load the file. The above mentioned function is used to tell WordPress to implement the load_scripts() function we created.

add_action('wp_enqueue_scripts','load_scripts');

wp_enqueue_scripts function :

If you understood the wp_enqueue_style function. Then you can understand this function easily. Because there is not much difference between the two. This function is as important as the wp_enqueue_style function. Because functionality is as important as visual part. Let’s understand this by example.

Unlike the wp_enqueue_style (); , wp_enqueue_scripts(); function this function is used to load javascript files.

Steps to use wp_enqueue_scripts function –
1. Step 1- At this moment we already know how to register the load_scripts();

<?php function load_scripts() { }

2. Step 2-
Now we can enqueue the JavaScript files. We need to give path to the JavaScript file as mentioned below.

wp_enqueue_script('bootstrap-js','https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',array('jquery'),'4.6.1',true);

Step 3 –
The final step towards loading JavaScript is to tell the WordPress to load the function. This step is to implement all the work we have done.

add_action('wp_enqueue_scripts','load_scripts');

This is not all, this way you can add other things such as google fonts and plugins scripts files as well.

With all this we have shown you everything you need to know to use  wp_enqueue_style & wp_enqueue_script functions. If you like this and learnt something new then don’t forget to read our other articles.

 

Previous Post

How to use get_template_part function : A Short Tutorial

Next Post

What is wp_nav_menu() ? And how it works?

Next Post
wp_nav_menu

What is wp_nav_menu() ? And how it works?

Thenorthernmarkets.com review Trading 24/7 with Fast Execution and Access
Misc

Thenorthernmarkets.com review Trading 24/7 with Fast Execution and Access

by Vicky Bhandari
February 14, 2025
0

Thenorthernmarkets.com review highlights a trading experience like no other, with its 24/7 access to global markets and lightning-fast execution times....

Read more
Carpet Cleaning West Palm Beach FL – Bio Steam Carpet Cleaners

Carpet Cleaning West Palm Beach FL – Bio Steam Carpet Cleaners

May 22, 2024
Microbrand Watch Repair Shop Near You: 8 Other Reasons

Microbrand Watch Repair Shop Near You: 8 Other Reasons

April 9, 2024
Streamline & Succeed: Tech Strategies for Peak Performance

Streamline & Succeed: Tech Strategies for Peak Performance

April 6, 2024
How Does Algorithm at Slot Machines Work?

How Does Algorithm at Slot Machines Work?

March 7, 2024

© 2022 Vicky Bhandari. All Rights Reserved.

No Result
View All Result
  • Tech
  • Themes
  • Tutorials
  • Misc
  • SEO
  • Plugins
  • Blockchain

© 2022 Vicky Bhandari. All Rights Reserved.