Archived topic
Create a link on my header image
15 replies · Started by Forum User on March 30, 2020
Is there a way to create a link on my header image?
Hi there,
The header image is linked to the home page by default.
Are you looking to change that link?
Let me know :)
Yes, I want to change that link.
This should help:
https://docs.generatepress.com/article/generate_logo_href/
Thank you. I want to change it to my phone number and would like to add new alt text as well. Is that possible?
You would do this for telephone:
add_filter( 'generate_logo_href', function() {
return "tel:x-xxx-xxx-xxxx";
} );https://css-tricks.com/the-current-state-of-telephone-links/
To add alt text, this should help:
add_filter( 'generate_logo_output', 'tu_logo_target', 10, 3 );
function tu_logo_target( $output, $logo_url, $html_attr ) {
printf(
'<div class="site-logo">
<a href="%1$s" title="%2$s" rel="home" rel="noopener" alt="ALT-TEXT">
<img %3$s />
</a>
</div>',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
$html_attr
);
}This is generating 11 errors when added to custom CSS
add_filter( 'generate_logo_href', function() {
return "tel:1-877-800-6443;
} );Can you plugin the following alt text to the code below "Click to Call the NYC Hypnosis Center at 877-800-6443"
add_filter( 'generate_logo_output', 'tu_logo_target', 10, 3 );
function tu_logo_target( $output, $logo_url, $html_attr ) {
printf(
'<div class="site-logo">
<a href="%1$s" title="%2$s" rel="home" rel="noopener" alt="ALT-TEXT">
<img %3$s />
</a>
</div>',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
$html_attr
);
}Both of those are PHP snippets:
Adding PHP: https://docs.generatepress.com/article/adding-php/
Should I add the PHP snippets to the header.php?
Can you plugin the following alt text to the code below “Click to Call the NYC Hypnosis Center at 877-800-6443”
add_filter( 'generate_logo_output', 'tu_logo_target', 10, 3 );
function tu_logo_target( $output, $logo_url, $html_attr ) {
printf(
'<div class="site-logo">
<a href="%1$s" title="%2$s" rel="home" rel="noopener" alt="ALT-TEXT">
<img %3$s />
</a>
</div>',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
$html_attr
);
}You actually just need this one snippet:
add_filter( 'generate_logo_output', 'tu_logo_target', 10, 3 );
function tu_logo_target( $output, $logo_url, $html_attr ) {
printf(
'<div class="site-logo">
<a href="%1$s" title="%2$s" rel="home" rel="noopener" alt="ALT-TEXT">
<img %3$s />
</a>
</div>',
esc_url( apply_filters( 'generate_logo_href' , "tel:1-877-800-6443" ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
$html_attr
);
}Just replace the ALT-TEXTand tel:1-877-800-6443 with the desired text and phone number.
And no - it needs to be added with one of these methods:
https://docs.generatepress.com/article/adding-php/
I added this to the generate press header.php file but it did not work
add_filter( 'generate_logo_output', 'tu_logo_target', 10, 3 );
function tu_logo_target( $output, $logo_url, $html_attr ) {
printf(
'<div class="site-logo">
<a href="%1$s" title="%2$s" rel="home" rel="noopener" alt="Click to Call the NYC Hypnosis Center at 877-800-6443">
<img %3$s />
</a>
</div>',
esc_url( apply_filters( 'generate_logo_href' , "tel:1-877-800-6443" ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
$html_attr
);
}Here is my header.php file. Where should it be added?
<?php
/**
* The template for displaying the header.
*
* @package GeneratePress
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> <?php generate_do_microdata( 'body' ); ?>>
<?php
/**
* wp_body_open hook.
*
* @since 2.3
*/
do_action( 'wp_body_open' );
/**
* generate_before_header hook.
*
* @since 0.1
*
* @hooked generate_do_skip_to_content_link - 2
* @hooked generate_top_bar - 5
* @hooked generate_add_navigation_before_header - 5
*/
do_action( 'generate_before_header' );
/**
* generate_header hook.
*
* @since 1.3.42
*
* @hooked generate_construct_header - 10
*/
do_action( 'generate_header' );
/**
* generate_after_header hook.
*
* @since 0.1
*
* @hooked generate_featured_page_header - 10
*/
do_action( 'generate_after_header' );
?>
<div id="page" class="hfeed site grid-container container grid-parent">
<?php
/**
* generate_inside_site_container hook.
*
* @since 2.4
*/
do_action( 'generate_inside_site_container' );
?>
<div id="content" class="site-content">
<?php
/**
* generate_inside_container hook.
*
* @since 0.1
*/
do_action( 'generate_inside_container' );
As mentioned above, the code needs to be added with one of these methods:
https://docs.generatepress.com/article/adding-php/
So that worked for my desktop header but not for my mobile header (which is different).
Add this snippet as well:
add_filter( 'generate_mobile_header_logo_output','tu_mobile_logo_atts' );
function tu_mobile_logo_atts( $output ) {
printf(
'<div class="site-logo mobile-header-logo">
<a href="%1$s" title="%2$s" rel="home" alt="Click to Call the NYC Hypnosis Center at 877-800-6443">
<img class="header-image" src="%3$s" alt="%2$s" title="%2$s" />
</a>
</div>',
esc_url( apply_filters( 'generate_logo_href' , "tel:1-877-800-6443" ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
esc_url( apply_filters( 'generate_mobile_header_logo', "https://www.newyorkhypnotherapy.org/wp-content/uploads/2020/01/hypnosis-nyc-hypnotherapy-New-York.jpeg" ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
);
}That worked. Thank you!
