How to customize the header

[randomfreeform]

Great theme! Can you give me tips on how to make a header that's somewhat like your demo sie?

Basically want to use a large background image and have a .png title on the left over it.. (your little man is on the right side) As the screen size changes of course I want it all to be responsive... ideally the title.png placement would stay somewhat stationary over a certain area of the background image.

(I tried all night doing this various ways but there's always been a gotcha problem.) THANKS for everything!!

[tsquez]

Hey there,

Glad you like the theme :smile:

Actually the image you are referring to is actually one image I created on my desktop with Photoshop. (http://themeawesome.com/themes/wpforge/wp-content/uploads/2015/02/wp-forge-logo.jpg) - All I did after I created the image was upload it via the customizer and the Header Section.

However if you like you can still do what you want without having to make one whole image the way I did.

I recommend downloading the child theme called WP-Starter (https://github.com/tsquez/wp-starter) this way you can modify the header.php file and not lose any edits. Also if you are planning on using a different header for different pages you can make multiple header files.

I would upload the image you want to use as the background image via the customizer and the header section, then I would go into the actual header.php file and add a container inside the following div .header-logo for this example I am going to call it .the_image. So in your header.php file your code would look something like this:

    <div class="header-logo">

        <div class="the_image"></div><!--/.the_image-->

        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" alt="<?php echo esc_attr( get_bloginfo('name', 'display') ); ?>" /></a>

    </div><!-- /.header-logo -->

Of course you would have to style the .the_image div accordingly via css. Now if you are going to want the site title and the site description to appear over the header image along with the_image then you would have to move the header_info div into the the header-logo. Then you code would look like this:

    <div class="header-logo">

        <div class="the_image"></div><!-- /.the_image -->

        <div class="header-info">

            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

        </div><!-- /.header-info -->                    

        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" alt="<?php echo esc_attr( get_bloginfo('name', 'display') ); ?>" /></a>

    </div><!-- /.header-logo -->

I believe that the two divs added to the .header-logo would need a z-index of sorts if you used the customizer to upload the header image. You could also just use css to give the .header-logo the height you wanted and set an image as the background via css.

There are many different ways you can accomplish what you are looking for. Hope this helps.

[randomfreeform]

Not far off from where I was going... but really great to see the example code so I really do it right! Thanks a bunch!!!!!

[tsquez]

Good to hear, sorry I was going to set up an example to show you what I was talking about but ran out of time. I had to head out to my dreaded day job...lol! No worries though, I will set on up when I get home later this afternoon. Hopefully this will help you achieve exactly what you are trying to do :sunglasses:

[tsquez]

Closing - Moved to private discussion.