Wrapping logo/image in homepage with H1 tag getting more popular today. Question: a) How to do it for a wordpress base website? b) What's code (php or other) and where to put it

c) Any plugin to do it easier? (newbie here).

Thanks

Some examples I see:

yoast

<h1><a href="/" class="siteheader__title">
<picture>
    <source media="(max-width: 895px)"
            srcset=".svg" sizes="100%"/>
    <source media="(min-width: 896px)"
            srcset=".svg"
            sizes="100%"/>
    <img src=".svg" alt="Yoast - SEO for everyone" loading="eager"/>
</picture>

bbc

<h1 id="page-title">BBC Homepage</h1>
    <div id="page" role="main" class="content" data-wwhp-module="images, media">

Wrapping logo/image in homepage with H1 tag getting more popular today. Question: a) How to do it for a wordpress base website? b) What's code (php or other) and where to put it

c) Any plugin to do it easier? (newbie here).

Thanks

Some examples I see:

yoast

<h1><a href="/" class="siteheader__title">
<picture>
    <source media="(max-width: 895px)"
            srcset="https://yoast/app/themes/yoast-theme/images/logo-diap.svg" sizes="100%"/>
    <source media="(min-width: 896px)"
            srcset="https://yoast/app/themes/yoast-theme/images/logo.svg"
            sizes="100%"/>
    <img src="https://yoast/app/themes/yoast-theme/images/logo.svg" alt="Yoast - SEO for everyone" loading="eager"/>
</picture>

bbc

<h1 id="page-title">BBC Homepage</h1>
    <div id="page" role="main" class="content" data-wwhp-module="images, media">

• plugins
• php
• homepage
• frontpage
• logo

• I don't think this is possible with a plugin, but you can do it with a child theme. Create a child theme and edit header.php. But take into account that this h1 must be defined only on the homepage. The other pages must have a unique title. – ZecKa Commented May 14, 2020 at 7:32
• Thanks. Would you give me the code I asked above? – Bright Indy Commented May 14, 2020 at 10:23
• It depends on the theme you use. Which theme do you use? – ZecKa Commented May 14, 2020 at 10:28
• I use education hub wordpress/themes/education-hub/ – Bright Indy Commented May 14, 2020 at 10:39

1 Answer 1

Following your comment, here's how you can do:

Education Hub use hook to display header, so you it is possible to override education_hub_action_header hook inside a plugin like that

add a new php file in wp-content/plugins/ with following content:

<?php

/*
Plugin Name: h1 in homepage logo for education hub
Version: 1.0.0
*/

add_action('init', function(){
    remove_action( 'education_hub_action_header', 'education_hub_site_branding', 10 );
});

add_action('education_hub_action_header', 'education_hub_site_branding_override');
function education_hub_site_branding_override(){
    ?>
        <div class="site-branding">

            <?php if ( is_front_page() || is_home() ) : ?>
                <h1>
            <?php endif; ?>
            <?php education_hub_the_custom_logo(); ?>
            <?php if ( is_front_page() || is_home() ) : ?>
                </h1>
            <?php endif; ?>

            <?php $show_title = education_hub_get_option( 'show_title' ); ?>
            <?php $show_tagline = education_hub_get_option( 'show_tagline' ); ?>
            <?php if ( true === $show_title || true === $show_tagline ) :  ?>
            <div id="site-identity">
                <?php if ( true === $show_title ) :  ?>
                <?php if ( is_front_page() && is_home() ) : ?>
                  <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                <?php else : ?>
                  <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php endif; ?>
                <?php endif ?>

                <?php if ( true === $show_tagline ) :  ?>
                <p class="site-description"><?php bloginfo( 'description' ); ?></p>
                <?php endif ?>
            </div><!-- #site-identity -->
            <?php endif; ?>

        </div><!-- .site-branding -->

        <?php $show_search_form = education_hub_get_option( 'show_search_form' ); ?>
        <?php if ( true === $show_search_form ) : ?>
            <div class="search-section">
                <?php get_search_form(); ?>
            </div>
        <?php endif; ?>

    <?php
}

then activate: h1 in homepage logo for education hub plugin