Using WordPress ‘get_template_directory_uri()’ PHP function

by

The get_template_directory_uri() WordPress PHP function retrieves the template directory URI for the active theme.

Usage

To use the function, simply call it like this:

echo get_template_directory_uri();

This will output the template directory URI for the active theme.

Parameters

  • None

More information

See WordPress Developer Resources: get_template_directory_uri()

This function returns the URL to the root theme. If a child theme is used and you want to return the URL to the current child theme, use get_stylesheet_directory_uri() instead.

Since WordPress 4.7.0, you can use get_theme_file_uri() which will give the actual child theme URL or Theme URL if no child Theme exists.

Examples

<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" width="" height="" alt="" />

Enqueue a script with the correct path

function wpdocs_scripts_method() {
    wp_enqueue_script('custom_script', get_template_directory_uri() . '/js/custom_script.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'wpdocs_scripts_method');

Enqueue scripts and styles for a theme

function wpdocs_theme_slug_scripts() {
    wp_enqueue_script('theme-slug-custom-script', get_template_directory_uri() . '/js/custom-script.js', array(), '1.0.0', true);
    wp_enqueue_style('genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'wpdocs_theme_slug_scripts');

Load a custom CSS file

function wpdocs_custom_css() {
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom-style.css');
}
add_action('wp_enqueue_scripts', 'wpdocs_custom_css');

Load a custom font from Google Fonts

function wpdocs_load_google_fonts() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Roboto&display=swap', false);
}
add_action('wp_enqueue_scripts', 'wpdocs_load_google_fonts');