Responsive Graphical Header in Wordpress Twenty Thirteen Theme
I like a lot of things about the Twenty Thirteen theme, but the header section is not among them. To my taste, the header background is too tall on desktop screens, and the site title breaks on small screens. What I want is a graphical title whose height I can control and that responds to screen size. Example:
Tip: for banners like this that contain large areas of uniform color, PNG is the most efficient format. (See "Digital Image File Types Explained" and related pages.
To do this, we need to turn off the existing banner and text title, and insert our graphical image. The best method I have found comes from cclambie's post in the Massive Headers thread at wordpress.org. Many thanks! What follows is nearly a copy of his five step tutorial, with the exception of the first step below. I found that "Remove Header" was not an option and "Hide" did not work. Instead, I removed the .site-header code as below.
Edit the style.css file as follows:
Remove this:
.site-header {
background-image: none !important;
}
Add:
.site-add-header {
}
text-align:center;
}
.header-img {
width:80%;
In header.php,
Strike class=”home-link” from the following statement:
<a class=”home-link” href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
Insert the following above the existing <h1>site title statement:
<div class="site-add-header"><img class="header-img" src="ImageURL.png" width="100%" ></div>
where ImageUrl.png is the full URL of the image. (Note: the image above can be replaced with any image. Dimensions of 1920x130 pixels work well. Using an image with large areas of uniform color such as the above image compress very well using PNG, so we get fast load times.)
Remove the old site title and description by deleting the following:
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
That's it!