Docs

[ecomalley]

How can I display a logo AND logo text at the same time?

Thanks,

Ed

[Rahul]

Hi there,

Thank you for writing in!

It’s possible to have blog title as well as the logo. So as this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that please duplicate wp-content/themes/x/framework/views/global/_brand.php to your child theme’s folder framework/views/global/ and in the duplicated file, replace all of the code with the following:

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo $site_logo . "<span>$site_name</span>" ?>
</a>
<div class="tagline">TAGLINE</div>

Replace “TAGLINE” with the text you want to add as a tagline.

After that you might want to style it. So for that purpose you can simply use the following CSS code in Customizer > Custom > CSS to make your desired CSS changes:

/* to target SITE TITLE styling */
.x-brand span {
   display: block;
}

/* to target TAGLINE styling */
.x-navbar .tagline {
   display: block;
}

That’s it.

Hope this helps. 🙂

Thank you.

[Rahul]

There’s a simple solution to it as well :

If child theme creation is boring to someone they might find it useful.

1) Use text logo via Customizer
2) Upload your logo via Media Uploader of WordPress.
3) Add the following CSS via Customizer > Custom > CSS

.x-navbar .x-brand {
    background: url('http://theme.co/x/member/wp-content/themes/x-member-area/images/logo.png') no-repeat left !important;
    padding-left: 75px !important; /* width of your logo */
    height: 60px !important; /* height of your logo */
}

See the magic!

Hope this helps, Cheers!

[Author]

Posts