4

I have image file stored inside theme directory called site.

Now in my home page using wordpress page editor I have put the following code but it didn't display image, seems location is wrong.

<img src="site/images/footLogo.png" style="padding: 0px!important; color:white">

let me know what issue?

1

You can define constant in theme function file as:

if( !defined(THEME_IMG_PATH)){
   define( 'THEME_IMG_PATH', get_stylesheet_directory_uri() . '/site/images' );
  }

and then you can use img tag as

 <img src="<?php echo THEME_IMG_PATH; ?>/footLogo.png" style="padding: 0px!important; color:white">
1

You'll have to copy the full path to the image like so:
http://www.your-site-name.extension/wp-content/themes/site/images/footLogo.png in your <img src="">.

WordPress works with absolute urls.

1

Absolute URLs

As other have said, you need to use the full URL for your image src attribute, or the browser will not be able to find it.

WordPress provides the function get_template_directory_uri() that returns the full URL to your theme path.

So, by doing:

<?php
$img_src = get_template_directory_uri() . '/site/images/footLogo.png';
?>

<img src="<?php echo $img_src ?>" style="padding: 0px!important; color:white">

your image will be shown, assuming the path is correct and the file is there.

Helper function

If you have more images, and you want to ease the process of output them in templates you can create a custom function that wraps get_template_directory_uri().

For example:

function theme_image( $image ) {
  return get_template_directory_uri() . '/site/images/' . $image;
}

and then in templates do:

<img src="<?php echo theme_image('footLogo.png') ?>" 
     style="padding: 0px!important; color:white">

WordPress 4.7+ and "parent theme fallback"

If you use WP 4.7+ code, you will have access to the new function get_theme_file_uri().

The benefit of this function over get_template_directory_uri() is that it automatically loads the file from child theme if available.

So, for example, if you change the theme_image() function to:

function theme_image( $image ) {
  return get_theme_file_uri( '/site/images/' . $image );
}

when you do theme_image('footLogo.png') the image 'footLogo.png' will be loaded from child theme, if child theme is in use and the file is available there, otherwise will be loaded from parent theme.

This new feature provides a "parent theme fallback" that pairs with the "template parent theme fallback" from parent to child themes that has been there since WP 3.0 through functions like get_template_part().

1

You cannot use PHP in the content editor, just write the full path to your image.

<img src="/css/_include/img/slider-images/1.jpg" alt="Image" data-fullwidthcentering="on">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.