Need author's name and pic next to date of blog post; also, move search field

I have two things that I need to do with Wordpress running the Theme Fresh News by WooThemes.

  1. I would like to have it so that the name and a thumbnail pic of the author of the blog post are next to the date of the blog post at the top of the blog post. Also, I would like to have the author’s name listed next to the date on the pages that list posts by author, blog post search results pages, etc.

  2. I would like to move the search field down a bit so that it is below the header’s background image, but yet still in the header.

Step-by-step instructions would be greatly appreciated.

Thanks!

I’m going to see if the client is OK with having a search widget first. If not, then I’ll look for a solution.

With regard to putting the name and pic right under the blog post title, I was able to get the name under the blog post title, but not the pic.

Here is the code:

<p>By <?php the_author_posts_link(); ?></p>
<div class=“date-comments”>
<p class=“fl”><?php the_time( get_option( ‘date_format’ ) ); ?></p>
<p class=“fr”><?php the_category(', ') ?></p>
</div>

The code in the <p></p> brackets is the code that put the author’s name right under the title of their blog post. How do I get the author’s pic to show up right next to the name?

Just so you know, the author already has a pic uploaded to gravatar.com, and that pic shows up under USERS in the admin section of the site.

Do you have a link to the live site?

http://www.SignLanguageCo.com.

Thanks.

I’m not sure I’m getting this right… This page, for example, has an “about” box below the article. Is that the content you want to have at the top of the article (below its heading)?

Good question. No, that’s actually separate. I tested the above code on a different site with the same Wordpress theme (WooThemes’s “Fresh News”; I should have noted that), and only the name of the author appeared, not the gravatar.

The way the client would like it is the way Mashable has it set up on their blog, where the author’s gravatar, along with their name, is right below the title of the blog post.

For example:

Ok, got you. You said you found out how to get the author’s name. So, all that remains, is getting the avatar. For that you would use the Gravatar function that’s built into WordPress:


<?php echo get_avatar( get_the_author_meta('ID'), 32 ); ?>

See this page for more information on the function.

Great. Thanks. It worked! The only thing is, the alignment is off between the gravatar and the text, “by [author]”, which should be on the same line.

How do I combine the two lines of code so that the gravatar will be lined up and on the same line as the text “By [author]”?

Here are the two lines of code:

<p>By <?php the_author_posts_link(); ?></p>

<?php echo get_avatar( get_the_author_meta('ID'), 32 ); ?>

This is what I tried, but the alignment was off:

<p><?php echo get_avatar( get_the_author_meta('ID'), 32 ); ?>
By <?php the_author_posts_link(); ?></p>

I’m glad it worked. :slight_smile:

Now you’d need to apply some CSS to make it display the way you want.

As you haven’t added these functions to the live site yet—at least I can’t see them—I don’t know what code is output.

You could add an id to your p.

Something like:

#byline img {
    vertical-align: middle;
    margin: 0 15px 0 0;
}

<p id="byline"><?php echo get_avatar( get_the_author_meta('ID'), 32 ); ?>  By <?php the_author_posts_link(); ?></p>

This is just sample code. You might have some other inherited CSS that may override it, so have a look at what auto styling WordPress is adding and adjust it to your needs.