Add Logo without Jetpack

Afraid not by plugin ?? You’d need to write the code yourself to do this. Should be easy enough via child theme though.

Hi James,

thanks for the reply.

I have been looking at the header.php file and all I can see is

<header id="masthead" class="site-header" role="banner" <?php if ( get_header_image() != '' ) { echo 'style="background-image: url(' . get_header_image() . ')";'; } ?>>

Not 100% what/where to add code.

Hey, you’ll need to add the following to your child theme:

add_action( 'init', 'storefront_custom_logo' );
function storefront_custom_logo() {
remove_action( 'storefront_header', 'storefront_site_branding', 20 );
add_action( 'storefront_header', 'storefront_display_custom_logo', 20 );
}

function storefront_display_custom_logo() {
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo-link" rel="home">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php echo get_bloginfo( 'name' ); ?>" />
</a>
<?php
}

Then just put your logo in wp-content/themes/your-child-theme/images/logo.png.

Thanks.

James, thanks you so, so much.

It is people like James that make the WordPress community function.

For anyone that may need this, I added the code above supplied by James to a functions.php file in my child theme and added my logo to an images folder, again in my child theme.

No problem, good luck with your project! ??

I added a document to our Storefront documentation for this snippet: https://docs.woothemes.com/document/add-a-custom-logo/

Any updates to the snippet in the future will be found there.

is there anyway to customize the logo size? it’s quite small for me. at least make it same with the original size of the uploaded one.

thanks

Yes, you need to change the value of .site-header .site-logo-link in your child theme css file;

.site-header .site-logo-link {
width: 44.0%;
}

I, for example changed mine to 44% as above.

in what file do we add this code?

add_action( 'init', 'storefront_custom_logo' );
function storefront_custom_logo() {
remove_action( 'storefront_header', 'storefront_site_branding', 20 );
add_action( 'storefront_header', 'storefront_display_custom_logo', 20 );
}

function storefront_display_custom_logo() {
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo-link" rel="home">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php echo get_bloginfo( 'name' ); ?>" />
</a>
<?php
}

Do you have an example file?

NM figured it out..

Hello

Create a new file called functions.php in your child theme folder and place the following code in it;

<?php
/**
 * Add logo without Jetpack
 */

add_action( 'init', 'storefront_custom_logo' );
function storefront_custom_logo() {
remove_action( 'storefront_header', 'storefront_site_branding', 20 );
add_action( 'storefront_header', 'storefront_display_custom_logo', 20 );
}

function storefront_display_custom_logo() {
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo-link" rel="home">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php echo get_bloginfo( 'name' ); ?>" />
</a>
<?php
}

Thank you, this works really well.

Cheers
Luke

This worked brilliantly. Thank you!