Sridhar Katakam

Genesis and WordPress Tutorials

  • HI Sridhar, Any idea why the logo should be showing on front end but is not.

    It’s in the source code but not displaying on the front end.

    Strange. The logo is there but not showing:

    https://www.staging1.pixelhappy.co/

    Protected by login: username: pixelfy password: Happy@4Ever

    If you have a moment to take a look.

    Thanks.

    Reply

  • Thanks, Sridhar, now have an inline logo and a fixed mini header upon scroll thanks to you!

    Yael

    Reply

  • Awesome tutorial! I’ve followed it step by step and uploaded my logo for the title-area but only find an empty

    in my source code and no logo on the front end. Any idea what might be happening?

    Reply

    • Make these changes:

      1) Replace

      // If the custom logo function and custom logo exist, set the logo image element inside the wrapping tags.
if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) {
    $inside = sprintf( '<span class="screen-reader-text">%s</span>%s', esc_html( get_bloginfo( 'name' ) ), get_custom_logo() );
} else {

      with

      // If the custom logo function and custom logo exist, set the logo image element inside the wrapping tags.
if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
    $logo_url = $image[0];

    $inside = sprintf( '<a href="%s"><img src="%s" alt="%s" /><span class="site-name">%3$s</span></a>', trailingslashit( home_url() ), $logo_url, esc_html( get_bloginfo( 'name' ) ) );
} else {

      2) Add this sample CSS and tweak further per your design:

      .title-area {
    width: auto;
}

.wp-custom-logo .site-title > a img {
    max-width: 300px;
    vertical-align: middle;
    margin-right: 20px;
}

.site-name {
    vertical-align: middle;
}

.site-header .widget-area,
.site-header .search-form {
    width: auto;
}

      screenshot

      Reply

    • Try adding this in your child theme’s style.css:

      /* ## Screen Reader Text
--------------------------------------------- */

.screen-reader-shortcut,
.screen-reader-text,
.screen-reader-text span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus {
    background: #fff;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
    clip: auto !important;
    color: #333;
    display: block;
    font-size: 1em;
    font-weight: bold;
    height: auto;
    padding: 15px 23px 14px;
    text-decoration: none;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}
      Reply

      • Thank you so much for this Sridhar.
        This removed the title, the site description is still showing though.

        Reply

        • Actually I have now changed the theme so it won’t show but I’ll keep this in mind for the next time I need to add a logo 🙂

          Reply

  • Hi Sridhar,

    Thank you so much for this helpful tutorial.

    My logo is pointing from /wp-content/uploads/2017/10/logo.svg

    How can I have my logo pointing from /images/logo.svg Or /wp-content/themes/monochrome-pro/images/logo.svg

    Thank you in advance for your support.

    Reply

  • I’m having trouble doing this in Magazine Pro. I’ve made all the changes, though it doesn’t show anything. Is there anything specific to Magazine Pro that would require this to be slightly modified?

    Reply

  • Is this tutorial still relevant for the latest version of Genesis, I am using Executive Pro theme, and the first time I tried this the logo disappeared, it might have been that caching issue you mentioned above, but I wanted to ask about the newest version befroe I attempt it again, thanks for all your help!!!

    Reply
    • >