Custom Logo To Site Title

On many sites it seems as if the custom logo and the site title both form part of the same image. You can actually add both to a single image but what happens if you know your theme will be on more than one site, each with a different site title. The method I am going to describe here keeps the logo and title separate but they behave as if they were one. This blog has implemented this functionality.

So just what do you need to do to make this happen?

All you need is a simple short function that you add to your themes functions.php file or whatever file your theme uses to store functions.

Required Function

You need the following code:

if ( ! function_exists( 'your_domain_prepend_custom_logo_to_title' ) ) {
	 * Pre-pends custom logo to site-title.
	function your_domain_prepend_custom_logo_to_title() {

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

		if ( is_rtl() ) {
			$css = '.wp-custom-logo .site-title a {background-image: url("%1$s");background-size: 32px 32px;background-position: right center;background-repeat: no-repeat;padding-right: 37px;}';
		} else {
			$css = '.wp-custom-logo .site-title a {background-image: url("%1$s");background-size: 32px 32px;background-position: left center;background-repeat: no-repeat;padding-left: 37px;}';

		wp_add_inline_style( 'your-domain-style', sprintf( $css, $your_domain_title_background_image ) );
	add_action( 'wp_enqueue_scripts', 'your_domain_prepend_custom_logo_to_title', 11 );

Please change all references to your_domain or your-domain to your theme’s real domain. All the function does is find the custom logo you uploaded in the Customizer and adds it to the beginning of the site-title link. This it does by adding a snippet of inline CSS to your theme’s head section.

You will notice that the code actually only adds the snippet once. If the site is using RTL (right to left) the function returns only the applicable snippet. The same happens with LTR (left to right). This is there because you cannot change inline CSS with a RTL style sheet. It does not matter which text direction you are using on your site, this function will add the necessary styling.

Obviously you will have to load a custom logo to see the effect this function has. If you are using the Stix starter theme you need not bother with this function as it is already there.

Thanks for visiting.


Start the Conversation

Your e-mail address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.