Home / Thesis User Guide / Customize Bylines

Customize Bylines

Submitted by Gregory · April 20, 2011 11:29 am

The default Bylines in Thesis are useful, but customizing them to meet your needs has to be done using custom_functions.php. You can turn all Bylines “OFF” in your Thesis Design Options, and by using the code below they will return.

Insert Gravatar Photo

Place this code into custom_functions.php anywhere after <?php

// Custom Bylines
function custom_byline() {
  if (is_single()) { ?> 
    <?php echo get_avatar(get_the_author_id(), 32); ?><p>Submitted <?php thesis_author(); ?><abbr title="<?php echo get_the_time('Y-m-d H:i'); ?>"> &middot; <?php echo get_the_time(get_option('date_format')); ?> <?php the_time('G:i a'); ?></abbr></p>
<?php }}
add_action('thesis_hook_after_headline', 'custom_byline');

Now style it with CSS by placing the following into custom.css

/* @Bylines */

.custom .headline_meta {
    height: 32px;
    width: 100%;
    padding: 5px 0 0 0;
}

.custom .headline_area span, .custom abbr, .custom .headline_area p {
    font-size: 12px;
    text-transform: none;
    font-style: italic;
    letter-spacing: normal;
}

.custom .avatar {
    float: left;
    margin-right: 7px;
}

Insert Gravatar Photo AND AddThis Widget

This requires the popular (and free) AddThis plug-in.

Place this code into custom_functions.php anywhere after <?php

// Custom Bylines
function custom_byline() {
  if (is_single()) { ?> 
  <?php do_action( 'addthis_widget' ); ?>
    <?php echo get_avatar(get_the_author_id(), 32); ?><p>Submitted <?php thesis_author(); ?><abbr title="<?php echo get_the_time('Y-m-d H:i'); ?>"> &middot; <?php echo get_the_time(get_option('date_format')); ?> <?php the_time('G:i a'); ?></abbr></p>
<?php }}
add_action('thesis_hook_after_headline', 'custom_byline');

Now style it with CSS by placing the following into custom.css

/* @Bylines */

.custom .headline_meta {
    height: 32px;
    width: 100%;
    padding: 5px 0 0 0;
}

.custom .headline_area span, .custom abbr, .custom .headline_area p {
    font-size: 12px;
    text-transform: none;
    font-style: italic;
    letter-spacing: normal;
}

.custom .avatar {
    float: left;
    margin-right: 7px;
}

.custom .addthis_toolbox {
    float: right;
    padding: 7px 0 0 0;
}

For more detailed information regarding Bylines and Post Meta, visit the WordPress Codex

  • Wendysolum

    Great post, thank you! I’ve successfully implemented the widget at the top of my post. I am not that familiar with AddThis but notice that there is also an option in the plugin to display various versions of the widget (or perhaps a widget of a different name?) at the bottom of the post. Can you post an example function that would display the end of post widget? I am looking to display the larger icons at the end, if that helps.

    • Wendysolum

      My bad. After going into the plugin and customizing it, it now displays what I want, sort of. I’ve selected certain services to display (through the plugin UI) but they display in reverse order at the top. Is there a way to control that through the function? Thanks again.

Previous post:

Next post: