How to add custom css and js in wordpress templates?

In this article, we will guide you on how to add custom CSS and JS to WordPress templates.

A WordPress template determines the look and design of every theme in WordPress. WordPress includes some default templates by default.

Basic Default Templates in WordPress:

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

Page Templates

1. home.php – The home page template, which is the front page by default. If WordPress is not set to use a static front page, this template shows the latest posts.
2. header.php – The header template file, usually containing the site’s document type, meta information, links to stylesheets and scripts, and other data.
3. singular.php – The singular template is used for posts if single.php is not found or for pages if page.php is not found. If singular.php is missing, index.php is used.
4. single.php – The single post template, 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 instance, single-book.php would display single posts from a custom post type named book. If a specific query template for the custom post type is not present, index.php is used.

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 display an archive of posts from the custom post type named books. If archive-{post-type}.php is not present, archive.php is used.
2. page.php – The page template, used when visitors request individual pages, which are a built-in template.
3. page-{slug}.php – The page slug template, used when visitors request a specific page, such as one with the “about” slug (page-about.php).
4. category.php – The category template, used when visitors request posts by category.
5. tag.php – The tag template, used when visitors request posts by tag.
6. taxonomy.php – The taxonomy term template, used when a visitor requests a term in a custom taxonomy.

Media Templates

1. author.php – The author page template, used whenever a visitor loads an author page.
2. date.php – The date/time template, used when posts are requested by date or time. For example, 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, 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, used to display a visitor’s search results.
5. attachment.php – The attachment template, used when viewing a single attachment such as an image, pdf, or other media file.
6. image.php – The image attachment template, a more specific version of attachment.php, used when viewing a single image attachment. If not present, WordPress will use attachment.php instead.
7. 404.php – The 404 template, used when WordPress cannot find a post, page, or other content that matches the visitor’s request.

Every WordPress theme includes specific template styles and JavaScript. However, there are times when you need to add custom CSS and JS to WordPress templates. This can be done by adding the following code to your functions.php file located in your theme’s 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');
}

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 use the wp_register_style, wp_enqueue_script, and wp_enqueue_scripts functions. The handle my_custom_script uniquely identifies the script, and get_template_directory_uri provides the path to our directory, while my_custom_script.js is a JavaScript file created in the js directory under our theme’s directory.

In both code snippets, we check the condition with is_page_template to identify our template file. The example above checks for the home-template.php file located in the templates directory of our theme’s directory. You can adapt this to check for any template file.

If you are looking for more tutorials and tips on WordPress, visit our WordPress Page.