Thanks. I changed the code to this and I don’t get an error anymore:
echo '<img src="'.get_bloginfo('template_directory').'test.png" >';
However, I can only see a placeholder and not the image.
What does that actually output in HTML? If you look at that you’ll most likely see a problem with the URL that is being created.
I found the error: The image URL is not correct, but I don’t understand why. The child theme was automatically created with “Child Theme Configurator”. This is what I did:
1. I created a child theme of the “responsive” theme (https://ww.wp.xz.cn/themes/responsive/).
2. I added a test.png image in the root folder of the child theme.
3. Then the image should be displayed by the code above which I placed in ..responsive-child/function.php, but for whatever reason the image path is not ..responsive-child/test.png, but instead ..responsive/test.png. So this call .get_bloginfo('template_directory') from within the child theme uses the parent theme path.
you might need to add a shlash before the image name;
like:
echo '<img src="'.get_bloginfo('template_directory').'/test.png" >';
see Example Output section when you scroll down in https://developer.ww.wp.xz.cn/reference/functions/bloginfo/
If you’re using a child theme, calling get_bloginfo( 'template_directory' ) will get you the path to the parent theme. Try get_bloginfo( 'stylesheet_directory' ) instead.
Thanks, that worked 🙂 I added this code to the functions.php:
add_action( 'wp_head', 'custom_header' );
function custom_header() {
echo '
<figure class="header_image">
<a href="https://ww.wp.xz.cn" target="_blank" alt=Test>
<img src="'.get_bloginfo('stylesheet_directory').'/images/test.png" title="Test link" width="20" height="20"/>
</figure>
';
}
What I haven’t grasped yet is how to align the figure container at some other container.
I noticed that my approach was wrong, because wp_head is not suitable to output HTML into a div tag of the header, because the div tag “header” has nothing to do with the HTML tag <head>.
You are right. The wp_head action is for tags inside the pages header and nit the actual page display.
You would need to put that code into your themes header.php file. Oh and beside to use a child theme so your changes don’t get wiped out on the next update.
I copied the header.php from the parent theme into the child theme. In this file, I added this line to the header-div tag:
<?php do_action('header_div_hook'); ?>
In my functions.php I added a function that makes use of this hook:
function change_header_div() {
if (is_page()) {
echo '
<figure> ........ </figure>
';
}
}
add_action('header_div_hook', 'change_header_div');
I don’t know if this approach is good, but my objective was to outsource as many changes as possible to the functions.php and not doing all the changes directly in the .php files, because in the latter case it is easy to lose track of all the changes. DOM tree traversal would be a better solution, but I don’t know how this could be done.
