WP Thinker

The WordPress Playground

How to Add a Logo to the Header of the Website in WordPress

Add Logo to Website Header in WordPress

Making a logo front and center of your WordPress website is crucial. From the get-go, it’ll make it stand out from websites that have installed the same WordPress theme. It also helps visitors associate the image with the values your website stands for, making it more memorable. Both of these are cornerstones of establishing your brand and marketing. After all, a logo is one of the resources you must provide alongside campaign details and a sales copy. To sum it up: learning how to add a logo to the header of the website in WordPress should be your priority. So, let’s jump straight into it.

1. Insert a logo from the WordPress Site Identity menu

We mentioned the Site Identity menu when we demonstrated changing a favicon on your WordPress website. Although favicon doesn’t appear in the header, both elements play a key role in establishing a distinct website appearance. Therefore, follow steps 1-3 in method 1 before doing this:

  1. Find the “Logo” section, then click on Select logo.
  2. Tip. If any logo is present, click on the Change logo button below.
  3. In the Media Library, click on Select Files under “Upload Files”.
  4. Once your custom logo and click on Choose Image.
  5. You’ll be asked to resize your logo before clicking on Select and Crop. You have four options:
    1. If the logo is at a perfect ratio and size (if you used the theme template logo as a guide), leave it untouched and click on the button.
    2. Crop the uploaded logo to fit the aspect ratio.
    3. Resize your logo away from WordPress and re-upload the image.
    4. If the predermined aspect ratio doesn’t fit anymore, cancel it, then change height/width using the method below.
  6. Uncheck the box in front of “Display Site Title and Tagline” since you no longer need the text.
  7. Click on the Save or Publish button in the top right corner of the sidebar. If you changed a logo, it’s named Save & Publish.

Note. Depending on the theme, you may not have “Site Identity” in the Live Preview sidebar, Look for options titled “Logo Settings, “Header Media”, “Header & Navigation”, “Logo and Header Settings”, or “Header Image”.

2. Insert or edit a logo in the WordPress website header via PHP

If you’re using a well-built WordPress theme, the method above should be enough, and everything we mention below should exist. If you aren’t, we suggest installing a WordPress theme that does. Well, unless you want to be a WordPress developer, in which case let us know and we can expand the guide. For now, we’ll demonstrate the basics so you can either enable this feature or make changes to the logo settings. Here’s what to do:

1. Make your theme support logos and define display

Head on over to the “root/wp-content/themes/child-theme-name/” after accessing your website storage via FTP. Open the functions.php file and either paste the following code anywhere before the closing PHP tag (“?>”) or make changes to the existing one:

function theme_name_logo_setup() {

	add_theme_support( 'custom-logo', array(
		'height' => 120,
		'width' => 350,
		'flex-width' => true,
		header-text' => array( 'site-title', 'site-description' ),
	) );

}

add_action( 'after_setup_theme', 'theme_name_logo_setup' );

Note. “custom-logo” is an example. If you want to edit the existing one, right-click on the logo in the front end. Select Inspect (in Chrome). Click on the cursor-over-rectangle icon in the top left corner (Select an element on this page to inspect it). Hover over the logo and you’ll see its name in the pop-up window.

What do the parameters mean?

These 5 parameters, if added, will pass the arguments to the function:

  • add_theme_support( ‘custom-logo’ ); – adds support for uploading custom logos, making method 1 possible
  • height and weight – set size limits to the logo: useful if the one you uploaded doesn’t fit perfectly.
  • flex-height and flex-width – make these two parameters flexible i.e., adjust based on the device resolution. Remove if you want fixed weight.
  • header-text – define classes that should be hidden. Their existence is important for SEO but they should remain hidden when the logo loads.

2. Open the header.php file

If your theme supports it already, the changes should apply and you can use method 1 to upload a logo. If it doesn’t, we must make it output the logo in the header. We already talked about editing headers in WordPress. Ergo, you know you shouldn’t edit your main theme file if you want the logo to persist through updates. Instead, decide which of the two options to use:

  1. Make changes by opening the header.php (method 2, step 1 named “Pick a method”)
  2. Use a WordPress plugin to add scripts to the header safely (method 3)

3. Add the logo output code

If you can see your logo on the front end, stop here. For those that don’t, keep reading. Now, this is tricky since we can’t know how your theme is designed. Therefore, you should create a staging website or try this locally. The code below must be between the header tags (<header> … </header>) and before opening and closing PHP tags (<?php … ?>). We suggest adding it somewhere near <h1 class=”something”> or a mention of a class such as nav-bar. With that said, the simplest way to add it is this function:

function theme_name_logo_setup() {

	if ( function_exists( 'the_custom_logo' ) ) {
		the_custom_logo();
	}

}

3. Adding a logo to the website header via a WordPress plugin

The second method isn’t beginner-friendly. To fix that, here are to ways of adding logos to the header of the WordPress website that are:

1. Website builder element

Do you use a page builder plugin that supports adding and editing logos? If so, the possibilities expand. Although we don’t have ties with them, here’s the procedure on Elementor with Jupiter X elements installed:

  1. Access the Site Identity menu sidebar like in method 1.
  2. Click the Logo button below “Site Logo”.
  3. Upload the file by clicking on the box below Primary Logo and configure size, URL, alignment, etc.
  4. You can also:
    1. Upload logos with a .svg extension. Those are vector graphics that WordPress doesn’t support by default.
    2. Upload multi-purpose logos. Examples: Secondary Logo, Mobile Logo, Sticky Logo, Retina Primary/Secondary/Mobile Logo
    3. Easily set URLs for each logo
    4. Configure logo alignment individually

2. Dedicated plugin

If you’re on board with installing WordPress plugins, there’s an abundance of those in the repository. They add support for SVG files, multiple logos, animations (slider, carousel, hover effects, etc.), alignment, shortcode. Most importantly, they make logos responsive, ensuring an optimal experience on all devices.