Relative image links in Wordpress themes

Question

I understand that CSS fetch images relative to it's own location but how do I do this the same way for within Wordpress theme?

Scenario: I have a search box right of my header. The search box came with the Twentyeleven Wordpress theme and has the following css:

background: url(images/Search-Button.jpg) no-repeat;

It renders out the background image located in the images folder inside the themes folder. it found the image here:

C:\wamp\www\wordpress\wp-content\themes\twentyeleven\images\Search-Button.jpg

Now, I wanted to add a logo somewhere beside it so I added this to the theme's header.php:

<div id="Title_logo">
    <img src="images/Logo.png" />
</div>

but it doesn't render the image successfully because it is not looking for the image at "...\wp-content\themes\twentyeleven\images\Logo.png" (same directory as Search-Button.jpg).

instead the result image src was: C:\wamp\www\images\Logo.png

and reported that the image was not found.

How did the background image work?

or can somebody at least show me the proper way, and explain why this is not working?

I'd like it to work even when I rename the theme folder.

Solution 1

You do have to do it like this;

<div id="Title_logo">
    <img src="<?php echo get_template_directory_uri(); ?>/images/Logo.png" />
</div>

Then it will also work if you install your theme on another server. See: http://codex.wordpress.org/Function_Reference/get_template_directory_uri#bodyContent

The way you did it in you example (src="images/Logo.png") points the browser to your root folder, because the whole Wordpress cms is build from the index.php in your root folder.

So you have to tell your browser (via php) that the image is in the images directory in the theme-directory.

The css file is also loaded that way, but calls his referrals to related files from the place where it exists. (the theme-directory). So in css you can refer to your files like you normally should, but from the theme-docs (php) you have to use the special Wordpress functions in your paths, hence the function: get_template_directory_uri();

get_template_directory_uri documentation

Solution 2

The background-image worked because it is in the template's stylesheet file. So it took the base of the template's folder to look for image.

But when you used the <img src="images/Logo.png" /> it was looking at the base of the site. Veelen has explained you'd need to use the get_template_directory_uri() to get the dynamic current theme folder path.

Solution 3

It's this easy:

Simply replace:

<div id="Title_logo">
    <img src="images/Logo.png" />
</div>

With:

<div id="Title_logo">
    <img src="<?php echo get_theme_file_uri('images/Logo.png'); ?>" />
</div>

Notice: echo get_theme_file_uri('path to your assets ');