The Site Logo feature allows you to add a logo to your Jetpack-powered site, and have it persist between theme switches. Any theme that supports it will display the logo in its own unique way, consistent with that theme’s design.
Adding Support
Theme developers can add support for Site Logo by following these two simple steps.
Step 1. Declare support in a function hooked to after_setup_theme.
add_theme_support( 'site-logo' );
You can also pass arguments to site logos for further customization (see below for details of each argument). Defaults are:
$args = array( 'header-text' => array( 'site-title', 'site-description', ), 'size' => 'medium', ); add_theme_support( 'site-logo', $args );
Step 2. Use the template tag to output the logo in header.php (or wherever you would like to show it). Be sure to include the function_exists() check to avoid fatal errors if Jetpack isn’t activated.
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
Arguments
header-text (array|string)
Since site logos are often used to replace the site title and tagline on a site, we make sure that users have the ability to hide them. If the theme supports Custom Header already, then Site Logo leaves that implementation to handle the hiding. If not, Site Logo adds a control identical to that in Custom Header, and uses the array of classes (or a string of one class) defined in the add_theme_support call as its target for hiding. The defaults conveniently work for any theme based on Underscores.
size (string)
By default, Site Logo will display the medium size of the image selected; however, this can be changed to any valid image size (including those declared with add_image_size()). This allows theme authors to declare a custom size for the site logo, and have the tool use that size.
// Create a custom image size for Site Logo. add_image_size( 'mytheme-logo', 200, 200 ); // Declare theme support for Site Logo. add_theme_support( 'site-logo', array( 'size' => 'mytheme-logo', ) );
Styling
Site logos are output as an img tag wrapped in an a tag. The image tag has the site-logo class, while the wrapping anchor can be targeted with the site-logo-link class.
<a href="http://amazing.com/" class="site-logo-link" rel="home"> <img width="200" height="200" src="http://amazing.com/wp-content/uploads/2014/09/logo.jpg" class="site-logo attachment-mytheme-logo" alt="Company logo" data-size="mytheme-logo"> </a>
To ensure the site logo looks great on Retina/HiDPI screens, one technique is to declare a size that is twice the size of a max-width or max-height property for .site-logo in your stylesheet. Using the above mytheme-logo size as an example (which is 200×200), we could add the following to our stylesheet:
.site-logo {
max-width: 100px;
}
Filters
jetpack_the_site_logo
This filter is applied on the output of the jetpack_the_site_logo() template tag, allowing adjustments to its markup. If using this filter, be sure to include handling for the Customizer placeholder and required classes (.site-logo and .site-logo-link), so that the live preview continues to work as expected. For more details, see the Site Logo source code.
Additional Notes
Switching to a theme that uses a custom image size for site logos can result in the full size being displayed in the Customizer preview. This is because the thumbnails for that custom size may not have been generated if it’s the first time the site is using that theme. To correct this, install the Regenerate Thumbnails plugin and run it after the theme switch. After it completes, assigning an image to the site logo will result in the proper size being displayed in the Customizer preview pane.
Themes in the WordPress.org repo that currently support Site Logo include:
Site Logo is also available for 30+ themes on WordPress.com.
