SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to the live site?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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)?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    http://mashable.com/2012/01/16/farfetch-com-18-million/

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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:

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

    See this page for more information on the function.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    PHP Code:
    <p>By <?php the_author_posts_link(); ?></p>

    <?php echo get_avatarget_the_author_meta('ID'), 32 ); ?>
    This is what I tried, but the alignment was off:

    PHP Code:
    <p><?php echo get_avatarget_the_author_meta('ID'), 32 ); ?> 
    By <?php the_author_posts_link(); ?></p>

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'm glad it worked.

    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:

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


    Code HTML4Strict:
    <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.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •