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.
This feature can now be added via WordPress itself. You can learn more about it here.
Theme developers can add support for Site Logo by following these two simple steps.
Step 1. Declare support in a function hooked to
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(); ?>
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.
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. // Create a custom image size for Site Logo. // Declare theme support for Site Logo. add_theme_support( 'site-logo', array( 'size' => 'mytheme-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.
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.