Add an avatar or picture next to your title and byline

Before each post that I write on this site there’s a picture of the man, the legend, my fav,  the ass-kickin’ NastyCanasta.  You can put any image you want next to your posts.  Here’s how…

In your custom_functions.php file add this code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*avatar next to title and byline*/
function FunctionName() {
echo ‘<img src=”the directory where your image is located/nastycanasta.jpg” class=”pick a name” />’;
}
add_action(’thesis_hook_before_headline‘, ‘FunctionName‘);

Note some key points here:

Name your function

Assign it a class name whatever you want

Place your function with a hook, this case before the headline, and hang on the hook what function you want there

Now you want to style the image so in your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*avatar styles*/
.custom .”the class name you gave it” { float: left; }

Some points here:

You want to float the image to the left so its moved over as far as possible and the title and byline wrap around it

If you want to move the image down a little or give more space between the image and the title and byline you can add a margin-top Xem, margin-right Xem,  where X=numerical value of whatever you want.

You can add margins, borders, colors, anything else you want to style it within those brackets

Tagged as: avatar, avatar next to title byline, byline, title