Using get_theme_file_uri to get a theme file URL in WordPress

The get_theme_file_uri function in WordPress is designed to retrieve the URL of a file within the active theme. This function searches for the specified file in the child theme first. If the file is not found in the child theme, it then searches in the parent theme.

This function can be beneficial in various scenarios. For instance, it can be used when a developer needs to link to a specific file in the theme directory. It can also be used when loading scripts or stylesheets that are located within the theme directory.

By using this function, the system automatically determines the correct URL, regardless of whether the file is located in the parent theme or a child theme. This ensures that the correct file is always loaded, even if the theme structure changes.

Parameters Accepted by the get_theme_file_uri Function

The get_theme_file_uri function in WordPress accepts one parameter:

  • $file (string) – This is an optional parameter with a default value of an empty string. It represents the file that the function will search for within the stylesheet directory.

Return Value of the get_theme_file_uri Function

The get_theme_file_uri function returns a string value, which is the URL of the specified file.

Should the function not accept any parameters, it will be clearly stated in a concise manner.

Examples

How to Load a CSS File Using get_theme_file_uri

function my_theme_enqueue_styles() {
 wp_enqueue_style( 'my-style', get_theme_file_uri( '/css/my-style.css' ), array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

In this example, the get_theme_file_uri function is used to get the URL of a CSS file named ‘my-style.css’ that is located in the ‘css’ directory of the current theme. This URL is then used by the wp_enqueue_style function to add the CSS file to the WordPress site. The add_action function is used to hook this functionality into the ‘wp_enqueue_scripts’ action, which is the appropriate action to use when enqueuing scripts and styles in WordPress.

How to Load a JavaScript File Using get_theme_file_uri

function my_theme_enqueue_scripts() {
 wp_enqueue_script( 'my-script', get_theme_file_uri( '/js/my-script.js' ), array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

In this example, the get_theme_file_uri function is used to get the URL of a JavaScript file named ‘my-script.js’ that is located in the ‘js’ directory of the current theme. This URL is then used by the wp_enqueue_script function to add the JavaScript file to the WordPress site. The add_action function is used to hook this functionality into the ‘wp_enqueue_scripts’ action.

How to Display an Image Using get_theme_file_uri

function my_theme_display_image() {
 $image_url = get_theme_file_uri( '/images/my-image.jpg' );
 echo '<img src="' . esc_url( $image_url ) . '" alt="My Image">';
}
add_action( 'wp_footer', 'my_theme_display_image' );

In this example, the get_theme_file_uri function is used to get the URL of an image file named ‘my-image.jpg’ that is located in the ‘images’ directory of the current theme. This URL is then used to display the image on the WordPress site. The add_action function is used to hook this functionality into the ‘wp_footer’ action, which means that the image will be displayed in the footer of the site.

Conclusion

The get_theme_file_uri function in WordPress is a tool that enables developers to retrieve the URL of a file in the theme directory. It is typically used when there is a need to link to a specific file within a theme, such as a stylesheet, a script, or an image. By using this function, developers can ensure that the correct URL is generated, even when the theme is located in a subdirectory or is a child theme. This function is an important part of WordPress theme development, as it aids in maintaining the correct paths to theme files.

Related WordPress Functions

in WordPress Functions