How to change the header logo link & visual focus when tabbing on header items

Shapely
1

I was hoping I could get help with a few things. I’m very new to editing wordpress themes and only have a pretty basic knowledge of HTML and CSS.

  1. I would like to know how to change the header logo link to an external URL

  2. When I tab through the homepage, I can select the different menu items but none of them have a visual focus (blue box around them) the rest of the page does, I was wondering if there’s a way to change that.

  3. Search box - when tabbing through the page you can’t access the searchbox. Is there a way to change that?

2

Alright, I think I figured out how to take care of #1:

It looks like the logo link is handled in the file “Extras” located in the “inc” folder with this code:

function shapely_get_header_logo() {
$logo_id = get_theme_mod( ‘custom_logo’, ‘’ );
$logo = wp_get_attachment_image_src( $logo_id, ‘full’ ); ?>

<a>"&gt;&lt;?php
if ( $logo[0] != '' ) { ?&gt;
	<img />" class="logo"
	     alt="&lt;?php echo esc_html( get_bloginfo( 'name' ) ); ?&gt;"&gt;&lt;?php
} else { ?&gt;
	&lt;span class="site-title"&gt;&lt;?php echo esc_html( get_bloginfo( 'name' ) ); ?&gt;&lt;/span&gt;&lt;?php
} ?&gt;
</a>&lt;?php

}

Delete this part - <?php echo esc_url( home_url( ‘/’ ) ); ?> and change it to the URL you want the logo to link to and it seems to work!

3

Hi,

It can be done via Child theme, if you don’t have a child theme create one: Child Themes « WordPress Codex

After that add this in the functions.php

function logo_size_change(){
	remove_theme_support( 'custom-logo' );
	add_theme_support( 'custom-logo', array(
	    'height'      => 100,
	    'width'       => 400,
	    'flex-height' => true,
	    'flex-width'  => true,
	) );
}

add_action( 'after_setup_theme', 'logo_size_change', 11 );

Adjust the height and width according to your needs.

After that, add this Custom CSS in Appearance -> Customize -> Additional CSS,

.nav-bar .module, .nav-bar .module-group {
    height: 100px;
}

.logo {
    height: 100px;
    max-height: 100%;
    width: 400px;
}

Adjust the width and height according to the first line change.

Let us know,

Thanks,
laranz.