15

Yes, I know that we have get_template_directory_uri(); in referencing to the theme's directory. It's working when I put the following code inside index.php or in header.php:

<img src="<?php echo get_template_directory_uri(); ?>/images/sample.png">

But when I'm adding an image inside pages when editing via text, not in visual, it isn't working. How can I get the images from theme's images directory into the pages?

Thanks!

Improve this question
5
  • It sounds like you're trying to add PHP code via the content editor?
    – birgire
    Commented Dec 14, 2015 at 2:30
  • @birgire yes, i'm adding that way. Are there any other solutions?
    – ajdeguzman
    Commented Dec 14, 2015 at 2:31
  • 1
    That will not work, for security reasons. You don't want to use the full image url ? In general I would avoid using theme specific images in the content, because when you change and delete the old theme, then they are gone. So I would consider using /wp-content/uploads/ for content images.
    – birgire
    Commented Dec 14, 2015 at 2:33
  • @birgire my only concern is organization of the images' directory that's why I'm putting it inside the theme's directory. Is it possible in wp-contents/uploads to organize folders?
    – ajdeguzman
    Commented Dec 14, 2015 at 2:35
  • 1
    For few images I would just upload them via the Media Library. If you need some way to identify them then there are e.g. plugins out there that allows you to tag(categorize images.
    – birgire
    Commented Dec 14, 2015 at 2:42

6 Answers 6

Reset to default
9 
<img src="<?php echo esc_url( get_template_directory_uri() . '/images/logo.jpg' ); ?>" alt="" >

Try this. It should work. You have to concatenate the results from get_template_directory_uri() and your images directory in echo.

Improve this answer
2
  • Mr Glorfindel, thanks for editing my post. If you find it correct please upvote it. It would really give me a good start in stackexchange. Thanks in advance
    – Kaif Ahmad
    Commented Mar 25, 2021 at 12:19
  • You should Security Escape - get_template_directory_ur ."WordPress.Security.EscapeOutput.OutputNotEscaped] All output should be run through an escaping function (see the Security sections in the WordPress Developer Handbooks), found 'get_template_directory_uri'.
    – Nuno Sarmento
    Commented Apr 22, 2022 at 10:35
5

Shortcode is the way to go, something like this (in functions.php or as plugin) would work:

// [template_dir image="something.jpg"]
add_shortcode( 'template_dir', function( $atts ){
    return get_template_directory_uri() . '/images/' . $atts['image'];
});
Improve this answer
4

It's not possible to use PHP code in editor. You can use an image with full path.

<img src="/wp-content/themes/your-theme/assets/images/1.jpg" />

In general I would avoid using theme specific images in the content, because when you change and delete the old theme, then they are gone. So I would consider using /wp-content/uploads/ for content images.

Improve this answer
1
  • 1
    this is good solution. <img src="<?php echo get_template_directory_uri().'/images/sample.png'; ?>">
    – Mohammad Ayoub Khan
    Commented Jun 13, 2021 at 16:50
1

The answer is yes. You could run php code in editor. But that is not for proper way of adding images. Instead, you should create shortcodes to get those images from theme folder or use like below codes

<img src="/wp-content/themes/your-theme/assets/images/1.jpg" />

By removing domain name, it could even benefit of http requests. If removing domain doesn't work, you could even install php wordpress execute plugins. There are some plugins about it. To understand more, you should read this article. I hope that could solve your problems :). Good luck in codes.

Improve this answer
0

Didn't Matt announce PHP won't work inside a Wordpress post?

Improve this answer
0

get_template_directory_uri()

Quick search through WordPress core code, shows two different treatments. This function needs escaping when it’s used inside of tag attribute.

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

When used inside wp_enqueue_style() or wp_enqueue_script(), it is not escaped:

wp_enqueue_script( 'theme-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '', true );

However, looking at the function itself, it has filter right before returning values which makes it suspicious – it can be filtered in plugins and we don’t know exactly what’s returned. Rule of thumb in this situation would be better safe than sorry and always escape.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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