php - The custom logo, site title, and description doesn't appear at the same time

admin管理员组

文章数量:1318564

The problem I'm having is the custom logo, site title, and description won't appear at the same time. In image 1 below, you can see that with no custom logo, the site title, and description appears just fine.

<div id="hotwp-logo">
    <?php if ( has_custom_logo() ) : ?>
        <div class="site-branding">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="hotwp-logo-img-link">
                <img src="<?php echo esc_url( hotwp_custom_logo() ); ?>" alt="" class="hotwp-logo-img"/>
            </a>
        </div>
    <?php else: ?>
        <div class="site-branding">
            <h1 class="hotwp-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <p class="hotwp-site-description"><?php bloginfo( 'description' ); ?></p>
        </div>
    <?php endif; ?>
</div><!--/#hotwp-logo -->

When I don’t have a logo, the tag line and the description is shown.

Image 1

When I add a custom logo, the tag line and the description disappears.

Image 2

This was edited to show what I need. The tag line and the description need to show, shifting to the right of the logo.

Image 3

The problem I'm having is the custom logo, site title, and description won't appear at the same time. In image 1 below, you can see that with no custom logo, the site title, and description appears just fine.

<div id="hotwp-logo">
    <?php if ( has_custom_logo() ) : ?>
        <div class="site-branding">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="hotwp-logo-img-link">
                <img src="<?php echo esc_url( hotwp_custom_logo() ); ?>" alt="" class="hotwp-logo-img"/>
            </a>
        </div>
    <?php else: ?>
        <div class="site-branding">
            <h1 class="hotwp-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <p class="hotwp-site-description"><?php bloginfo( 'description' ); ?></p>
        </div>
    <?php endif; ?>
</div><!--/#hotwp-logo -->

When I don’t have a logo, the tag line and the description is shown.

Image 1

When I add a custom logo, the tag line and the description disappears.

Image 2

This was edited to show what I need. The tag line and the description need to show, shifting to the right of the logo.

Image 3

• php
• code

Share Improve this question edited Oct 17, 2020 at 23:40 Tom J Nowell♦ 61k77 gold badges7979 silver badges148148 bronze badges asked Oct 17, 2020 at 22:52 Ricky RitcheyRicky Ritchey 1122 bronze badges 1

• probably your problem is not "with logo" but with "logo in the wp theme" and you shoul analyse .PHP file (usually header.php) not the resulting HTML (see Jim Worall answer) – AndriuZ Commented Nov 2, 2022 at 16:49

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

Maybe I'm missing something here, but it looks like you have an if-else. If there is a logo, it shows. Else the title and description show. Try removing the if-else stuff.

Ricky, you'll have to write the proper CSS to get it to display exactly as you want it to, but the problem you're having is that you're ONLY requesting the custom logo IF the custom logo exists. IF it doesn't exist, you're asking for the title and the description, but ONLY if there is no logo.

Try this instead:

<div id="hotwp-logo">
<?php if( has_custom_logo() ) : ?>
    <div class="site-branding">
        <div class="logo-container">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="hotwp-logo-img-link">
                <img src="<?php echo esc_url( hotwp_custom_logo() ); ?>" alt="" class="hotwp-logo-img"/>
            </a>
        </div>
        <div class="title-container">
            <h1 class="hotwp-site-title">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
            </h1>
            <p class="hotwp-site-description"><?php bloginfo( 'description' ); ?></p>
        </div>
    </div>
<?php else : ?>
    <div class="site-branding no-logo">
        <div class="title-container">
            <h1 class="hotwp-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <p class="hotwp-site-description"><?php bloginfo( 'description' ); ?></p>
        </div>
    </div>
<?php endif; ?>

To make things a bit easier for styling purposes I wrapped the logo in a <div> with the class logo-container and did the same for the title and description - that'll just make it a bit easier for you to position them using CSS, but if you can remove those extra divs if you feel they're overkill. I also added a no-logo class to the site-branding div for the instance where there isn't a logo so you can modify the styling there.

EDITED | added some CSS:

.site-branding{
     display:flex;
     align-items:center;
     justify-content:flex-start;
     flex-direction:row;
     width:100%;
}
.logo-container{
     width:35%;
}
.title-container{
     width:65%;
     display:flex;
     align-items:flex-start;
     justify-content:flex-start;
     flex-direction:column;
}
.title-container > .hotwp-site-title,
.title-container > .hotwp-site-description{
     display:block;
     width:100%;
}

Haven't tested the CSS but that's the general idea.

Thank you Tony. This is the css code I have. May be this will help. I tried to ad it to my comment yesterday, but it wouldn't let me.

#hotwp-logo{
margin:5px 0px 5px 0px;
float:left;
width:41%;

} .hotwp-logo-img-link{ display:block; } .hotwp-logo-img{ display:block; padding:0; margin:0; } .hotwp-site-title{ font:normal bold 24px 'Playfair Display',Arial,Helvetica,sans-serif; margin:0 0 15px 0 !important; line-height:1 !important; color:#333333; } .hotwp-site-title a{ color:#333333; text-decoration:none; } .hotwp-site-description{ font:normal normal 13px Domine,Arial,Helvetica,sans-serif; line-height:1 !important; color:#333333; } .hotwp-header-banner #hotwp-logo{ width:41%; } .hotwp-header-search #hotwp-logo{ width:71%; } .hotwp-header-full #hotwp-logo{ margin:5px 0px 10px 0px; float:none; width:100%; text-align:center; } .hotwp-header-full .hotwp-logo-img{ display:block; padding:0; margin:0 auto; } #hotwp-logo{ margin:5px 0px 10px 0px; float:none; width:100% !important; text-align:center; } .hotwp-logo-img{ display:block; padding:0; margin:0 auto; }

本文标签： phpThe custom logosite titleand description doesn39t appear at the same time