Welcome to lesson 4 of the Custom WordPress Theme Development free course. In this article, we focus on how to add styles sheets, frameworks and java script files in WordPress Theme.
Remember that when you developing a website through WordPress you may use different plugins for different options you may need in your website. So, it’s important that WordPress Themes and Plugins load scripts and styles using the WordPress Standard method.
To add the stylesheets and script files in WordPress Theme Development by using enqueue function in the functions.php file.
wp_enqueue_styles() – add the stylesheets in your header section
wp_enqueue_script() – add the script files in your header/footer section
Let’s see how to Enqueue the Styles and Scripts function in the functions.php file
How the wp_enqueue_style WordPress Theme Development
wp_enqueue_style( $filename, $path, $dependent, $version, $media );
$filename: name your style sheet. Ex: btechiot-styles
$path: give the path of your file with below template tag.
get_template_directory_uri().'place the path of the file'
$dependent: if your stylesheet is dependent on bootstrap then give the name of dependent file
array('btechiot-bootstrap')
$version: give the version number for your style for feature reference
$media: can specify the type of media to load this stylesheet, as - 'all', 'screen', 'print', or 'handheld'
Adding Stylesheets to your WordPress Theme Development in the head section
//registering Styles
function btechiot_register_styles(){
//version number of my custom stylesheet
$version = wp_get_theme()->('Version');
//my style sheet is dependent on bootstrap & fontawesome
wp_enqueue_styles('btechiot-styles', get_template_directory_uri()."/style.css", array('btechiot-bootstrap','btechiot-fontawesome'), $version, 'all');
//linking styles from boostrap cloud link or frameworks links.
wp_enqueue_styles('btechiot-bootstrap', "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", array(), '4.4.1', 'all');
wp_enqueue_styles('btechiot-fontawesome', "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css", array(), '5.13.0', 'all');
}
//action hook for wp_enqueue_styles
add_action('wp_enqueue_scripts','btechiot_register_styles');
How the wp_enqueue_script WordPress Theme Development
wp_enqueue_script( $filename, $path, $dependent, $version, $footer);
$filename: name of the script file
$path: path of your file location
$dependent: script file is dependent on other files Ex: my script file dependent on jQuery
$version: version number for future reference
$footer: its an boolean parameter(true/false)
true - for place my script files in footer
false - place my script files under head section
Adding Script files to your WordPress Theme Development header/footer part
//registering Scipts
function btechiot_register_scripts(){
// version number
$version = wp_get_theme()->('Version');
//my script file dependent on bootstrap js & jQuery
wp_enqueue_script('btechiot-script', get_template_directory_uri()."/assets/js/main.js", array('btechiot-bootstrap-script'), $version, 'true');
wp_enqueue_styles('btechiot-bootstrap-script', "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js", array('btechiot-jquery','btechiot-popperjs'), '4.4.1', 'ture');
wp_enqueue_styles('btechiot-jquery', "https://code.jquery.com/jquery-3.4.1.slim.min.js", array(), '3.4.1', 'true');
wp_enqueue_styles('btechiot-popperjs', "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js", array(), '1.16.0', 'true');
}
// action hook for scripts
add_action('wp_enqueue_scripts','btechiot_register_scripts');
Now have a questioning mind that how to call this function in header.php and footer.php
Calling the stylesheets in the head section on header.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog Site Template</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Blog Site Template">
<meta name="author" content="https://youtube.com/FollowAndrew">
<link rel="shortcut icon" href="images/logo.png">
<!-- calling the stylesheets from function.php -->
<?php wp_head(); ?>
</head>
<body>
<header>
<a href="#" class="logo">your logo</a>
<nav>
<!-- your menu navigation section -->
</nav>
</header>
Calling script files in the footer section on footer.php
<footer class="footer-section">
<!-- place your footer content -->
</footer>
<!-- calling script files from functions.php -->
<?php
wp_footer();
?>
</body>
</html>
That’s all about the how-to enqueue the scripts and stylesheets in functions.php for your Custom WordPress Theme Development.
In the next lesson, we learn how to get the content of your header.php and footer.php from WordPress Dashboard dynamically. Example: Getting site name, meta info, adding logo and nav menu bar section.
