In this tutorial, I will show you how to create a larger header in the Pretty Chic WordPress theme built on the Genesis framework by Pretty Darn Cute Design.
The Pretty Chic by Pretty Darn Cute Design displays a header image at 300px by 68px, which is the perfect size for viewing on multiple mobile devices.
As part of providing theme support, I get asked a lot of questions that are outside the scope of theme support* Most recently, I was asked how to add a larger header image for this theme.
In order to do this, we will first need to adjust the custom header size in our functions.php file, and then make adjustments to our CSS.
Create a larger header in the Pretty Chic WordPress theme
The Pretty Chic header is loaded at 600px by 132px; this allows for a beautifully crisp image when viewing on a device with a retina screen, such as a MacBook Pro, and the latest iPhones. This is also the perfect size for a theme with a sticky header; if the header is much larger, it will take up a lot of room on a mobile device. For this reason, I caution against increasing the header size, unless you also want to also remove the sticky header functionality…
If you have access to make adjustments to your PHP files via your WordPress dashboard, navigate to Dashboard > Appearance > Editor > functions.php. Look for this:
//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 600,
‘height’ => 132,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false,
) );
Adjust this size to accommodate the image that you wish to display. If you want to display a header at 900px wide, then adjust this area to be 1800px. I would caution against having such as large image, however, because a larger header will take up a lot of space on a mobile device, so for my example, we’re going to display a header image at 600px by 300px, so we’ll want to update the custom header to 1200px by 600px
Once you have made that adjustment, you’ll need to update your stylesheet. Look for this:
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 68px;
margin: 0 auto;
max-width: 300px;
text-indent: -9999px;
}
and this:
.title-area {
float: left;
min-height: 68px;
padding: 10px 0;
width: 300px;
}
Update the max-width to 600px, and the min-height and height to 300px in this section. Your new header will display at a larger size. Here’s a comparison of the smaller header with the updated size:
The issue you’ve got with the larger header is that it completely hides the Ad Space widget and the Primary Navigation. Additionally, the header is no longer responsive, so clearly further tweaks are needed.
To make the header responsive, add this to your site’s media queries:
@media only screen and (max-width: 320px) {
.header-image .site-title > a {
float: none;
height: 68px;
width: 300px;
}
}
To remove the sticky header functionality, remove position: fixed; from this section of your stylesheet:
/* # Site Header
——————————————————– *
.site-header {
background: #fff;
border-bottom: 1px solid #aba9a9;
clear: both;
display: block;
margin: 0 auto;
padding: 0 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}
If you don’t have access to your WordPress dashboard (some hosting companies disable this functionality), you will need to access your front-page.php via cPanel or FTP to make the update.
As a reminder: Any time you are making adjustments to a PHP file, you will want to have a fresh file available to upload to your site via cPanel or FTP – a misstep when updating your functions.php file will result in crashing your site; if you do that, you will need to upload a new functions.php file via cPanel or FTP (it cannot be fixed via your WordPress dashboard.
* Why is this outside the scope of theme support you may ask?
Theme support for any of the Pretty Darn Cute Design themes is limited to setting up the site to look and function like the demo; making any further adjustments to the look and functionality of the theme is customization.
Have you purchased the Pretty Chic theme, but not yet installed it? Did you know I offer a theme setup service? I can have your site set up to match the theme’s demo settings in under 24 hours. You can learn more here: (24 hour theme setup)
If you’ve already installed the theme, and just want assistance with making tweaks? I’m available to do that, too! Just ask here: (talk to Susan!)
Leave a Reply