The Swank Theme by Pretty Darn Cute Design displays a header image at 320pxpx by 100px, which is the perfect size for viewing on multiple mobile devices.
As part of providing support for Pretty Darn Cute Design, 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 Swank header is loaded at 640px by 200px; 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’ => 640,
‘height’ => 200,
‘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 twice the demo’s size, adjust it to be 1280px by 400px.
Once you have made that adjustment, you’ll need to update your stylesheet. Look for this:
/* Logo, hide text */
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 100px;
margin: 10px auto;
text-indent: -9999px;
max-width: 320px;
}
.header-image .site-title a {
width: 100%;
}
Update the max-width to 640px, and the 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.
If you want to remove the extra white space using this will create in your media queries, you can add in additional CSS styling for your media queries. You will need to adjust based on which device sizes you want to adjust for, and the size of your header image:
* 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 Swank 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