Expose Pro – Replacing Site Header Avatar With Larger Logo

The Expose Pro child theme by StudioPress is coded to display the admins avatar before the site title like this:

If you’d like to replace the avatar with your logo, this is easily done. Simply use the Header Image setting in the WordPress Customizer to upload your logo like you see in the following screenshot:

If you want to change the size of the image, you will need to modify the PHP code & CSS before uploading your logo image to the header.

Here’s the instructions to do that:

Change Logo Size

To change the size of the header image, there’s 2 steps:

Step 1 : You need to change the values for the height and width in the PHP code located on lines 45 & 46 in the Expose themes functions file. Here’s an example where the dimensions have been changed:

add_theme_support( 'custom-header', array(
	'admin-preview-callback' => 'expose_admin_header_callback',
	'default-text-color'     => '000000',
	'header-selector'        => '.site-header .site-avatar img',
	'height'                 => 300,
	'width'                  => 600,
	'wp-head-callback'       => 'expose_header_callback',
) );

This change effects the cropping of the uploaded image so WordPress will now crop the image to 600 x 300.

Step 2 : You now need to change the values for the width & height in the Expose themes style.css file. You’ll find the values on lines 560 & 562. In the following example, the dimensions have been changed to 300 x 150 which is half the size of the uploaded logo.

.site-header .avatar,
.site-header .site-avatar img {
	/* border-radius: 50%; */
	box-shadow: 0 0 0 5px #fff;
	float: none;
	height: 150px;
	margin: 0 auto 24px;
	width: 300px;
}

The border radius declaration has also been commented out as it only applies to making the square avatar round.

This tutorial has been written based on the following question from a members of the StudioPress community:

Expose Theme: Remove avatar and replace with larger logo image : I’d like to use my client’s logo *not* the avatar and definitely not rounded and constrained by the frame size used for the avatar image.