Correct way to get custom template directory

Question

I have a custom template that includes a specific folder where the CSS files are located:

WP\wp-content\themes\tema\css

It does not find the file when I add it to my HTML file like this:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/tema/css/style.css">

I came across get_template_directory() but I don't know how to implement this so that I can access to my template folders?

Frits · Accepted Answer · 2019-06-11T14:05:44.027

3

The first thing to point out here is that get_template_directory() returns an absolute path instead of a URL.

Instead you will need to make use of either get_template_directory_uri() or get_stylesheet_directory_uri().

Your example would then look like this:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

The second thing to address is how you are adding your stylesheet. Wordpress has a very useful function that is optimised for adding stylesheets called: wp_enqueue_style().

Instead of manually adding your stylesheet to the header.php inside your theme directory, you can instead add it inside your functions.php file, like this:

add_action( 'wp_enqueue_scripts', 'so_my_custom_scripts' );
function so_my_custom_scripts() {
    wp_enqueue_style( 'my-custom-stylesheet', get_template_directory_uri() . '/css/style.css', array(), '20180618' );
}

edited Jun 11 '19 at 14:05

answered Jun 18 '18 at 11:17

Frits

7,341
10
42
60

I dont have a fucntions.php in my custom theme, where should i download the "starter pack for custom templates" ? :) – Krizs Jun 18 '18 at 11:42
My personal preference for a barebones theme is [_s (underscores)](http://underscores.me/) - an alternative is to create a [custom plugin to enqueue your custom stylesheet](https://stackoverflow.com/a/50832019/6049581) although that route is most definitely overkill if you are already building your own theme. – Frits Jun 18 '18 at 11:46
Because it's a roundabout way to do something that can easily be achieved inside your own functions.php file :) nothing wrong with it though, just personal preference :) – Frits Jun 18 '18 at 11:51

score 2 · Answer 2 · edited Jun 18 '18 at 11:06

2

Add this inside your functions.php

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
    wp_enqueue_style( 'st', get_stylesheet_directory_uri() . '/css/style.css', '', '0.0.1', 'all' );
}

edited Jun 18 '18 at 11:06

Frits

7,341
10
42
60

answered Jun 18 '18 at 11:01

Сергей Кондратюк

21
1

score 1 · Answer 3 · answered Jun 18 '18 at 10:58

1

Try tilde ~ to come to main root of website like this

<link rel="stylesheet" type="text/css" href="~/wp-content/themes/tema/css/style.css">

answered Jun 18 '18 at 10:58

Rohit Verma

3,657
7
37
75

Correct way to get custom template directory

3 Answers3