Add Author Image to Post

Basic support is open to all members of Volatyl Themes but what about those who need a little more? That's what Volatyl Themes subscriptions are for. The Priority Support subscription gets you more detailed, personal support while the Advanced Development subscription not only includes Priority Support, but also grants you access to premium content only seen by subscribers. This premium content will help you take your Volatyl websites to the next level with advanced development techniques, integration tips, and more information on how to really put Volatyl to use. Check out the subscriptions!

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Richard O’Brien 6 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3879

    Richard O’Brien
    Participant

    Hi Sean,

    If you want to add an Author Image to a post is done with hooks?

    I can see….

    <span class="meta-author">
    <a class="fn" href="http://########/##/######/####/" title="">#####< /a>
    </span>

    Where do you start if you need to style these….

    <div class="entry-meta">####< /div>

    …areas?

    #3883

    Richard O’Brien
    Participant

    Sorry, after re-reading I see I didn’t emphasize to every post

    #3882

    sdavis2702
    Keymaster
    Post count: 72

    Hey, Rich. For the author image, what you’re trying to do here is modify your content structure… which is where the beauty of child themes comes into play.

    You can override anything from Volatyl in a child theme. In this case, you’ll be modifying a template file to make it sure more post meta information (the author avatar) than what is displayed by default.

    The first thing to do is copy the correct template (in the correct structure) into your child theme. Since we’re talking about single posts, you’ll want to create a folder called “templates” in your child theme’s root folder. This follows the same structure as the parent theme, Volatyl. Then, directly from your Volatyl download (make sure you’re up-to-date), copy the “content-single.php” file and paste it into the templates folder of your child theme.

    Now, because of how WordPress functions, the child theme’s content-single.php file will be responsible for rendering your single post content instead of the parent theme, Volatyl. That’s where you being making your changes (you can change absolutely anything you want and never have to worry about it being overridden… because you’re working in a child theme).

    In that content-single.php file of your child theme, find the line of PHP including:

    volatyl_post_meta();

    Directly above that line, add the following PHP:

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

    That will fetch the avatar of the author of the post in the loop… meaning it will change based on the author of the article being viewed. Then, all you have to do is use CSS to style it how you’d like. Likewise, it doesn’t have to be placed before the byline. You can definitely use hooks and place it somewhere else if you’d like… like a post footer for an author box.

    To style entry-meta items, you just need to write the CSS for them. Each of the items is wrapped in its own element with a class for easy styling. So if you wanted to make the author name in the byline bold, you’d write:

    .meta-author { font-weight: bold; }

    Simply use the classes wrapping the byline elements to style them with basic CSS in your child theme’s style.css file.

    Here are both changes in action: http://cl.ly/image/3m3p1l1b2J0I

    You have complete freedom in your child theme… override everything! 🙂

    #3881

    Richard O’Brien
    Participant

    killer info Sean. Worked like a charm

    #3880

    sdavis2702
    Keymaster
    Post count: 72

    Awesome! Let me know if you need to make any other major changes. Happy coding. 🙂

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.