Displaying site logo, ‘site title’ and ‘tagline’ at the same time.

HI @felr!

> I added the code to template-tags.php, but nothing changed.

Without taking an in-depth look at the support thread you are referencing, could you please share the full content of the template-tags.php file here (the one that’s throwing fatal errors) so we can take a look at it?

Thank you!

• This reply was modified 2 years, 1 month ago by Alvaro Gómez.
• This reply was modified 2 years, 1 month ago by Alvaro Gómez.

thanks for your response! It’s this addition to the code in the file:

`/**
* Filters the arguments for twentytwenty_site_logo().
*
* @param string $html Compiled HTML based on our arguments.
* @param array $args Parsed arguments.
* @param string $classname Class name based on current view, home or single.
* @param string $contents HTML for site title or logo.
*/
add_filter( ‘twentytwenty_site_logo’, ‘include_logo_site_title’, 10, 4 );

function include_logo_site_title( $html, $args, $classname, $contents )
{
// TODO: get the results in $html to return both logo and site title
return $html;
}

I see, thank you for sharing the code @felr. The code itself appears to be ok, but I do not think it should be added to the template-tags.php file. If you are new to PHP and need to include custom functions, the easiest path is to use a plugin such as Code Snippets:

https://www.ads-software.com/plugins/code-snippets/

That being said, I do not think you need PHP for this particular case. As it turns out, the site title is already available in the HTML itself. You could make it visible by using the following CSS code:

I think we may be able to do this with some custom CSS, have you ever added custom CSS before? We can use the code below:

/* Show Site Title in Twenty Twenty-Two */
.site-logo .screen-reader-text {
  position:relative !important;
  display:block;
  width:auto;
  height:auto;
  clip-path: inset(0);
}

Please add this code in your “Additional CSS” tab (at My Site > Appearance > Customize), in a new line, under any existing code, and make sure you click on “Save Changes” to save it.

Once you add the code above, your site’s header should look something like this:

Please let me know if you have any questions or if you encounter any difficulties in doing this.

• This reply was modified 2 years, 1 month ago by Alvaro Gómez.

Thank you, this is awesome! I’m getting close ??

The site title and tagline are both displayed below the logo, and the site name has a strange font / size / font kerning setting … when I didn’t use the site logo, the font looked fine. Any idea how I can utilize the ‘regular’ font class for the site name from there?

cheers and thanks again, felr.

Hey, @felr!

In principle, you should be able to adjust the aspect of the font by adding properties to the existing .site-logo .screen-reader-text {} selector.

Would it be possible to have a link to your site or a screenshot? You can use https://snipboard.io/ or a similar service to upload it and share the link to the image.

• This reply was modified 2 years ago by Alvaro Gómez.

Thanks for your response, Alvaro!
This is how I am trying to make my header look, just with the icon LEFT of both the header text lines:
https://snipboard.io/T65mcq.jpg
How it looks right now is when you open the site itself, the image is on top of both header lines…

Thanks for taking a look!

Hi @felr!

Thank you for the screenshot. Given the HTML structure, it is kind of challenging to achieve that layout.

Instead, I would suggest we follow a different route and add the logo itself via CSS. Here’s how:

1. Head to the Customizer and remove the logo (this will bring the site’s tagline back)

2. Add the following CSS.

/* Add site logo as a background */
.header-titles {
  background-image:URL("https://yoursite.com/yourlogo.png");
  background-repeat:no-repeat;
  background-position:top left;
  overflow:visible;
  display:block;
  min-height:100px;
  background-size:100px;
  padding-left:100px;
}

You will want to replace the URL with one to your logo and adjust the three last values (height, size and padding) from 100px to whatever makes your logo look good.

Once you add this code, it should look something like this:

3. You might also want to adjust the size of the logo on mobile separately. You can add a second CSS snippet to adjust these values for smaller screens:

@media all and (max-width:760px){
  .header-titles {
    min-height:100px;
    background-size:100px;
    padding-left:100px;
  }
}

These tweaks will allow you to adjust this version:

Please let me know if this approach works better!

• This reply was modified 2 years ago by Alvaro Gómez.
• This reply was modified 2 years ago by Alvaro Gómez.

Hello Alvaro,

THANKS SO MUCH – looks great!!

This is awesome, not sure for how long I’d have to play around to get it to look like this. Thank you very much for your effort to help – if you happen to have a Bitcoin Lightning Network address to tips, let me know, I’d happily send you a few.

cheers and have a good weekend, R.

I’m glad to hear it worked @felr!

Thank you very much for your effort to help – if you happen to have a Bitcoin Lightning Network address to tips, let me know, I’d happily send you a few.

You are too kind, you can just pay it forward by helping someone else!

??