get_parent_theme_file_uri: getting parent theme files URIs in WordPress

The get_parent_theme_file_uri function in WordPress retrieves the URI of a file from the parent theme. This function is particularly useful in child theme development, where it is necessary to reference files from the parent theme.

When a child theme is in use, it may need to include files such as stylesheets, scripts, or images that are located in the parent theme. The get_parent_theme_file_uri function facilitates this by providing the correct URI to the specified file in the parent theme, ensuring that the correct resources are loaded.

In scenarios where a child theme overrides certain files from the parent theme while still needing to access the original versions, this function ensures that the correct parent theme file URIs are obtained.

Parameters

  • $file (string), optional. Default: ”. Specifies the file in the template directory for which to return the URL.

Return Value

The function returns a string containing the URL of the specified file.

Examples

How to Load a CSS File from the Parent Theme

function enqueue_parent_theme_styles() {
 $parent_style = 'parent-style';
 wp_enqueue_style($parent_style, get_parent_theme_file_uri('/style.css'));
}
add_action('wp_enqueue_scripts', 'enqueue_parent_theme_styles');

This code snippet demonstrates how to load a CSS file from the parent theme. The enqueue_parent_theme_styles function uses get_parent_theme_file_uri to get the URL of the style.css file located in the parent theme directory. It then enqueues this stylesheet using wp_enqueue_style.

How to Include a JavaScript File from the Parent Theme

function enqueue_parent_theme_scripts() {
 wp_enqueue_script('parent-script', get_parent_theme_file_uri('/js/parent-script.js'), array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_parent_theme_scripts');

This code snippet shows how to include a JavaScript file from the parent theme. The enqueue_parent_theme_scripts function uses get_parent_theme_file_uri to get the URL of the /js/parent-script.js file located in the parent theme directory. It then enqueues this script using wp_enqueue_script.

How to Get the URL of an Image File in the Parent Theme

function get_parent_theme_image_url($image_name) {
 return get_parent_theme_file_uri('/images/' . $image_name);
}

// Example usage
$image_url = get_parent_theme_image_url('logo.png');
echo '<img src="' . esc_url($image_url) . '" alt="Logo">';

This code snippet explains how to get the URL of an image file in the parent theme. The get_parent_theme_image_url function takes an image file name as a parameter and returns the URL of that image in the parent theme directory using get_parent_theme_file_uri. In the example usage, the URL of logo.png is retrieved and used in an <img> tag.

Conclusion

The get_parent_theme_file_uri function in WordPress serves as a reliable method for retrieving the URI of a file within a parent theme. This function is particularly beneficial in child theme development, where referencing files from the parent theme is often necessary. By returning the URI of the specified file, get_parent_theme_file_uri facilitates the seamless inclusion of parent theme assets such as stylesheets, scripts, and images. This ensures that child themes can maintain the intended design and functionality while leveraging resources from the parent theme.

Related WordPress Functions

in WordPress Functions