Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Wordpress header image switch

Featured Replies

Hi All

 

I did a site for a client recently in wordpress and have been requested to show a different logo on one of the pages. The logo resides in the header.php file so I'm guessing I'm going to have to do this dynamically and thought I should take advantage of the <body <?php body_class(); ?>>.

 

I know the page ID for the single page is 5, so would this work:

 

<?php if (is_page('5')) { ?>
<img src="/assets/alt_logo.gif" alt=" " />
<?php } else { ?>
<img src="/assets/default_logo.gif" alt=" " />
<?php } ?>

 

Just want to ask the experts before I start making a mess.

 

Ta

 

E

Yep, that'll work.

 

Or for better readability you could have the page title in the is_page method.

 

So for example

 

is_page('Contact Us')

 

instead of using an id.

 

The only thing is that the id won't change where the name might... so you take a risk on the client changing the name and breaking it.

 

It just depends on what you prefer.

Edited by ErisDS

  • Author

that's a good idea - might try that. Still waiting for the new logo so might be next week before I implement this. Nifty feature though to add to the wordpress as cms box of tricks.

Yep, that'll work.

 

Or for better readability you could have the page title in the is_page method.

 

So for example

 

is_page('Contact Us')

 

instead of using an id.

 

The only thing is that the id won't change where the name might... so you take a risk on the client changing the name and breaking it.

 

It just depends on what you prefer.

Wordpress has post revisions, so you can still keep that slug for the is_page but make sure you look up the post revisions also. Which would require a little extra work but if your handing over a WP and prefer to use the pretty permalink method there are ways around it.

 

 

 

  • 1 month later...
  • Author

OK I need to adjust this code now:

<?php if (is_page('5')) { ?>
  <img src="/assets/logo_number2.gif" alt="alt here" />
<?php } else { ?>
  <img src="/assets/logo_logo_number1.gif" alt="alt here" />
<?php } ?>

 

to include a further set of pages as the page with with ID of 5 that shows logo number 2 will now have some subpages and I want these subpages to use the same logo. I can't do this by the ID number as I don't know how many pages the client is going to create so not sure how to do this - is there a way to add some code to say the child pages of this parent need to use the same logo. Do I need an if, else if, else sort of thing.

 

Can someone help as I have no idea where to go from these basics.

 

Ta

 

E

  • Author

Ok I've manage to figure out the logistics of the PHP:

<?php if (is_page('5')) { ?>
  <img src="/assets/logo_number2.gif" alt="alt here" />
<?php } elseif (is_page('292')) { ?>
  <img src="/assets/logo_number2.gif" alt="alt here" />
<?php } else { ?>
  <img src="/assets/logo_number1.gif" alt="alt here" />
<?php } ?>

 

but is there a way to say that all child pages of of the page with ID=5 to show logo number 2 - having to go in and add all the subpages manually is not a great way to do it. I've tried using 'parent-pageid-5' which is what appears in the body class but this doesn't work.

 

Anyone got any ideas on how to improve this?

You could do it without PHP.

 

On each page you could give the body tag a different element ID and then put an ID on the header. Then change the image based on the specificity of the body tag ID?

 

Hope this helps.

  • Author

I kind of want to do it dynamically so that it doesn't matter how many sub-pages my client adds the logo on the sub-pages will always be logo number 2 - going by your suggestion I could just stick with what I have and do this:

 

<?php if (is_page('5')) { ?>
  <img src="/assets/logo_number2.gif" alt="alt here" />
<?php } elseif (is_page('292')) { ?>
  <img src="/assets/logo_number2.gif" alt="alt here" />
<?php } elseif (is_page('100')) { ?>
  <img src="/assets/logo_number2.gif" alt="alt here" />
<?php } elseif (is_page('500')) { ?>
  <img src="/assets/logo_number2.gif" alt="alt here" />
<?php } elseif (is_page('300')) { ?>
  <img src="/assets/logo_number2.gif" alt="alt here" />
<?php } else { ?>
  <img src="/assets/logo_number1.gif" alt="alt here" />
<?php } ?>

 

And I would have to add a new elseif for each new page once my client has created it. I don't wnat to have to do this and just want to have some code in place that would deal with all teh child pages of the main page - that way I just need to put the code in place and she can go and create as many pages as she wished without having to worry about coming back to me and getting me to add more code.

 

maybe it's not possible.

Couldn't you assign a custom field for the logo and just add that field to the template, so you could assign the logo as you create pages? Or am I missing the point?

  • Author

It's a wordpress site and the logo is within the header.php file...so it couldn't go in the template.

Maybe I didn't explain myself very well - it would be quite similar to the code you proposed, but would give you control in the admin area without having to go in and edit the code. In fact, I've just thought of a better solution.

 

Create a header2.php file with the alternate logo in it. The create a altlogo.php page which includes the header2.php file but in all other ways is the same as your index.php page. So instead of <?php get_header(); ?> which will probably be the first bit of code in your index file, change it to <?php include('wp-content/themes/yourthemename/header2.php'); ?>. Then use this code at the top of your index2.php to define it as a page template:

<?php
/*
Template Name: Alternate Logo Page
*/
?>

 

Then you can assign whatever pages you want to your alternate logo page in the wordpress admin area.

 

Hope that makes sense

  • Author

I might give that a go - not now though as I'm about to go to bed...it's a bit difficult as I have to work on the live website and don't want to mess it up.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.