Add a Site Logo to Header

We want some site branding, more that just the site name and “Just Another WordPress Site” to show in our header.

Enable upload of logo

In order to add a logo to the header, you must first be able to upload the logo. This is done using the add_theme_support() function in wordpress, which you can read about here.

We are adding theme support for a custom-logo. Add this snippet of code to the functions.php file for your theme (or child theme). You will see that it establishes certain default values that are editable. You can read more about this here.

PHP

Once that is done, you will be able to upload the site logo to wordpress, and we can insert it into the header.

Insert logo into Header

Right now we are using a generic bootstrap 4 header – a modified version of this bootstrap snippet. The modifications we made to this snippet are simple. We made it light rather than dark, and fixed it at the top of the page rather than made it static. Finally, we added a drop shadow. That was done by changing some of the navbar classes. There were a few tweaks to css also made to lessen the container padding.

The code of the entire header looks like this:

HTML

You see that there is a logo already added to the header. We are going to replace that with the following:

PHP

This snippet calls up the image ($custom_logo_url) and the link (esc_url), and gives it a class (img-fluid). All this does is allows the image to show. There is no link to the home page.

In order to link back to the home page, we add the following in place of # to the <a href=”#”> tag:

PHP

We also add the following to give the link a title:

PHP

The complete block of code in the header.php file is thus:

HTML