We are going to modify our header so that it can display either an uploaded logo or text (the site’s name).
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-6">
<?php
// Get the customizable logo
$custom_logo_id = get_theme_mod('custom_logo');
$logo = wp_get_attachment_image_src($custom_logo_id, 'full');
// If there is a custom logo, display the image. If not, display the site title.
if ($custom_logo_id) {
echo '<img src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '" class="img-fluid">';
} else {
echo '<h1 class="mb-0">' .
'<a href="' . home_url() . '" class="text-white">' . get_bloginfo('name') . '</a>' .
'</h1>';
echo '<p class="mb-0">' . get_bloginfo('description') . '</p>';
}
?>
</div>
<div class="col-md-6 d-flex justify-content-end align-items-center">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'menu_class' => 'nav justify-content-end',
'container' => false,
));
?>
</div>
</div>
</div>
</header>
This code allows us to differentiate between logo or text based on the user:
// If there is a custom logo, display the image. If not, display the site title.
if ($custom_logo_id) {
echo '<img src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '" class="img-fluid">';
} else {
echo '<h1 class="mb-0">' .
'<a href="' . home_url() . '" class="text-white">' . get_bloginfo('name') . '</a>' .
'</h1>';
echo '<p class="mb-0">' . get_bloginfo('description') . '</p>';
}
We add the CSS:
style.css
/* Header Styles */
header {
position: relative;
}
header h1 a {
text-decoration: none;
color: #ffffff;
}
header p {
color: #e0e0e0;
}
/* Navigation Styles */
.navbar-dark .navbar-nav .nav-link {
color: #ffffff;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #f8f9fa;
}
/* Main Content Styles */
.container {
margin-top: 50px;
}
/* Footer Styles */
footer {
background-color: #343a40;
color: #ffffff;
padding: 30px 0;
position: absolute;
bottom: 0;
width: 100%;
}
And now let’s create the action that will allow us to upload the logo:
functions.php
function theme_setup() {
add_theme_support('custom-logo');
}
add_action('after_setup_theme', 'theme_setup');
So, this is the result:
