5 thoughts on “How To Implement Jetpack’s Site Logo on Your Theme

  1. Thanks for the post, Fikri! I’m a little frustrated that the Jetpack method automatically includes a width and height attribute on the image tag. Do you know a way to prevent that? I’d like my CSS to manage the size of the logo. Is it a matter of wrapping the logo in a div then styling the container?

    1. Glad you like the post 🙂 I think you can alter the logo HTML output using jetpack_the_site_logo filter at https://github.com/Automattic/jetpack/blob/master/modules/theme-tools/site-logo/inc/functions.php#L90. Theoretically, you can also remove the attributes using javascript or adding specific styling rule to make the attribute irrelevant.

      1. Thanks, Fikri. Great options.

  2. Thanks for writing the post; it was helpful. I’m building a theme, and the behavior I was looking for was:

    (1) If Jetpack site logo is present, display it in the header along with site title and site description. Otherwise, only show site title and site description.

    (2) On a custom page template, if Jetpack site logo is present, display it in the header, and hide site title and site description. Otherwise, show site title and description.

    I ended up using this code for my purposes:

    .page-template-page-full-width-landing-page.has-site-logo .site-title,
    .page-template-page-full-width-landing-page.has-site-logo .site-description {
    	display: none; 
    }
    
    1. Thank you for sharing your solution, Paul 🙂

Share Your Thought