adding image to 2015-child's header.php via functions.php

Resolved ejm
(@llizard)

11 years ago
I have stared at various pages on how to use functions.php to make changes on a child theme (for better or worse, my parent is twenty fifteen). Alas, I do not understand “hooks”. Can someone point to a page that spells out how to do this? (ie: coding that is a little more specific that “add your coding here”)

I would like to add my logo to go just below the following coding on header.php:
```
<div id="sidebar" class="sidebar">
		<header id="masthead" class="site-header" role="banner">
			<div class="site-branding">
```
This is as far as I managed; I know it’s wrong, but this is what comes of knowing just enough about coding to get myself in trouble….
```
if (is_dynamic_sidebar()) {
add_action ('after div.site-branding' , 'add_logo');
function add_logo() {
echo "[image] ...it's a work in progress";
}
}
```
Thank you.

-E Morris

Viewing 2 replies - 1 through 2 (of 2 total)

paulwpxp
(@paulwp)

11 years ago
There is only one hook there in the header.php which is bloginfo, and this function is used to output lots of things so if we add the image to this it might mess up something else.

If we are on a child theme we can just put in a copy of header.php in child theme folder and add the <img> for logo.

But if all we want is to have a logo there above the site title, we can achieve this via CSS only. The CSS below is tested with theme’s demo page and it works, just change the image url.
```
/** ----- add in a logo above site title for twentyfifteen theme ----- **/
/** 620px **/
@media screen and (min-width: 38.75em) {
	.site-title > a:before {
		background: url("http://dummyimage.com/150x150/f50000/ffffff.png") no-repeat scroll 0 0;
		content: " ";
		display: inline-block;
		width: 25px; height: 25px;
		margin-right: 10px;
	}
}
/** 740px **/
@media screen and (min-width: 46.25em) {
	.site-title > a:before { width: 40px; height: 40px; }
}
/** 880px **/
@media screen and (min-width: 55em) {
	.site-title > a:before { width: 50px; height: 50px; margin-right: 20px; }
}
/** 955px **/
@media screen and (min-width: 59.6875em) {
	.site-title > a:before { display: block; width: 150px; height: 150px; margin: 0 auto 50px; }
	.site-title > a:hover:before { opacity: 0.7; }
}
/** ----- End adding in a logo ----- **/
```
The code will add logo image only if the screen width is wider than 620px, otherwise it will look bad in small screen due to the theme’s placement of menu button on the right.
Thread Starter ejm
(@llizard)

11 years ago

Thank you for your reply. I just tried it and alas, I don’t think it’s isn’t going to work. It looks bad even on the large screen.

I think I’m going to have to switch themes to do the customizations I want.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘adding image to 2015-child's header.php via functions.php’ is closed to new replies.