How to Add Logo to WordPress Header


In this article, we will demonstrate how to add a logo to WordPress header. In the WordPress, there are lots of things that we covered in the few articles. Now we will insert a code to create a logo in the header section of the WordPress website.

In the above image, you will see the website title was replaced with the website icon. So in this article, we will create the code with replace the website title and place the icon.

Most of the time you will need to replace the simple text with the icon. WordPress provides the functionality to do that. You can either use title or used the icons but will not use them both at a time.

So we are just creating this code to enable the icon.

So let’s jump into the code.

Function.php

First, we will create a function in the function.php file. So let’s look out this function and we will describe the code after that.

In this code, we first create the function call theme_custom_logo_setup().

In that function, we put an array with contain the values of add_theme_support() function.

So what is the add_theme_support() function? this function will enable you to select a custom logo for your website. So when you put this code inside the function.php file you are enabled to select the logo for your website from the appearence.

In the appearance select customization and select the header option. Here you want to select the logo for you website. we will show you how to get this using screenshots.

So in the above screenshot, you will see the result where you are enabled to select your logo.

So let’s discuss the code now.

We will first create an array and specify the height and width of the image. These are in the pixel unit so make sure do not specify the height and width more than the size of the logo.

after that, we will specify the flex-height and flex-width. and then we will specify the header text. which contain site-title and site-description.

Then we will close the array and add the_theme_support() function. In this function we will add custom-logo is the first parameter and then specify the array $defaults.

This array will pass the values to the function with key and value pair.

And then we will add the call to action function.

This function will call them_custome_logo_setup() function. Make sure you place this function outside of the theme function. so the WordPress will recognize this.

Display Logo in header.php

Now we will display the logo in the header.php file. So first we wanted to go inside of the index.php file and replace the code.

If you are following us from the first article then you will familiar with this code.

This code is for display the title and description the website. this code is created earlier in the articles you can look out this article to understand better.

We will replace this code with this.

If you looking out this code you will know we had created a div with the site-logo class.

Then create $custom_logo_id variable of get_theme_mod() function. This function will retrive the them modification setting from the current theme.

So if you change the setting of the current theme you are able to see this logo. if not then default site title and description will show up.

After that, we created $logo variable with getting the source of the image.

Then we execute the if statement that checks if you user specifies the logo or not. If in the current theme setting WordPress will get the specified logo then the first statement is executed.

And if you did not specify the logo then you can see the default title and description of the website. If your condition is true then we will place the image tag to display the logo and create a class for that image as the logo.

Now we will create CSS style for this logo. So in the style.css file, we will create the logo CSS class.

In the CSS class, we just specify the width of the image and add margin and padding.

Let’s look out the header.php file how it looks like.

If your header.php file does not look like this then replace the code with this file.

look out the function.php file.

So that’s all for this tutorial.

I hope you will learn How to Add Logo to WordPress Header.

If you have any question then you can comment us in the comment section.

Follow us on Youtube, Facebook, and Instagram.

We will see you in the next article.

Thank you.

Leave a Reply

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