• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Neil Curtis

Learn how to make money online

  • Home
  • About
  • Start an Online Business
  • Latest Articles
  • My Resources
  • Contact

Add a custom website logo

By Neil on January 13, 2014

Add a custom website logo

Prerequisites

Genesis Framework and child theme.

A logo – See how I made my logo using GIMP.

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

Click here to see how I made this logo.

Case-Study-Arrow

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

TurboBikeTrainer.com LogoBy 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).

TIP

See how to set up a local development environment here so you can create WordPress websites offline anywhere.

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.

LIKE WHAT YOU’VE READ?
I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

TELL ME MORE >>

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Copyright © 2021 · NeilCurtis.me · Website powered by the Genesis Framework and uses the Maker Pro Theme

/* ----------------------------------------- */ /* Content Template: Guides Layout - start */ /* ----------------------------------------- */ #ninetypercent { width: 90%; margin: 0 auto; } #profilebox { border: dashed 2px #ccc; background: #E8E8E8; padding: 10px; padding-bottom: 15px; margin-bottom: 20px; } #profileimage { float: left; max-width: 150px; margin-right: 3%; } #profilebio { font-size: 90%; } #stepfont1 { float: left; font-size: 30px; font-weight: bold; padding: 5px; padding-left: 3%; background: #f96e5b; width: 100%; min-width: 280px; color: #FFFFFF; } #arrow { float: left; } #UWBwrap { padding-top: 10px; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc; } /* ----------------------------------------- */ /* Content Template: Guides Layout - end */ /* ----------------------------------------- */