No results found. Try again with different words?

Search must be at least 3 characters.

How to add custom CSS and JavaScript to Astra theme

Sidebar Image

Did not find a solution? We are here to help you succeed.

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.

Was this article helpful?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form