How to add a Custom Theme Logo in WordPress

Erika in Glasses
2 min readNov 2, 2016

I’m writing this after I realized that the Codex only gives you half the steps and not really in that great of detail for people new to WordPress.

This is what the Codex gives you:

Step 1:

Open your function.php file in your theme folder and locate this line:

add_theme_support( 'custom-logo' );

Replace it with this:

add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
) );

This gives the logo a set width and height, which you can change, it also states that the width and height can be flexible based on the actual image file so that you don’t get a warped image.

Step 2:

Open the file where you want the theme logo to appear and add this code:

$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
echo $image[0];

But you need to change it a little… which the Codex leaves out

<?php 
$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<img src="<?php echo $image[0]; ?>" alt="">

--

--

Erika in Glasses

Web developer. Twitch Affiliate (erikainglasses). Youtuber. Olympic lifter. I write about code and streamer.