Support » Fixing WordPress » Moving header image to top of page

  • Hi,
    Complete novice who has researched current solutions to this problem but they make no sense (to me!) I’m using 2012 and would like to move the header image to the top of the page and superimpose it over my title. I’ve looked at the page, style, header php templates but can’t find where/what to include/delete from the CSS code. It can’t be that difficult can it?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Move this code from line 48 of the header.php. Cut and paste this`<?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) : ?>
    <a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><img src=”<?php echo esc_url( $header_image ); ?>” class=”header-image” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”” /></a>
    <?php endif; ?>`

    To just below this at line 36

    <header id="masthead" class="site-header" role="banner"> and that will move the header up above everything.

    PS be sure that you actually cut the code from line 48 and below down to <?php endif; ?> and when you paste it, make sure that you don’t paste it over the other code thustly deleting something that’s needed.

    Wow, it worked!….many thanks jamesg40… looks great.Pushing my luck a bit but is there a way to select a different header image on each page?

    Sure it can be done but There wont be an easy way (like point and click options.)I don’t think the theme has the option built in. I mean the solution is not too difficult but depending upon which way you handle it could be time consuming. One way could be to create an admin panel, build in the wp media uploader and write some code behind it, another way could be to replicate page templates and assign a div class to each of the header parts on each page template and style that div class with a different background-image:{} and select the page template for each page you want a different header on. Otherwise your stuck writing a bit of php and creating some variables and arrays and such, lol. I think its a shortcut and easier to simply do the page templates if its just for your site and not for a client.

    Many thanks!

    @clivelive – Hopefully, you’re already using a child theme, but if not, you should be! It’s not a good thing to make changes to theme files – as you will lose all your changes when WP is updated and you really must have a clean copy of the default theme for troubleshooting purposes. Please see the linked page on Child Themes and go back and make a child theme before doing any further work on your site.

    Once you have the child theme set up, you can put the modified header.php file in the child and replace the parent header.php file with a clean, newly downloaded copy of that file only via FTP. If you’ve changed other files, you should do the same with them.

    Thanks, WPyogi, hadn’t thought of that…will do

    Yes, yes…. WPyogi is absolutely correct. Many Thanks for adding that WPyogi, I didnt think of it when I answered. Child theme would be the way to go.

    i want to display unique header image for each page through admin panel….. how can i do that? And 1 thing more i do not want to use any plugin…so help me out…

    @guddu1315 – please start your own thread and include more info in your thread per

    You can start a new thread here:

    How-To and Troubleshooting

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Moving header image to top of page’ is closed to new replies.