Display Site name as well as Logo

Sparkling
1

I wanted to add a logo to my website, but once I added it the name of my site disappeared. Is there no way to add both the logo and the site name?

2

@aman

Since header is so tiny there is no space for both but if you think that you cand find a space for both then there are two solutions:

  1. (Simple) Combine title and logo on a single image and upload it as a one whole image
  2. (Advanced)

Open header.php file and replace this part of code:

<?php if( get_header_image() != '' ) : ?>

	<div id="logo">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>"  height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
	</div><!-- end of #logo -->

<?php endif; // header image was removed ?>

<?php if( !get_header_image() ) : ?>

	<div id="logo">
		<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
	</div><!-- end of #logo -->

<?php endif; // header image was removed (again) ?>

With this one instead:

<?php if( get_header_image() != '' ) : ?>

	<div id="logo">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>"  height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
	</div><!-- end of #logo -->
		<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
		</span>

<?php endif; // header image was removed ?>

Like I said, header is a very tiny for this theme and this code might require some tweaking to make it work properly on your website but these changes are entirely up to you.

Also these changes can be made via Child Theme. Sample Sparkling Child Theme can be downloaded from here.

To do this tweak via Child Theme you need to copy/paste header.php file from Parent Theme folder to Child Theme folder and edit it there.

Let me know if this helps.

3

Hello there!

I’m looking for the custom header setting (LOGO) but i can’t seem to find the one which looks like the option on this video tutorial : Custom Header Image (Logo) For Sparkling WordPress Theme - YouTube

Attached is the screenshot of what shows up on my menu when i try to edit the header…

My question is…where did it go and how come it doesn’t show up on my header settings? I have a metaslider installed and i’m using that instead of the theme slider. Could that be getting in the way?

Thanks in advance!

4

@nicenozybaguio

WordPress since version 4.1 switched Custom Header option from dedicated section to WordPress customizer, so it now works slightly different. Still it works the same way but this option is moved on the sider. It still says Custom header and that’s the only thing that matters. Cropping and other things are also available when you upload a new image.