This is the third article in the WordPress series. We already talked about how to create a custom theme, and how to embed assets into a WordPress theme. Today we are going to talk about how to add the logo to a custom WordPress theme. We are going to use the same theme, we used in the previous article. This theme is created by Nathan and you can download it here.
Every website needs a logo. Especially nowadays when everything is branded. When building a website it is important to stay consistent. We do not want to have different logos on different pages. Also, we do not want to change something in hundred different places. When it comes to a logo, WordPress took care of that.
How to add the logo to a custom WordPress theme
There is a function add_theme_support() in a WordPress that is used to give our theme different types of features. One of the features is the custom logo. add_theme_support() has simple syntax and accepts only two parameters. The first parameter is the $feature, string name of the feature, and the second parameter is $args, arguments for the feature we want to implement.
/**
* Add logo
*/
function theme_custom_logo_setup() {
$defaults = array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
'header-text' => array('site-title', 'site-description'),
'unlink-homepage-logo' => true,
);
add_theme_support('custom-logo', $defaults);
}
add_action('after_setup_theme', 'theme_custom_logo_setup');
The first thing we need to paste the code shown in the example above in functions.php. After we add this piece of code, our theme will be able to show the logo. But before we continue let’s discuss this snippet a little bit.
The first thing we did is created the function theme_custom_logo_setup(). This could be named anything, we just chose this name. Inside that function, we created a variable $defaults, and passed some values. After that, we used add_theme_support() function and passed in 'custom-logo'(this exact phrasing is necessary) and our $defaults variable.
The second parameter for custom-logo
As we mentioned before add_theme_support() accepts two parameters. The first is name of the feature we want to add, in this case ‘custom-logo’, and the second is $arguments for that feature. We passed those arguments to our $defaults variable.
The ‘custom-logo’ features has following arguments:
height– this arguments expects number, and it represents the height of the logo usingpxas unit.width– this arguments expects number, and it represents the width of the logo usingpxas unit.flexible-height– whether height should be flexible, acceptstrueorfalseflexible-width– whether width should be flexible, acceptstrueorfalseheader-text– classes(s) of elements to hide. It can pass an array of class names here for all elements constituting header text that could be replaced by a logo.unlink-homepage-logo– if the unlink-homepage-logo parameter is set to true, logo images inserted using get_custom_logo() or the_custom_logo() will no longer link to the homepage when visitors are on that page. In an effort to maintain the styling given to the linked image, the unlinked logo image is inside a span tag with the same “custom-logo-link” class.
So, as we can see, WordPress gives us quite a freedom with styling our logo. As we dive deeper into WordPress theme development we will understand more and more what each of these options/arguments is for.
How to show logo on the front
So after we learned how to add the logo to a custom WordPress theme, we are going to see how to implement this logo on the front.
In our header.php we are going to add the_custom_logo() function in a place where we want our logo to show. Now, our header.php looks like this.
<?php
/**
* The header for our theme
*
* This is the template that displays all of the
* <head> section and opening body tag
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package theme
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body>
<header class="header sticky">
<div class="container">
<?php the_custom_logo(); ?>
<nav class="navigation">
<a href="#intro" class="navigation-button active">
<span class="navigation-button__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
</span>
<span>intro</span>
</a>
<a href="#about" class="navigation-button">
<span class="navigation-button__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
</span>
<span>about me</span>
</a>
<a href="#experience" class="navigation-button">
<span class="navigation-button__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="7 8 3 12 7 16" />
<polyline points="17 8 21 12 17 16" />
<line x1="14" y1="4" x2="10" y2="20" />
</svg>
</span>
<span>experience</span>
</a>
<a href="#work" class="navigation-button">
<span class="navigation-button__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-artboard" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="8" y="8" width="8" height="8" rx="1" />
<line x1="3" y1="8" x2="4" y2="8" />
<line x1="3" y1="16" x2="4" y2="16" />
<line x1="8" y1="3" x2="8" y2="4" />
<line x1="16" y1="3" x2="16" y2="4" />
<line x1="20" y1="8" x2="21" y2="8" />
<line x1="20" y1="16" x2="21" y2="16" />
<line x1="8" y1="20" x2="8" y2="21" />
<line x1="16" y1="20" x2="16" y2="21" />
</svg>
</span>
<span>latest work</span>
</a>
<a href="#contact" class="navigation-button">
<span class="navigation-button__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mailbox" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 21v-6.5a3.5 3.5 0 0 0 -7 0v6.5h18v-6a4 4 0 0 0 -4 -4h-10.5" />
<path d="M12 11v-8h4l2 2l-2 2h-4" />
<path d="M6 15h1" />
</svg>
</span>
<span>contact</span>
</a>
</nav>
</div>
</header>
After we’ve done this, our logo is visible on the front. We can change our logo using WordPress Customizer, just like with any other theme.
How to check if logo exists
Now, we know how to add the logo to a custom WordPress theme and how to show it on the front. If we want to check if the logo exists we can use has_custom_logo() function. This function returns boolean true if custom logo function exists, otherwise false.
If you want to learn more about what is WordPress you can check this awesome course Building websites with WordPress by Nat Miletic. This course is excellent for those who want to start with WordPress. Nat is teaching us what is WordPress, what can we use it for, how can we use it, in a really nice and simple way.
Ad
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like Blog ideas: 5 easy ways on how to get them.