WordPress offers a powerful platform to create dynamic websites and web applications. As a developer, you may want to add your own custom JavaScript and CSS to enhance the functionality and style of your website. In this article, we will explore different ways to add your own JS and CSS on WordPress.
There are two main ways to add your custom JS and CSS to WordPress:
- Enqueue your scripts and stylesheets: WordPress provides a built-in function, wp_enqueue_script() and wp_enqueue_style(), to add your custom scripts and stylesheets respectively. By using this function, you can easily add your scripts and stylesheets to your WordPress theme or plugin without worrying about conflicts with other scripts and styles.
- Add your scripts and stylesheets directly: You can also add your custom scripts and stylesheets directly to your WordPress theme or plugin by using the <script> and <link> tags. While this method is simpler and quicker, it is not recommended because it can cause conflicts with other scripts and styles.
Let’s explore the first method in more detail.
Step 1: Create your custom script and stylesheet files
Before we can enqueue our custom scripts and stylesheets, we need to create them. You can create your files using any text editor or code editor, such as Notepad, Sublime Text, or Visual Studio Code. Make sure to save your files with the .js and .css extensions, respectively.
Step 2: Enqueue your scripts and stylesheets
Once you have created your custom files, you can enqueue them using the wp_enqueue_script() and wp_enqueue_style() functions. These functions take several parameters, including the handle, source, dependencies, version, and media.
Here is an example of how to enqueue a custom script:
function wpd_custom_scripts() {
wp_enqueue_script( 'wpd-script', get_template_directory_uri() . '/js/wpd-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpd_custom_scripts' );In this example, we are adding a custom script called wpd-script.js, located in the js directory of our theme, to the WordPress site. We are also specifying that our script depends on jQuery, and we are setting the version to 1.0.0. The final parameter, true, specifies that our script should be loaded in the footer of our site.
Here is an example of how to enqueue a custom stylesheet:
function wpd_custom_styles() {
wp_enqueue_style( 'wpd-style', get_template_directory_uri() . '/css/wpd-style.css', array(), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'wpd_custom_styles' );In this example, we are adding a custom stylesheet called wpd-style.css, located in the css directory of our theme, to the WordPress site. We are not specifying any dependencies for our stylesheet, and we are setting the version to 1.0.0. The final parameter, all, specifies that our stylesheet should be applied to all media types.
Step 3: Test your scripts and stylesheets
Once you have enqueued your custom scripts and stylesheets, you can test them by visiting your WordPress site and inspecting the source code. You should see your custom scripts and stylesheets included in the <head> and <body> sections of your site.
In conclusion, adding your own custom JS and CSS to WordPress is a simple and powerful way to enhance the functionality and style of your website or web application. By using the wp_enqueue_script() and wp_enqueue_style() functions, you can easily add your custom scripts and stylesheets to your WordPress theme or plugin without worrying about conflicts with other scripts and styles.