Using WordPress ‘get_stylesheet_directory_uri()’ PHP function

The get_stylesheet_directory_uri() WordPress PHP function retrieves the stylesheet directory URI for the active theme.

Usage

echo get_stylesheet_directory_uri();

Output: https://example.com/wp-content/themes/mytheme

Parameters

  • None

More information

See WordPress Developer Resources: get_stylesheet_directory_uri()

This function returns the URL to the current child theme if a child theme is used. If you want to return the URL to the root/mother theme, use get_template_directory_uri() instead.

When using inside HTML src attribute, you should escape the returned URL when you add some files after the function:

<script async type="text/javascript" src="<?php echo esc_url( get_stylesheet_directory_uri() . '/dist/main.js' ); ?>"></script>

Examples

Display a logo image from the active theme’s “images” directory.

<img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/images/logo.png' ); ?>" alt="Logo" />

Loading a custom stylesheet

Load a custom stylesheet named “custom-styles.css” from the active theme’s “css” directory.

<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_directory_uri() . '/css/custom-styles.css' ); ?>" />

Loading a custom JavaScript file

Load a custom JavaScript file named “custom-scripts.js” from the active theme’s “js” directory.

<script src="<?php echo esc_url( get_stylesheet_directory_uri() . '/js/custom-scripts.js' ); ?>"></script>

Loading a font

Load a custom font file named “custom-font.woff2” from the active theme’s “fonts” directory.

<style>
@font-face {
  font-family: 'Custom Font';
  src: url('<?php echo esc_url( get_stylesheet_directory_uri() . '/fonts/custom-font.woff2' ); ?>') format('woff2');
}
</style>

Displaying a background image

Set a background image from the active theme’s “images” directory for a div with the class “background-image”.

<style>
.background-image {
  background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() . '/images/background.jpg' ); ?>');
}
</style>
<div class="background-image"></div>