Adding an Image to a WordPress Theme File

At times when you are creating a custom WordPress theme (parent theme) you may require an image to be included in the layout that is placed into the theme file. There are a few ways to do this though the following will just focus on three simple ways.

Where to call the images from?

The following three examples will showcase if the images are stored within the parent theme folder, say for example in a folder called “img”, a child theme or otherwise within any other folder of the WordPress site.

Calling images from within a Parent theme folder

For example say you are wanting to refer to an image in your stand alone custom WordPress theme that you have added to the themes images folder (img) then you would refer to it by using ‘get_template_directory_uri’.

‘get_template_directory_uri’ tells WordPress to look within the Parent theme folder.

<img src="<?php echo get_template_directory_uri(); ?>/img/logo.jpg" />

Codex Reference: get_template_directory_uri

Calling images from within a Child theme folder

Now if you refering to an image from within your child theme folder you would use ‘get_stylesheet_directory_uri’.

‘get_stylesheet_directory_uri’ tells WordPress to look within the Child theme folder. If it does not find it in the child theme fodler is will search the parent folder at the specified location.

<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.jpg" />

Codex Reference: get_stylesheet_directory_uri

Calling images from within any folder in WordPress

If you are wanting to call an image file from with your website though not from the theme folder you could use “home_url()” which would use the domain name as the top path then would look for an image inside a folder called “img” if the below code is used.

Take note to use ‘echo’ otherwise it will not add the full domain path and will only be referring to a  file at the following, /img/logo.png

<img src="<?php echo home_url();?>/img/logo.png" />

For a full list refer to Codex: Determining Plugin and Content Directories

Note that

get_template_directory_uri

is the function for getting the URL whereas

get_template_directory

is the function for getting the path.