Add a logo and page title on front page

Hi,
have you check your site title and your logo from “customize > site title/tagline / logo”?

Hi, thanks for your reply. When I go to customize > site title / tagline / logo and add a page title and upload my logo then it only displays the logo on my site but not the site title.

add_action( ‘__after_logo’ , ‘display_my_site_title’);
function display_my_site_title() {
//first checks if there is a logo uploaded
$logo_src = esc_url ( tc__f( ‘__get_option’ , ‘tc_logo_upload’) ) ;
if ( empty($logo_src) )
return;

//then print the site title after
printf(‘<h1>%4$s</h1>’,
esc_url( home_url( ‘/’ ) ),
esc_attr( get_bloginfo( ‘name’) ),
esc_attr( get_bloginfo( ‘description’ ) ),
esc_attr( get_bloginfo( ‘name’) )
);
}

Thanks for the code. I am new to word press, can you please let me know where I add this code? Thank you.

I am having the same issue, can you please give me some advice? Is the code above working and where should I put it?
Thanks ??

Anybody figured out how to do this what MariaB81 asked?

Hello guys, I am sorry for laaaaaaaaate…. response ??

if you want to display the logo and the site title, you have to create a child theme first then follow these step below:
1. copy header.php from the parent theme to the child theme
2. try to find this col-md-4 col-sm-8 col-xs-12 within header.php and add this text-center next to col-md-4 col-sm-8 col-xs-12
3. move downwards this line <?php if ( get_theme_mod('site_logo') ) : ?> til above <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
4. remove this line <?php else : ?>
5. the final code should be like this:

<header id="masthead" class="site-header" role="banner">
		<div class="header-wrap">
            <div class="container">
                <div class="row">
				<div class="col-md-4 col-sm-8 col-xs-12 text-center">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>

					<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
		        <?php if ( get_theme_mod('site_logo') ) : ?>
					<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		        <?php endif; ?>
				</div>
				<div class="col-md-8 col-sm-4 col-xs-12">
					<div class="btn-menu"></div>
					<nav id="mainnav" class="mainnav" role="navigation">
						<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
					</nav><!-- #site-navigation -->
				</div>
				</div>
			</div>
		</div>
	</header>

6. save and activate your child theme

Hey awanrmb,

thanks so much for that piece of help! I managed to add a logo to the frontpage without removing the page title instead!

Now there is just one thing left I would still like to change: The logo is sitting ABOVE the main title now, but I want it to sit left to it (using the baseline of the subtitle/site description). I already tried different things but I am not familiar enough yet with the codes…. Any advice on how I can arrange that?

Thanks a lot in advance!

This is the site. You can see, the logo actually already sits in the right position now, but the title and subtitle ought to sit next to it inline on the right hand side and not beneath it.

https://www.naturheilpraxis-andrea-nawka.de/

HI efraims.tochter

How did you manage to solve it finally. I also have the same problem.
Anxiously waiting for your reply.

regards

Hey Wajih84,
this link was the final help for my problem:
https://www.ads-software.com/support/topic/logo-next-to-title-2?replies=4

It didn’t work exactly how he described the code but with a little playing around with the dimensions of the font it worked at least!

Sorry this took so long. I will also look up the code again, that I finally used and post it here when I found it. That should be more accurate then…

regards

Ok… this is how I changed the Header code.
I played around a lot with the font size of title and subtitel, line height, logo height and padding. The result works ?? I hope you’ll find what you need:

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
	.site-title {
		font-size: 32px;
		line-height: 1.2;
	}
	.site-title a,
	.site-title a:hover {
		color: #fff;
	}

	.site-logo {
		max-height: 110px;
	}
	.site-header {
		position: absolute;
		top: 0;
		left: 0px;
		width: 100%;
		z-index: 1000;
		background-color: transparent;
		padding: 30px;
		-webkit-transition: all 0.3s ease-out;
		   -moz-transition: all 0.3s ease-out;
		    -ms-transition: all 0.3s ease-out;
		     -o-transition: all 0.3s ease-out;
		        transition: all 0.3s ease-out;
	}
	.admin-bar .site-header,
	.admin-bar .site-header.float-header{
		top: 37px;
	}
	.header-image {
		display: none;
		position: relative;
		height: 300px;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.header-inner {
		display: none;
	}
	.site-title {
		font-size: 28px;
		float: right;
		width: 54.5%;
		margin: 3px 55px 0px 0px;
		padding: 5px 0px 23px 0px;
	}
	.site-description {
		color: #ffffff;
		float: right;
		line-height: 0;
		margin: -8px 4px;
		padding: 0px 27px;
	}
	.site-header.fixed {
		position: fixed;
	}

	.site-header .col-md-4,
	.site-header .col-md-8 {
		min-height: 0;
	}

	.site-header .logo {
		float: left;
		-webkit-transition: all 0.3s linear;
		   -moz-transition: all 0.3s linear;
		    -ms-transition: all 0.3s linear;
		     -o-transition: all 0.3s linear;
		        transition: all 0.3s linear;
	}

	.site-header .logo a {
		display: inline;
		height: 100%;
		float: left;
	}

	.site-header .logo {
		width: 135px;
		height: 27px;
	}

	.site-header.float-header {
		background-color: rgba(0,0,0,0.9);
		padding: 0;
	}
	.site-header.float-header #mainnav {
		padding: 0;
	}

	.site-header.float-header #mainnav > ul > li > a {
	    height: 70px;
	    line-height: 70px;
	}

	.site-header.float-header .logo {
	    	margin: 20px;
	}