How to add Stylesheet and JavaScripts in WordPress Theme

how to add stylesheet and javascript file in wordpress theme

Recently there is a huge increase in wordpress framework user. And there are lots of people who face problems while working on it. If you don’t have proper knowledge of coding then you don’t need to worry. Still you can customize the theme and dashboard. For example, you want to add extra stylesheet or javascript in wordpress theme. It can be done by simply using wordpress hook.

Now i will tell you how to add stylesheet or javascript file in a proper way. There are two methods for this. First one is using wp_enque script and another is using stylesheet_directory code.

Just follow these steps and then you can add as many stylesheets you want to add in your wp theme.

Method 1: Add Stylesheets & Scripts in Wp Theme using wp_enqueue_script

In wp_enqueue_script function. you can add many stylesheets and scripts from any folder and directory. for example i want to add bootstrap css and script in my wordpress theme.

Firstly go to “wp-content\themes\yourtheme” and paste bootstrap css and script folder there.

1

Step1:-

open WordPress Admin Dashboard and click on Appearance> Editor.

when you click on editor then you will see Edit Theme(theme-editor.php) page. look at the right side link. click on it to open functions.php link.

Wordpress Theme editor

 

Step2:-

Go to Functions.php, in the last of functions.php. create a function with any name.

For example my function name is pwh_styles. Now go through below example code.

//Style
function pwh_styles() {

 // Load our main stylesheet.
wp_register_style(  'yourtheme-style',  get_stylesheet_uri()  );
wp_enqueue_style(  'yourtheme-style'  );

 // Add Bootstrap Css file.
wp_register_style(  'bootstrap-style',  get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style(  'bootstrap-style'  );

add_action(  'wp_enqueue_scripts',  ' pwh_styles' );
Add Js File in Header:-

If you want to load js file before </head> section. then you need to set  false.

function pwh_scripts() {

// Add Bootstarp js file before </head>.
wp_register_script(  'script-jsscript', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array('jquery'), '1.1', false  );

wp_enqueue_script(  'script-jsscript' );
}

add_action(  'wp_enqueue_scripts',  'pwh_scripts'  );
or
Add Js File in Footer:-

If you want to load js file in footer section. . then you need to set  true.

function pwh_scripts() {

// Add Bootstarp js file before </head>;.
wp_register_script(  'script-jsscript', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array('jquery'), '1.1', true  );

wp_enqueue_script(  'script-jsscript' );
}

add_action(  'wp_enqueue_scripts',  'pwh_scripts'  );

 

 

now Save to Functions.php. and go to home page. you can see css and script in your webpage. press control+ u.

wp_enque_script

 

Method 2: Add Stylesheets using stylesheet_directory code

if you don’t want to use method 1. lets try alternate method 2.

if you want to add one or more than style sheets, this method is very suitable. Just  follow below steps.

Step1:

Login to open wordpress admin dashboard. Click to open Appearance> Editor (theme-editor.php). then open header.php file. and paste the below written code before </head>

<!-- Add Main StyleSheet (style.css) -->;
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />

or

 <!-- Add Main StyleSheet (style.css)using stylesheet_directory -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />

or you can add more css and javascript file.

<!-- Add More Css File -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/main.css" />
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jsfile.js"></script>

Note: replace main.css with your css file name.

  • http://www.centralpark.in/ Central Park

    Web & mobile app development company- http://www.appslure.com/

  • http://www.centralpark.in/ Central Park
  • Hari Krishana

    Article achha laga padhkar lalit babu
    http://www.khulasaa.in/

    • http://www.pcwebhow.com/ Lalit Panwar

      thanks @harikrishana:disqus

  • Jatin Dabas

    Wonderful post!
    Thank you for sharing this valuable information regarding ways to add styles to WordPress. Really helpful.

    Thanks,
    Oodles Technologies

  • rahul9789

    nice post sir,

    http://newsbaki.com