Shareaholic Hack for Thesis 2.x

– Posted in: Hacks

Shareaholic is a very popular plugin used with WordPress. The plugin supplies share buttons to many social media networks, which allows readers to share articles they read on their favorite websites. When I installed the plugin, I noticed that the buttons were below my featured image and not under the title as it should be. So, I sought out a hack for Thesis, my theme of choice, which placed the buttons where they should be. 

Symptom

When Shareaholic buttons are set to be Above Post, they sit below the post’s featured image.

  • WordPress version 4.0.1
  • Theme: Thesis version 2.1.9
  • Plugin: Shareaholic version 7.6.0.4

Serge Liatko, developer of WordPress Featured Image for Thesis Theme 2 plugin, supplied the following information in the DIY Themes Forum.

Background
Serge explains that Shareaholic buttons are added via the_content filter (inside div.post_content) and has the option to be added above and/or below the post content. It works fine when your post image is full width above the content, but if it set to float, left or right allowing the text to wrap, the share buttons clear the float and prevent text from wrapping around the image.

Solution:

  1. When logged into your WordPress dashboard, go to the Shareaholic App Manager and uncheck all “Above Content” in the Share Buttons section. Make sure to save before continuing further.
  1. Open up your Thesis Skin Editor and do the following:
  • Add a new HTML Container box
  • Open box settings.
  • Name the box Top Shareaholic Buttons (You can name this box anything you want, but this is my suggestion).
  • Make sure to the HTML tag is set to div.
  • Give it a class top-share-buttons-container (Important! Make sure you use this as your class or the code won’t work.)
  • In the box, click the Admin tab.
  • For the Hook Name, enter top_share_buttons (Important! Make sure you use this as your Hook Name or the code won’t work.)
  • Save the box.
  • Add the box to the template(s) where you want the share buttons above the content.
  • Save the template(s).
  1. Add the following PHP code to the php file (usually located in your thesis folder on the server where you website is located /wp-content/thesis).

*PHP Code:

[php]
// Add Shareaholic buttons to Top Share Buttons box
function custom_shareaholic_top_share_buttons() {
    $page_type = ShareaholicUtilities::page_type();
    $settings = ( !empty( $GLOBALS['user_shareaholic_settings'] ) && is_array( $GLOBALS['user_shareaholic_settings'] ) ) ?  $GLOBALS['user_shareaholic_settings'] : ShareaholicUtilities::get_settings();
    if( !isset( $GLOBALS['user_shareaholic_settings'] ) ) {
    $GLOBALS['user_shareaholic_settings'] = $settings;
 }
    $id = ( !empty( $settings['location_name_ids']['share_buttons']["{$page_type}_above_content"] ) ) ? $settings['location_name_ids']['share_buttons']["{$page_type}_above_content"] : null;
    echo ( !empty( $settings['share_buttons']["{$page_type}_above_content"] ) && ( 'on' === $settings['share_buttons']["{$page_type}_above_content"] ) ) ? ShareaholicPublic::canvas( $id, 'share_buttons' ) : '';
    unset( $settings['share_buttons']["{$page_type}_above_content"] );
    $GLOBALS['overwrite_shareaholic_settings'] = $settings;
    $hook = ( false !== has_filter( 'pre_option_shareaholic_settings', 'custom_overwrite_user_shareaholic_settings' ) ) ? true : add_filter( 'pre_option_shareaholic_settings', 'custom_overwrite_user_shareaholic_settings' , 90, 1 );
}

add_action( 'hook_top_top_share_buttons', 'custom_shareaholic_top_share_buttons' );

function custom_overwrite_user_shareaholic_settings( $settings ) {
    return ( !empty( $GLOBALS['overwrite_shareaholic_settings'] ) && is_array( $GLOBALS['overwrite_shareaholic_settings'] ) ) ?  $GLOBALS['overwrite_shareaholic_settings'] : $settings;
} [/php]
  1. Save the PHP file and send it back over to your server.
  2. Go back to Shareaholic App Manager and check ABOVE CONTENT to the posts/pages of your choice. Don’t forget to save.
  3. You’re done! Now, refresh your page or post where the buttons should be ABOVE the featured image and review the changes.

*Just a little advice, writing PHP code may seem daunting. Always save a copy of the original file separately on your computer. If you make a mistake in the code and your site breaks, you’ll have the backup copy to put back on your server.

0 Comments… add one

Leave a Comment