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
Displaying the logo
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>