It’s crucial for designers and developers to know how to properly include JavaScript and CSS files in WordPress themes and plugins. Not just because they should function properly but also for the reason that they should not affect the theme or any of the plugins on your website.
Now, there are several ways that you can use to insert custom CSS and javascript in your website; however, in this document, we will share some of the best practices.
What is custom CSS?
Cascading Style Sheets, or CSS, is a way to add styling directives to the back-end code of your website. It’s a crucial component of your website that establishes its appearance and feel. Your website will just be a collection of unattractive scripts without CSS.
When you install a theme or import a template, a Style.PHP file is created on your website. This is where the code that tells WordPress on how your website should look, will be saved. When you override the existing look of your website by using customized code and save it in the style. css file, those codes are called custom CSS.
What is a JavaScript Query?
Javascript is a scripting language that enables you to do just about everything, including creating dynamically updated material and managing multimedia. It is remarkable what you can accomplish with a few lines of JavaScript code. To answer simply. Javascript adds the functions to your website.
Method 1: Inserting the Custom CSS and JavaScript to your website directly
By default, WordPress creates <Style> tags for the CSS and <Script> tags for the JavaScript Queries. So, if you are inserting any internal CSS, you will need to wrap that up within the <style > tag and for the internal JavaScript queries, you will need to wrap it up within the <script> tag. For example, the WordPress will understand that the following code is a CSS and will make all the header 1 and header 2 have a background color of the color code #7bdcb5.
Add_action( ‘admin.head’, ‘custom_internal_css’);
Function custom_internal_css(){
<style>
.h1, h2 {
background-color: #7bdcb5;
}
</style>;
}
Now if this is a JavaScript query, we will need to wrap it up with the <script> and </script> tags. For example,
add_action( 'astra_entry_before', function() {
<script>
add_filter( 'astra_get_option_enable-related-posts', '__return_true' );
</script>;
} );
WordPress will understand that this is a Javascript code and it enables the related post option on your website.
If you are inserting an external code which is not there on your theme or website, you must use the action hook
wp_enqueue_scripts
You can not just print <script> or <link> tags inside these hooks, you have to use special functions, such as
- wp_register_script() / wp_register_style()
- wp_deregister_script() / wp_deregister_style()
- wp_enqueue_script() / wp_enqueue_style()
- wp_localize_script()
- wp_add_inline_script()
There are more functions like this on the WordPress directory; however, generally using these hooks are enough. For an example,
add_action( 'wp_enqueue_script', function() {
Wp_enqueue_script( add_filter
{'astra_get_option_enable-related-posts', '__return_false'
};
} );
Method 2: Using the Astra Hooks plugin
You can also do this using a simple plugin named Astra Hooks that we have developed. You can download this amazing free plugin from here. Astra uses the WordPress Hooks API to insert actions throughout the theme. This plugin allows you to “hook” your custom Content, Shortcodes or Java Script code in the various hook locations. You can learn more about this plugin here.
