The Pretty Creative by Pretty Darn Cute Design displays a header image at 300px by 100px, 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.
The Pretty Creative header is loaded at 1200px by 400px; 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.
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’ => 1200,
‘height’ => 400,
‘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 1000px wide, then adjust this area to be 4000px. I would caution against having such as large image, however, as the menu displays on the right on a mobile device, so for my example, we’re going to display a header image at 600px by 200px, so we’ll want to update the custom header to 2400px by 800px (twice the size it currently is)
Once you have made that adjustment, you’ll need to update your stylesheet. Look for this:
.header-image .site-title a {
margin: 0 auto;
min-height: 100px;
width: 100%;
}
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 100px;
margin: 10px auto;
text-indent: -9999px;
max-width: 300px;
}
Update the max-width to 600px, and the min-height and height to 200px in this section. Your new header will display at a larger size. Here’s a comparison of the smaller header with the updated size
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 Creative 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!)
Thank you for this tutorial! It worked beautifully. 🙂
Great news, Lucy! Thanks for visiting!