WP - child theme get the theme directory - wordpress

I have an image folder in a child directory where some theme-related gfx is located. If I want to access it via:
<img src="<?php echo get_template_directory_uri();?>/assets/Logo.svg" />
It's trying to look for /assets in the parent theme directory.
How can I reference the child theme directory?

The function get_template_directory_uri always return the url of Parent Theme. Don't matter, where you called it.
To get the url of your Child Theme, you can use get_stylesheet_directory_uri(). So, your code will be:
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/Logo.svg" />

Related

How to remove hardcoded domain name from WordPress links?

Wordpress loads all assets and links with an absolute URL including the domain name (e.g. <img src="https://example.com/cat.png">).
How to NOT include the domain name?
I tried editing the WP_CONTENT_URL and updating WP_SITEURL/WP_HOME with no success.
Is there a simple way of doing that?
You can do that by simply WordPress theme URL function get_template_directory_uri(). See the below link.
https://developer.wordpress.org/reference/functions/get_template_directory_uri/
It will give a full path to the WordPress theme. If your image path is like this
\wp-content\themes\your-theme\assets\images\image.jpg
then you can get that image path like below.
<img src="<?php echo get_template_directory_uri() . '/assets/images/image.jpg'; ?>">

why does relative path is not working for <img src="""> in wordpress

I know the solution for this problem
The solution is to use "get_template_directory_uri()"
But Can someone please tell me why this relative path itself "/img/entry.png" is not working even though I'm using parent theme(Not child theme)
Before(Not working)
<img src="img/entry.png" alt="">
After(Working) → Why??
<img src="<?php echo get_template_directory_uri()?>/img/entry.png" alt="">
I putted index.php and Img folder at the same level in Theme folder as below.
So why "img/entry.png" is not working?
(Theme folder)
|
|--index.php
|--img
|-entry.png
get_template_directory_uri() adds the path of the directory in which img/is located. If you want not to add that function then you have to add the path manually.
For example if your WordPress instance uses a theme called my-theme then this /wp-content/themes/my-theme/img/my-image.jpg could be served to img's src.
the root of wordpress project is consisted od some directories such as 'wp-content' and 'wp-admin' and doesn't contain any folder named 'img'.
the 'src' attribute of images in HTML tag targets the root of the project then reads the url. so you should set your img folder path correctly from the project root.

Create an image folder inside wordpress child theme

I have already set up a child theme. Is it possible to add via FTP on my server a folder (preferably into the same child theme folder) called img and then link to the images in that folder from my pages and posts?
I tried using this path:
<img src="../wp-content/themes/theme-child/img/placeholder.png"/>
but that did not work.
You need to use the stylesheet directory instead. With a child theme, if you use the template directory it will go to the parent (see explanation on http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri).
It should be <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/placeholder.png" />
Replace with the following code
<img src="<?php echo get_template_directory_uri(); ?>/img/placeholder.png" />
Yes you can. You can then access it by doing...
get_template_directory_uri().'/img/placeholder.png'
Tested script
src="<?php echo get_stylesheet_directory_uri(); ?>/images/welcome.png" alt="">
See Reference link
You can create img folder inside your Child Theme directory and can access it via the same way as core/parent theme directory reference get_template_directory_uri(). This will return the Child Theme directory URI as you're referring this in Child Theme.
<img src="<?php echo get_template_directory_uri(); ?>/img/childthemeimage.png" alt="Child Theme Image">
get_stylesheet_directory_uri()
will return the URL of the child theme while
get_template_directory_uri()
Will return the parent theme URL

Right way to get image path

Called the images in my theme as shown below
<img src="<?php bloginfo ('stylesheet_directory');?>/images/blogo.png" />
It worked perfectly until I installed a Child Theme. I had to change
<?php bloginfo ('stylesheet_directory');?>
to
<?php bloginfo ('template_directory');?>
Before it started working again. Just need help understanding why that happened. Thanks
stylesheet_directory is the directory that contains the main stylesheet in use (so if you have a child template then it would be the child directory. If not, it will be the template directory.
template_directory is the directory of your parent theme.
Look at the codex for more details
Stylsheet directory links to the main stylesheet, and not the child theme( since the child theme may not contain the style.css by default, it inherits the style.css of parent theme. So the parent path is called if you are using this).
So always use get_stylesheet_uri() or get_template_directory_uri() for these purpose.
Hope this clarifies you.

WordPress file right there, cannot be found!

I have Wordpress deployed on Ubuntu server.
in the folder where my theme is I have index.php. In the same folder I have a file: "logo.png"
in index.php I have the following line:
<img src="logo.png" alt="" />
Yet, i get a broken image when browsing there. How can that be? The file is right there, sibling to index.php in the folder!
It's going to look for logo.png in the root directory of the website, not in your theme folder. You need to add the path to your theme directory to the image tag.
I got it, should have used:
<?php bloginfo('template_directory'); ?>
so that the right path is taken at runtime for my theme folder.
try something like this
<img src="<?php bloginfo( 'template_url' ); ?>/logo.png" alt=""/>
You can also specify the full path of the logo.png file in image source so that it will grab the logo image from the source rather then looking in your parent directory for the logo image
<img src="*Full path of logo.png file*" alt="" />

Resources