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:
http://gyazo.com/4154248fa37c84f9cb8f52871f186723.png
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="http://www.linkedin.com/in/raulmvicente"><img class="author-social" src="http://www.webleria.com/wp-content/themes/spun/images/linkedin_circle_color.png"></a>
<a href="http://www.twitter.com/raulmvicente"><img class="author-social" src="http://www.webleria.com/wp-content/themes/spun/images/twitter_circle_color.png"></a>
<a href="https://plus.google.com/116575236589076788314?rel=author"><img class="author-social" src="http://www.webleria.com/wp-content/themes/spun/images/google_circle_color.png"></a></p>
</div>
</div>
<script>
$('#clickme').click(function() { $( '.toggle' ).animate({ "height": "toggle", "opacity": "toggle" }, "slow" )});
</script>
I will answer my own question here.
The reason the user information didn’t display is because the php tags need the author ID when used outside the loop.
For instance the following tag:
Should be like this:
This is explain quite well here.
Now the code works just fine.
If you’re on a single page you can just use the
post_author
‘s id. You can write:the_author_meta('display_name', $post->post_author );
that worked just fine for me. That way you don’t have to hard code the id.A user ID must be specified if used outside The Loop.
Try this in author-top.php
Must include the user ID.
Source http://codex.wordpress.org/Function_Reference/get_the_author_meta