Create condition for Author bio Social Links

Question

I made Social Links for Author bio Now, I want to make a condition that whenever Social is added, the <ul class="social-area social-area-2"> </ul> class should be created. If no Social is added, the social-area social-area-2 class should not be added. Thank you for helping me

code file author-bio.php

<?php

    $facebook  = get_the_author_meta('facebook', $author_id);
    $twitter = get_the_author_meta('twitter', $author_id);
    
    if ( (bool) get_the_author_meta( 'description' ) && (bool) get_theme_mod( 'show_author_bio', true ) ) : ?>
    <div class="author-area">
    <div class="media">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 120 ); ?>

        <div class="media-body align-self-center">
            <div class="text-author">
                <h4>
                    <a class="author-link"
                        href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
                        <?php printf(get_the_author() ); ?>
                    </a>
                </h4>
                <?php echo wp_kses_post( wpautop( get_the_author_meta( 'description' ) ) ); ?>
            </div>        

            <ul class="social-area social-area-2">

                <?php
                if(!empty($facebook)) {
                echo '<li><a title="Follow me on Facebook" href="'.$facebook.'"><i class="fab fa-facebook-f"></i></a></li>'; }
                ?> 

                <?php   
                if(!empty($twitter)) {
                echo '<li><a title="Follow me on Twitter" href="'.$twitter.'"><i class="fab fa-twitter"></i></a></li>'; }
                ?>

            </ul>
        </div>
    </div>
</div>
<?php endif; ?>

code file functions.php

    function my_new_contactmethods( $contactmethods ) {

    $contactmethods['facebook'] = 'Facebook';
    $contactmethods['twitter'] = 'Twitter';
    
    return $contactmethods;
    }
    add_filter('user_contactmethods','my_new_contactmethods',10,1);

Answer 1

You can simply try the below code.

<?php
    $facebook  = get_the_author_meta('facebook', $author_id);
    $twitter = get_the_author_meta('twitter', $author_id);
    
    if ( (bool) get_the_author_meta( 'description' ) && (bool) get_theme_mod( 'show_author_bio', true ) ) : 
?>
    <div class="author-area">
        <div class="media">
            <?php echo get_avatar( get_the_author_meta( 'ID' ), 120 ); ?>

            <div class="media-body align-self-center">
                <div class="text-author">
                    <h4>
                        <a class="author-link"
                            href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>"
                            rel="author">
                            <?php printf(get_the_author() ); ?>
                        </a>
                    </h4>
                    <?php echo wp_kses_post( wpautop( get_the_author_meta( 'description' ) ) ); ?>
                </div>

                <?php if( ! empty( $facebook ) && ! empty( $twitter ) ): ?>
                    <ul class="social-area social-area-2">
                        <?php
                            if( ! empty($facebook) ) {
                                echo '<li><a title="Follow me on Facebook" href="'.$facebook.'"><i class="fab fa-facebook-f"></i></a></li>'; 
                            }
                        ?>
                        <?php   
                            if( ! empty($twitter) ) {
                                echo '<li><a title="Follow me on Twitter" href="'.$twitter.'"><i class="fab fa-twitter"></i></a></li>'; 
                            }
                        ?>
                    </ul>
                <?php endif; ?>
            </div>
        </div>
    </div>
<?php endif; ?>

Thanks. If not working, please share your full theme code via github, dropbox, onedrive or wetransfer. I check your code in my free time.