Rollover Header Image for Attribution

Hi,

to display an attribution text on your header image, you will need to edit the “header.php” template. Please search there for the following code (it is located twice there – you will need to modify both occurrences in order to show the text on both your homepage and all sub-pages):

<div class="header-image"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" /></div>

and modify it in this way:

<div class="header-image"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" /><p class="header-attribution" style="color: white; margin: 0; position: absolute; top: 0; left: 0; width: 100%; text-align: center; z-index: 100;">Your attribution with <a href="http://url-address-of-an-attribution-link">links</a> goes here.</p></div>

If you would like to display the attribution text only when you scroll across the header image, then please insert the following CSS into “Theme Options > Other Settings > Custom CSS”:

.header-image p {
  visibility: hidden;
}
#wrapper .header-image:hover p {
  visibility: visible;
}

Note: Instead of modifying the original “header.php”, I recommend you to create a child theme.

Best regards,
Tomas Toman

You are welcome!

Best regards,
Tomas Toman