Multiple site Logos

General Questions
1

Hi team! I know that Wordpress allows for one site logo but I would like a different site logo below a certain screen size. If I set the main logo as the Wordpress site logo, is there a way that I can customise my theme to have more than one? I know a possible solution is that in the style.css, I can add a media query for max-width:768px, import the image within that, and possibly need !important to override the main site logo but is there a potentially less hacky approach? Thank you!

2

I think the best approach would be to use source set that comes with a html tag. That way you can set different images for different resolutions.

That would mean that on desktop it would load image_1.png and on the mobile, it would load image_2.png

No need to worry about CSS display: none property at all.

3

Source set is definitely more efficient. Iā€™d be lying if I said I used it (used display:none lol). But once you set the logo as a Wordpress site logo, doesnā€™t it default to what you have stored for the site logo within Wordpress? if it does, then am I wrong in assuming that you can only have one site logo? Within Wordpress, I want to be able to set two.

4

As far as I know you can only have one Wordpress logo.

If you want to have different logo on mobile, I believe you would need to ditch the idea of using Wordpress logo and go just with a custom image, that would link to a homepage.

5

Okay. Just wanted to make sure there wasnā€™t a way of using more than one and I was just unaware of it.
However I would like to be able to edit the logos within WP admin - any suggestions?

6

The way i would approach that is to have a ā€˜settingsā€™ page in the wpAdmin (MetaBox does those well but most custom post plugins will or you could just roll your own) and set the logo in that.

Then you would ā€˜pullā€™ those values as dynamic data wherever you needed them.

1 Like
7

Okay, Iā€™ll investigate. Thanks for the suggestion

8

Unless you are wanting the user to have more fine control over the logo on various sizes, I donā€™t think the media query is hacky at all. :slight_smile:

1 Like
9

Thank you :grinning: still so much to learn.

10

Hi Hanna,

I use metabox to create a setting page and have standard the option for two logoā€™s in there.

image
image967Ɨ355 15.9 KB

Then within the pinegrow editor you can use this code to access the settings page and grab the logo:

$mapImage = rwmb_meta( 'logo', ['object_type' => 'setting'], 'theme-options' );
	echo '<img src=', $mapImage['full_url'], ' alt=Header Logo width=200 height=40>';

Where ā€˜logoā€™ is the id of your img custom field. And ā€˜theme-optionsā€™ is the id of your settings page.

Hope this helps.

Guido

11

Hi @Guido Guido, Iā€™ve implemented an ACF solution for this now so that the site logos are editable for the user. Thanks for this suggestion though.