How to reference files properly in parent/child themes?

Child theme is arguably the best thing that happened to WordPress themes. But still I see many people who create a child theme incorrectly use wordpress functions to refer to the images and stylesheets which result in broken urls. WordPress provides four functions to refer to the different files inside parent and child themes: get_template_directory(), get_template_directory_uri(), get_stylesheet_directory() and get_stylesheet_directory_uri().

get_template_directory()/get_template_directory_uri()

Now these tag are self explanatory. They are used to get the template directory’s path and url. These tags will always refer to parent theme’s path even when used from inside the child theme.

get_stylesheet_directory()/get_stylesheet_directory_uri()

Again self explanatory. Right? But they are a bit different as they return always the current theme’s path. It means they will return the parent theme or child theme’s paths depending on from where they have been called.

Let me present you all this in a tabular form for easy understanding.

When Inside                     Want to refer to?                      Use

Parent theme                    Current Theme                       get_template_directory()

Parent theme                    Child theme                            get_stylesheet_directory()

Child theme                       Parent theme                         get_template_directory()

Child theme                       Child theme                           get_stylesheet_directory()

Theme with no child          Itself                                       get_template_directory()