[Resolved] Create a link on my header image

Home Forums Support [Resolved] Create a link on my header image

Home Forums Support Create a link on my header image

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1219823
    metcomllc@aol.com

    Is there a way to create a link on my header image?

    #1219834
    Leo
    Staff
    Customer Support

    Hi there,

    The header image is linked to the home page by default.

    Are you looking to change that link?

    Let me know 🙂

    #1219838
    metcomllc@aol.com

    Yes, I want to change that link.

    #1219858
    Leo
    Staff
    Customer Support
    #1219875
    metcomllc@aol.com

    Thank you. I want to change it to my phone number and would like to add new alt text as well. Is that possible?

    #1219881
    Leo
    Staff
    Customer Support

    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
    	);
    }
    #1219891
    metcomllc@aol.com

    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
    	);
    }
    #1219901
    Leo
    Staff
    Customer Support

    Both of those are PHP snippets:
    Adding PHP: https://docs.generatepress.com/article/adding-php/

    #1219908
    metcomllc@aol.com

    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
    	);
    }
    #1219913
    Leo
    Staff
    Customer Support

    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/

    #1219939
    metcomllc@aol.com

    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' );
    			
    #1219949
    Leo
    Staff
    Customer Support

    As mentioned above, the code needs to be added with one of these methods:
    https://docs.generatepress.com/article/adding-php/

    #1219978
    metcomllc@aol.com

    So that worked for my desktop header but not for my mobile header (which is different).

    #1220048
    Leo
    Staff
    Customer Support

    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' ) ) )
    	);
    }
    #1220055
    metcomllc@aol.com

    That worked. Thank you!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.