How to add custom css and js in wordpress templates?

In this article we will teach you how to add custom css and js in wordpress templates.

WordPress Template is a page which is responsible for look and design of every wordpress theme. WordPress has come with some default templates.

Basic Default Templates in WordPress :

  1. index.php – It is main template file and It is required in all themes.
  2. style.css – The main stylesheet. It is required in all themes and contains the information header for your theme.
  3. rtl.css – The right-to-left stylesheet is included automatically if the website language’s text direction is right-to-left.
  4. comments.php – The comments template.
  5. front-page.php – The front page template is always used as the site front page and if it exists, regardless of what settings on Admin > Settings > Reading.

Page Templates

  1. home.php – The home page template is the front page by default. If you do not set WordPress to use a static front page, this template is used to show latest posts.
  2. header.php – The header template file usually contains your site’s document type, meta information, links to stylesheets and scripts, and other data.
  3. singular.php – The singular template is used for posts when single.php is not found, or for pages when page.php are not found. If singular.php is not found, index.php is used.
  4. single.php – The single post template is used when a visitor requests a single post.
  5. single-{post-type}.php – The single post template used when a visitor requests a single post from a custom post type. For example, single-book.php would be used for displaying single posts from a custom post type named book. The index.php is used if a specific query template for the custom post type is not present.

Archive Templates

  1. archive-{post-type}.php – The archive post type template is used when visitors request a custom post type archive. For example, archive-books.php would be used for displaying an archive of posts from the custom post type named books. The archive.php template file is used if the archive-{post-type}.php is not present.
  2. page.php – The page template is used when visitors request individual pages, which are a built-in template.
  3. page-{slug}.php – The page slug template is used when visitors request a specific page, for example one with the “about” slug (page-about.php).
  4. category.php – The category template is used when visitors request posts by category.
  5. tag.php – The tag template is used when visitors request posts by tag.
  6. taxonomy.php – The taxonomy term template is used when a visitor requests a term in a custom taxonomy.

Media Templates

  1. author.php – The author page template is used whenever a visitor loads an author page.
  2. date.php – The date/time template is used when posts are requested by date or time. For example, the pages generated with these slugs: http://example.com/blog/2014/, http://example.com/blog/2014/05/, http://example.com/blog/2014/05/26/
  3. archive.php – The archive template is used when visitors request posts by category, author, or date. Note: this template will be overridden if more specific templates are present like category.php, author.php, and date.php.
  4. search.php – The search results template is used to display a visitor’s search results.
  5. attachment.php – The attachment template is used when viewing a single attachment like an image, pdf, or other media file.
  6. image.php – The image attachment template is a more specific version of attachment.php and it is used when viewing a single image attachment. If not present, WordPress will use attachment.php instead.
  7. 404.php – The 404 template is used when WordPress cannot find a post, page, or other content that matches the visitor’s request.

Every WordPress theme has specific template style and template Javascript. But some times we needs to add custom css and js in wordpress templates. So, we can do this by adding the code given below in your functions.php file under your themes directory.

Adding Custom Javascript in WordPress Templates

if (is_page_template( 'templates/home-template.php' )) {
	
	function rmc_adding_scripts() {

		wp_register_script('my_custom_script', get_template_directory_uri(). '/js/my_custom_script.js', array('jquery'),'1.1', true);

		wp_enqueue_script('my_custom_script');
	}

	add_action( 'wp_enqueue_scripts', 'rmc_adding_scripts' );

}

In the code above we have used the wp_register_style, wp_enqueue_script, and hook wp_enqueue_scripts. my_custom_script is a handle to identify the script unique and get_template_directory_uri is path to our directory and my_custom_script.js is a javascript file we have created in js directory under our themes directory.

Adding Custom CSS in WordPress Templates

if (is_page_template( 'templates/home-template.php' )) {
	
	function rmc_adding_styles() {

		wp_register_style('my_custom_stylesheet', get_template_directory_uri(). '/css/my-custom-stylesheet.css');

		wp_enqueue_style('my_custom_stylesheet');

	}

	add_action( 'wp_enqueue_scripts', 'rmc_adding_styles' );

}

In the code above we have used wp_register_style, wp_enqueue_style and hook wp_enqueue_scripts.

In both code we have checked the condition with is_page_template to identify our template file. Here above we have created our home-template.php file under templates directory in our themes directory. You can check for any template file.

If you want more tutorials and tricks about wordpress then visit our WordPress Page and follow us on facebook, twitter, tumblr, linkdedin and if you like this article then share this.

2024 - RMC