[Theme: Twenty Fifteen] Adding a logo to the site title and centering the footer

Hi Toni,
Create an image size of 954 x 1300 pixels with your logo on top or wherever you want. Save on your desktop or wherever you want. Then go to Appearence – Header – Header Image and upload your image. The header of twenty fifteen is the left sidebar.

Hey escritorjaru,

Thanks for the reply. I decided to try playing around with the header.php in my child theme – I didn’t want a background image (which is what customising the header created), just a small logo to sit above the words in the site title. (Was also concerned that creating a header image and adding my logo to the top of it would impact how it is viewed on other devices…) A bit of playing around got me the results I wanted.

Still having trouble with centering the text in the footer, though. :/

Haha, oh wait – I just changed something else in the CSS and noticed that the only thing I could think to try for the footer seems to have worked.

`.site-title {text-align: center;}’

So simple. I don’t know why it wasn’t working for me before!

Thanks escritorjaru!

Make that .site-info {text-align:center !important;} ??

Hi Toni!

Could you tell me what you changed in the header.php to add your logo? Thanks!

Hi Michelle,

I changed

<div class="site-branding">
				<?php
					if ( is_front_page() && is_home() ) : ?>
						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
					<?php else : ?>
						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
					<?php endif;

					$description = get_bloginfo( 'description', 'display' );
					if ( $description || is_customize_preview() ) : ?>
						<p class="site-description"><?php echo $description; ?></p>
					<?php endif;
				?>
				<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
			</div><!-- .site-branding -->

from the original Twenty Fifteen theme in header.php to

<div class="site-branding">
				<?php
					if ( is_front_page() && is_home() ) : ?>
						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?><img src="image.png" height="151" width="248"></a></h1>
					<?php else : ?>
						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?><img src="image.png" height="151" width="248"></a></p>
					<?php endif;

					$description = get_bloginfo( 'description', 'display' );
					if ( $description || is_customize_preview() ) : ?>
						<p class="site-description"><?php echo $description; ?></p>
					<?php endif;
				?>
				<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
			</div><!-- .site-branding -->
		</header><!-- .site-header -->

(where “image.png” is the location of my site’s logo) in my child theme. I decided to take out the words in the site title because they weren’t needed.

Hope that helps!

I’m using the Orbisius Child Theme Creator plugin, and i’m not sure how to upload my logo into it. Somewhere in my child theme image.php? It’s in my Media section of the dashboard though. (The answer to this is probably terribly obvious, but I’m very new to coding)

Never mind- figured it out. Thanks!!!

That’s pretty good Toni, but it looks like the element in the sidebar that the site-branding class is in automatically resizes depending on what the resolution of the screen is, does anybody know a way to automatically resize a logo to match the width available to the element of site-branding? When I view my site on my phone the top and bottom of the logo are cut off because of this automatic resizing of the viewing area. I have been struggling for hours. So far I can only set the height manually. It is important because so many people call me from their phone when they are locked out of something.

Hi Toni,

Thanks for your code. I tried it too enad it works on the homepage. On my other pages however the image doesn’t load. Any ideas how I can make it owrk there as well?

Thanks!

https://www.kriskrasatelier.nl/

Nevermind, it was the code of the image. I changed it using the complete webaddress, now it can find it on any page.

Anyone else think it’s really odd that it’s still that difficult to put your logo into the base WordPress theme for 2015!?

Hey everyone,

Iv’e just created a solution for for this issue which doesn’t require using a child theme or a text widget.

Check it out:
https://www.affectivia.com/blog/hack-adding-a-logo-to-the-twenty-fifteen-theme/

Enjoy!

Hi

Use your code Yaniv Friedsohn, except I’ve add it to function.php and style.css instead of using snipets. It seems great. The logo is here, resizing ok. I’m happy.
The only thing I would like is to say to wordpress to put it behind the title istead of above (with the same method, the only one which gave me what I want with the responsive design).
Any idea ?

Thanks a lot.

Hi Aniel789,

If you mean below, you could just set the <span class=”af-title”> . $output . </span> before the <img> element.

Let me know of this helps.

Best,
Yaniv