If we need to include an image in the header of our page with a link in WordPress (for example, to include a sponsor’s logo to access the sponsor’s website from there) this is not easy from WordPress. We can include an image but we cannot customize the link associated with this image. In any case, the way to do it is simple, just include a line of code in the header.php of the theme we are using.
For example, if we use the twentysixteen theme, we edit the header.php of this theme that is located in htdocs/wordpress/wp-content/themes/twentysixteen/header.php and include in the html <head> the line that contains the path of our image (which we must have logically previously added to the media library) and the path of the link we want to access by clicking on the image :
<a href=’https://www.tesla.com/referral/yolanda914279′ target=’_blank’>
<img src=’wp-content/uploads/2024/10/YReferral.png’></a>
Which would leave us with something like this:
<?php
/**
* The template for displaying the header
*
* Displays all of the head element and everything up until the "site-content" div.
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
<?php endif; ?>
<?php wp_head(); ?>
<a href="https://www.tesla.com/referral/yolanda914279" target="_blank">
<img src="wp-content/uploads/2024/10/YReferral.png"></a>
</head>With this, the desired banner will appear in the header of our WordPress with our image and the corresponding link.
