the_author() not working outside the loop


I have the following code on index.php and I want to include this line of code (bellow) to display author info on top of the loop.

 <?php include 'author-top.php'; ?><!--author-->

I want it to display right after the header as shows here

<?php get_header(); ?>
<!--This is where I want my author div to display-->
<?php include 'author-top.php'; ?><!--author-->
    <div id="primary" class="content-area">

        <div id="content" class="site-content-home" role="main">                
        <?php if ( is_home() && ! is_paged() ) : ?>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        <?php endif; ?>
        <?php if ( have_posts() ) : ?>

                  <?php /* Start the Loop */ ?>

                  <?php while ( have_posts() ) : the_post(); ?>

                <?php get_template_part( 'content', 'home' );

            <?php endwhile; ?>

            <?php spun_content_nav( 'nav-below' ); ?>

        <?php elseif ( current_user_can( 'edit_posts' ) ) : ?>

            <?php get_template_part( 'no-results', 'index' ); ?>

        <?php endif; ?>
        </div><!-- #content .site-content -->
    </div><!-- #primary .content-area -->

This is what I get:

When I try to use the same ‘php include’ somewhere else at the bottom of the index.php code everything seems to work well. The problem is I need it on the top so it shows on the top on the small screens.

Is it anything I’m doing wrong? or it is that wordpress doesnt allow to do use ‘php includes’ in there and if so why not.

This is the content inside author-top.php

<!-- get author bio **RAUL -->
<!-- This is the author info displayed at the top of each page -->
<div id="author-bio">
    <div class="author-image"><?php echo get_avatar( get_the_author_email(), '80' ); ?></div>
    <div class="author-txt">
        <h2 class="author-name" id="clickme"><?php the_author(); ?></h2>
        <p class="toggle author-description"><?php the_author_description(); ?></br>
        <a href=""><img class="author-social" src=""></a>
        <a href=""><img class="author-social" src=""></a>
        <a href=""><img class="author-social" src=""></a></p>

    $('#clickme').click(function() { $( '.toggle' ).animate({ "height": "toggle", "opacity": "toggle" }, "slow" )});
Raul 2 years 2020-12-29T10:10:22-05:00 0 Answers 3 views 0

Leave an answer