By Neil on January 13, 2014

Add a custom website logo

Quickly and easily add a custom website logo to the Metro Pro theme.

Click here to see how I made this logo.

Hear about new videos and posts as soon as they happen.

It is relatively straight forward to add a custom logo to your WordPress website. Within the dashboard under the Appearance tab select Header. This is where you can upload your custom logo. Note that all values discussed here relate to those seen while using the Metro Pro Genesis child theme.

Modifying the default logo dimensions

By default is states that logos of exactly 270 x 80 pixels will be used as is, and while you can crop images of other dimensions later they will always be proportional in dimensions to these values. This means some of your image will be cut off if you have varying dimensions. This can however be modified by editing the functions.php WordPress file that sits in your child themes folders. You can simply edit this by going Appearance/Editor in the dashboard and clicking on the Theme Functions (functions.php) link on the right-hand side under Templates. You can also access your functions.php file directly but you will need FTP access to your root WordPress folders on your web host (or if you are setting up your website locally directly from files on your personal computer you can navigate to where your functions.php file is – like I did in the video above).

In your functions.php file do a search for the number 270 (i.e. the default width value) just so you can find the part of the file you need to modify. Change the width and height values to the same as your logo, in my case it was 180 and 119. Save your changes. Now refresh the Custom header upload page and you will notice the default image upload size has changed. Click Choose File and find your logo image and then click Upload. Save Changes. Look at how your logo looks on your website, and if it is like my logo you’ll see it’s not quite right. The bottom of my logo was cut off because the defined area for the logo was smaller in height than I needed. This is easily modified in your websites CSS styling file.

Either in the same place in the WordPress dashboard or on your hosts root files is a Stylesheet (style.css). This basically tells your websites how it is formatted. Again search for the value 270 to identify the area of the Stylesheet that needs modifying, and again put in the correct max-width and min-height values here for your logo. Save your changes and then refresh your website. The logo should now look good and it should also be clickable and take site visitors back to your homepage.

Summary

Having a custom logo can make your website look professional, individual, and recognisable. Using WordPress makes it easy to add a custom logo, and although here we needed to modify a few values in the WordPress files these changes were pretty straight forward. As always my guides use the Genesis Framework and a Genesis child theme so if you do not use these your procedures may differ slightly. See why I use Genesis for my websites here.