[Resolved] Header Design – Logo and Text

[Antar]

Hello, All –

I want to show a small logo graphic with the site title (text) displayed to the right of it. Unfortunately, the normal order of the elements in the header is to show the site title text and then the logo graphic. There is no way in the customizer to swap the elements around so I’m delving into the templates to do it manually.

I’ve opened up the inc/structure/header.php file and can see the code for constructing the elements.

The Site Title and Tagline are contained within the a div with the class “site-branding”.
The logo graphic is contained within “site-logo”.

What I find confusing in the template code is that the site-logo element is created before site-branding – and yet on the actual page they are rendered in completely the opposite order! Clearly I do not understand how this is supposed to work.

Can someone please help put me right?!

:0)

Antar

[Jamal]

Hi

Have a look at how you can achieve what you want with css

https://docs.generatepress.com/article/putting-site-title-next-logo/

Hope that was useful

[Antar]

Hi, Jamal –

Thanks for this. It does work – however, I still want to learn about the template structure. I don’t get how the code for the logo appears before the code for the branding in the template – but on the page the text appears before the graphic!

On line 69 of the header.php template is:

function generate_construct_logo()

Followed on line 143 by:

function generate_construct_site_title()

The logo is generated before the branding. So, which part of the code dictates the order of these elements when rendered on the page?

Thanks,

Antar

[Tom]

The order of the functions doesn’t have any say on how they’re displayed when rendering your actual site.

This function controls the order: https://github.com/tomusborne/generatepress/blob/2.0.2/inc/structure/header.php#L56

Let me know if you need more info 🙂

[Antar]

Hi, Tom –

Thanks for your support. I half guessed this would be the answer. The only problem is that it doesn’t work if you copy the file and add it to your child theme structure. It only works if you edit the header.php in the generatepress theme folder.

Does this mean there are some template files that you can’t duplicate/overwrite with a child theme?

Note: I’m only asking because I want to learn something!

:0)

Antar

[Tom]

Correct – only root level template files can be overwritten.

However, this function is pluggable, so you can add it to your child theme and change it:

if ( ! function_exists( 'generate_header_items' ) ) {
    function generate_header_items() {
        generate_construct_header_widget();
        generate_construct_site_title();
        generate_construct_logo();
    }
}

[Antar]

OK. I understand. I hadn’t realised about the root templates. No wonder some of my edits don’t work!

Thanks for your help.

🙂

[Tom]

You’re welcome 🙂

[Author]

Posts