Changing header image in functions.php

  • Resolved richdal

    (@richdal)


    8 years, 8 months ago

    WordPress v4.4.2
    BuddyPress v2.5.1

    I was trying to get the header image to change up under certain conditions. The HTML was displaying like this…

    <div id="branding">
<h1 id="site-logo"><a href="URL" rel="home"><img class="header-image" src="LOGO_IMG_V1_URL" alt="" title=""></a></h1>
</div><!-- #branding -->

    A lot of the search results I was seeing were from questions a few years back and couldn’t tell if there would be a compatibility problem. As an example, I was seeing a few recommendations using CSS with “background: url()” but the current header image wasn’t setup as a background image.

    I saw this suggestion and got it to work with Chrome, but wasn’t compatible with latest Edge, Internet Explorer, or Firefox

    ./genbu-child/functions.php

    print <<<CSSTEXT
<style type="text/css">
.header-image {
       content:url("LOGO_IMG_V2_URL");
}
</style>
CSSTEXT;

    Once I can get the header image to update consistently across the browsers I need to add conditions for when that loaded, but need to get the display part working right. Any recommendations I could use in my functions.php to set the header image?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter richdal

    (@richdal)

    I haven’t been able to find a way to modify the header-image with CSS consistently across web browsers.

    I was trying to add a condition in my theme’s functions.php file to change up the header-image in a few places. Not familiar with using the WordPress filters but is there a way to use them to change up what I get back from get_header_image() ?

    Thread Starter richdal

    (@richdal)

    With a little trial and error I found the change was easiest to make with jQuery. Installed the Head & Footer Code plugin to I could load my jQuery code at the end of the document and was pretty straight forward.

    I used code similar to this and was able to add different conditions to change up which image I wanted to use.

    <script type="text/javascript">
jQuery( document ).ready( function() {
  var loc = "http:/....../logoforheader.jpg";
  jQuery( ".header-image").attr("src",loc);
});
</script>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing header image in functions.php’ is closed to new replies.