Overriding a parent theme folder in the child theme

Question

I have a parent theme that refers to an image in the theme's img folder like so;

<button id="buy" type="submit"><img src="<?php bloginfo('template_directory'); ?>/img/Buy-Now-Button.jpg" border="0" width="160" height="47" title="" alt="Buy One" style="cursor:pointer;"></button>

However, I thought that if I activated a child theme and then within that child theme there was another imgfolder with a different Buy-Now-Button.jpg then that would be used instead of the one in the parent them.

My aim is to allow users to use their own buy now button if they want to simply by placing it in the child theme img folder, am I going about this the right way?

Answer 1

Try using get_stylesheet_directory_uri() instead of bloginfo('template_directory').

This function will give you the path to the style.css of your currently activated theme (the child theme). From there you can navigate to all sub-folders in your child theme folder.

<button id="buy" type="submit"><img src="<?php get_stylesheet_directory_uri(); ?>/img/Buy-Now-Button.jpg" border="0" width="160" height="47" title="" alt="Buy One" style="cursor:pointer;"></button>

Answer 2

There are new functions on board, finally some intuitive names. get_parent_theme_file_uri and get_theme_file_uri.

You may use that instead of get_stylesheet_directory_uri().

File: wp-includes/link-template.php
4026: /**
4027:  * Retrieves the URL of a file in the theme.
4028:  *
4029:  * Searches in the stylesheet directory before the template directory so themes
4030:  * which inherit from a parent theme can just override one file.
4031:  *
4032:  * @since 4.7.0
4033:  *
4034:  * @param string $file Optional. File to search for in the stylesheet directory.
4035:  * @return string The URL of the file.
4036:  */
4037: function get_theme_file_uri( $file = '' ) {
4038:   $file = ltrim( $file, '/' );
4039: 
4040:   if ( empty( $file ) ) {
4041:       $url = get_stylesheet_directory_uri();
4042:   } elseif ( file_exists( get_stylesheet_directory() . '/' . $file ) ) {
4043:       $url = get_stylesheet_directory_uri() . '/' . $file;
4044:   } else {
4045:       $url = get_template_directory_uri() . '/' . $file;
4046:   }
4047: 
4048:   /**
4049:    * Filters the URL to a file in the theme.
4050:    *
4051:    * @since 4.7.0
4052:    *
4053:    * @param string $url  The file URL.
4054:    * @param string $file The requested file to search for.
4055:    */
4056:   return apply_filters( 'theme_file_uri', $url, $file );
4057: }

And

File: wp-includes/link-template.php
4059: /**
4060:  * Retrieves the URL of a file in the parent theme.
4061:  *
4062:  * @since 4.7.0
4063:  *
4064:  * @param string $file Optional. File to return the URL for in the template directory.
4065:  * @return string The URL of the file.
4066:  */
4067: function get_parent_theme_file_uri( $file = '' ) {
4068:   $file = ltrim( $file, '/' );
4069: 
4070:   if ( empty( $file ) ) {
4071:       $url = get_template_directory_uri();
4072:   } else {
4073:       $url = get_template_directory_uri() . '/' . $file;
4074:   }
4075: 
4076:   /**
4077:    * Filters the URL to a file in the parent theme.
4078:    *
4079:    * @since 4.7.0
4080:    *
4081:    * @param string $url  The file URL.
4082:    * @param string $file The requested file to search for.
4083:    */
4084:   return apply_filters( 'parent_theme_file_uri', $url, $file );
4085: }

Twentyseventeen uses for instnace them when accessing resources. ZBe.:

File: wp-content/themes/twentyseventeen/inc/custom-header.php
36:     add_theme_support( 'custom-header', apply_filters( 'twentyseventeen_custom_header_args', array(
37:         'default-image'      => get_parent_theme_file_uri( '/assets/images/header.jpg' ),
38:         'width'              => 2000,
39:         'height'             => 1200,
40:         'flex-height'        => true,
41:         'video'              => true,
42:         'wp-head-callback'   => 'twentyseventeen_header_style',
43:     ) ) );