Clickable header on wordpress - php

Question

I don't have clickable header on my website. I want redirect to home page when I click on header. I don't know how the code should look to make it work.
This is my page-header.php code:
<div class="entry-header">
<div class="cv-outer">
<div class="cv-inner">
<div class="header-logo">
<?php
if ( has_custom_logo() ) :
$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( bloginfo('name') ); ?>" class="logo-img">
<img src="<?php echo esc_url( $custom_logo[0] ); ?>" alt="<?php esc_attr( bloginfo('name') ); ?>">
</a>
<?php else : ?>
<?php echo bloginfo( 'title' ); ?>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<br>
<p class="site-description"><?php echo bloginfo( 'description' ); ?></p>
<?php endif; ?>
</div>
</div>
</div>
</div>
I think I should add somethink here but I don't know PHP enough:
if ( has_custom_logo() ) :
$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( bloginfo('name') ); ?>" class="logo-img">
<img src="<?php echo esc_url( $custom_logo[0] ); ?>" alt="<?php esc_attr( bloginfo('name') ); ?>">
</a>
<?php else : ?>
<?php echo bloginfo( 'title' ); ?>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<br>
<p class="site-description"><?php echo bloginfo( 'description' ); ?></p>
<?php endif; ?>
In additional I show you source of website in browser:
browser website source
All advice will be invaluable!

Answer 1

It looks like the title is empty.
In the else clause, if there is no custom logo, then a link will be displayed inside with text. The link is there, but it is not clickable because there is no text inside the link.
Can you check if bloginfo( 'title' ) is non-empty?
Another workaround would be to add a default picture that you know exists inside the link div, instead of text.

Answer 2

You just keep all header div in an Anchor element. Like below code
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"
<div class="cv-inner">
<div class="header-logo">
</div>
</div>
</a>

Answer 3

I personally would put the PHP code in the definition for CV-Outer div.
<?PHP
if (has_custom_logo()) {
echo "<div class='cv-outer clickHeader'>" + PHP_EOL;
} else {
echo "<div class='cv-outer'>" + PHP_EOL;
}
?>
Then, just add an onclick handler to your javascript for the clickHeader class to redirect to the proper URL.
If you need to keep the custom logo from the PHP code, just leave it there, delete the bit that has the URL.
Basically, the problem is that the hyperlink isn't clickable because it has no size. Instead of messing with CSS to make it fit...I'd just remove it and use JS for the clickhandler...
Full HTML Code:
<div class="entry-header">
<?PHP
if (has_custom_logo()) {
echo "<div class='cv-outer clickHeader'>" + PHP_EOL;
} else {
echo "<div class='cv-outer'>" + PHP_EOL;
}
?>
<div class="cv-inner">
<div class="header-logo">
</div>
</div>
</div>
Sample Javascript:
<script>
window.onload = function() {
var headers = document.getElementsByTagName('clickHeader');
for(var i = 0; i < headers.length; i++) {
var header = headers[i];
header.onclick = function() {
document.location.href="/";
}
}
}
</script>