Welcome! To use this support forum, please Login or Join Today!

   

Different Header Images for Static Pages & Blog Posts

{name}
Rank

Total Posts: 15

Joined 2015-07-05

PM

 

I want to have one header image for the static pages for my martial arts school website, and another header for the posts pages for the same website. I can’t seem to find a plugin that does this with my theme (Mobius).

I was given this at Wordpress . org before being sent away for asking about a commerical product:

generally, you could use a conditional statement to wrap the header image code; something like:

<?php if ( is_page() ) { ?>
html code for static page herader
<?php } elseif ( is_home() ) { ?>
html code for posts page header
<?php } else { ?>
possible general header image html
<?php } ?>

Unfortunately, I don’t know how or where to implement that (index.php?  If so, where in the code?). I could handle a “recipe” solution for altering code in my Mobius Child theme. 

Any help would be appreciated!

Sean

{name}
Rank

Total Posts: 15

Joined 2015-07-05

PM

 

Let’s try a different tack: where is the header image called?  I can do this in Twenty-Fourteen by altering the header.php file:

<?php if ( get_header_image() ) : ?>
   
   
<div id="site-header">

      <
a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<?php /* Custom code starts here to place a custom header on the blog page */
 
if (is_home('the-mirror-of-combat')) : ; ?>
  
<img src="http://www.fencingacademy.net/wp-content/uploads/2015/08/cropped-Mirror-of-Combat-header.jpg">width?>" height="<?php echo get_custom_header()->height?>">

 <?php else : /* Custom code ends here */ ?>
   <img src="
<?php header_image(); ?>">width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
 
<?php endif; /* closing custom if statement */ ?> 

The desired behavior can be seen at my current Twenty-Fourteen themed site: http://www.fencingacademy.net/the-mirror-of-combat/

Compare the static pages to the blog page.

Thanks!

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You could actually do this with CSS based on the dynamic body class:

body.blog #header #site-title.graphic a,
body.single #header #site-title.graphic a {
    
background-imageurl('/path/to/image.jpg') !important;

The above CSS would swap out the header image (logo) when on the main blog page or a single post page.

Does this help?

{name}
Rank

Total Posts: 15

Joined 2015-07-05

PM

 

I’ll test it - but noob question first: in what file would I put this?  I’m using the Child Theme.

Thanks!

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You can either login via FTP and edit your child theme style{x}.css file or edit in WordPress via Appearance → Editor → style{x}.css

(style{x} being the default style you selected in the Theme Options. e.g; style1.css)

You’ll probably want to add it to the bottom/end of the file.

{name}
Rank

Total Posts: 15

Joined 2015-07-05

PM

 

It works!  Many thanks. 

There’s a second question, of course: can I define a different size for header #2? 

Best,

Sean

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You should be able to do something like:

body.blog #header #site-title.graphic a,
body.single #header #site-title.graphic a {
    
background-imageurl('/path/to/image.jpg') !important;
    
width300px !important;
    
height150px !important;

Keep in mind, though; If your width is larger than 300px, it will create a horizontal scrollbar on mobile devices and probably interfere with the navigation toggle.

 

{name}
Rank

Total Posts: 15

Joined 2015-07-05

PM

 

Thank you!  That does the trick.  It give me a thought about another question, but I will post that separately.

Sean