Also, it is not mandatory to name this file main.js. Let’s create this file and put it inside assets/js directory. You don’t have to worry about downloading and including this file manually.Ģ) main.js file for housing all our custom javascript code. WordPress ships with the latest version of jQuery plugin by default. We already created this file at the initial stages of our theme development. Now that the directory structure in place, let’s go ahead and download the initial stylesheets and scripts we need to proceed forward with this project Here is how assets directory looks inside Visual Studio Code Editor: Pin So, let’s create four more directories under assets. ![]() In other words, its a directory for housing publicly accessible assets like scripts, stylesheets, images and custom fonts like F ontAwesome. modernizr.js for detecting features of the browser like flexbox,grid, etc.įor the purposes of this project, We will be using quite a lot of third-party stylesheets and scripts.Īnd to house these scripts and stylesheets, let’s create a new directory inside our nd-dosth theme and let’s name it assets .superfish.js and superfish.css for creating accessible drop-down menus.bootstrap.css to save our time when dealing with layouts, tabs, accordions.normalize.css for resetting browser-based styles.Third Party Stylesheets and Scripts Like.In the case of WordPress, we usually put all our custom styles inside the style.css file and our main Javascript code inside the main.js file Your own main stylesheet and script files that you write as a ninja frontend Developer.These are generally divided into two categories. Let’s deal with the scripts and stylesheets.Īfter the favicon, the next big thing that we have to deal with is our website stylesheets and scripts. Yeah! Right now, the file only contains an opening PHP tag. ![]() This is my current functions.php file after removing everything from it except the opening PHP tag. Real code that goes inside the functions.php file starts from this module. I made you add them just for the sake of demonstrating action hooks. ![]() Now before we add our scripts and styles to the element, let’s clean up the functions.php file by removing everything that we added in the last part. In this part, We will learn how to load scripts and styles to our WordPress site. In Part 1: Developing a WordPress theme from scratch, we have learned about the foundations of the WordPress Theme Development.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |