I need to add three large buttons to my Post template under the post content, but above the Facebook Comment box. Can you please share how this is done? I have the child theme for Ethos already set-up and have copied two files into the child theme. (wp-single.php and header.php)

The buttons will read “Previous Story”, “Next Story”, and “Share This Story on Facebook”
The functionality would redirect to the previous AND next story AND the other would open up the FB dialogue box so the user can share.

Thank you for your great support

Espressoulcafe.com

Thanks for posting in.

I just saw your other post where you insert share shortcode. Instead of doing that, you can just add this code at your child theme’s functions.php to ensure that they will go before comment section.

add_filter ('the_content', 'add_social_share', 0 );

function add_social_share ( $content ) {

if( is_singular('post') ) {
return $content.'[share title="Social" facebook="true"]';
}

}

add_action ('the_content', 'add_button_navigation', 0 );

function add_button_navigation ( $content ) {

if( is_singular('post') ) {
previous_post_link( '<strong>Previous Story</strong>' );
echo '|';
next_post_link( '<strong>Next Story</strong>' );
return $content;
}

}

Cheers!

500 Server Error

A misconfiguration on the server caused a hiccup. Check the server logs, fix the problem, then try again.
URL: http://www.espressoulcafe.com/gentle-dog-loves-boy/

I went in a deleted this code. Can you recheck the code or did I add this new code in the wrong place?

Thanks

Thanks

You need to add this code in your child funcitons.php

If you are editing a file using FTP or on your cpanel, it should be in wp-content/themes/x-child-ethos/functions.php

hope that helps,

Have a great day

This is what was updated at this file directory in my cpanel – wp-content/themes/x-child-ethos/functions.php

<?php

// =============================================================================
// FUNCTIONS.PHP
// —————————————————————————–
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

add_filter (‘the_content’, ‘add_social_share’, 0 );

function add_social_share ( $content ) {

if( is_singular(‘post’) ) {
return $content.'[share title=”Social” facebook=”true”]’;
}

}

add_action (‘the_content’, ‘add_button_navigation’, 0 );

function add_button_navigation ( $content ) {

if( is_singular(‘post’) ) {
previous_post_link( ‘Previous Story‘ );
echo ‘|’;
next_post_link( ‘Next Story‘ );
return $content;
}

}

Sorry for the confusion there.

You can try this code instead.

add_action ('the_content', 'add_button_navigation' );

function add_button_navigation ( $content ) {
    $facebook_share = "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Facebook', '__x__' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u=".urlencode( get_permalink() )."&t=Share This Story on Facebook ', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\">Share This Story on Facebook</a>";
    $my_custom_text = '<a href="'.get_previous_posts_link().'">Previous Story</a> | <a href="'.get_next_posts_link().'">Next Story</a> | '.$facebook_share;
    if( is_singular('post') ) {
        $content .= $my_custom_text;
    }
    return $content;
}

Please put this code in the child theme’s functions.php

Thanks

Thanks

You can add some custom CSS to convert the links into buttons. You’ll need to replace the previous code first with this one in your child theme’s function.php file.

function add_button_navigation ( $content ) {
    $facebook_share = "<a class='x-fb' href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Facebook', '__x__' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u=".urlencode( get_permalink() )."&t=Share This Story on Facebook ', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\">Share This Story on Facebook</a>";
    $my_custom_text = '<a class="x-previous" href="'.get_previous_posts_link().'">Previous Story</a> | <a class="x-next" href="'.get_next_posts_link().'">Next Story</a> | '.$facebook_share;
    if( is_singular('post') ) {
        $content .= $my_custom_text;
    }
    return $content;
}

Then via Appearance > Customize > Custom > CSS add the following code:

.x-fb, .x-previous, .x-next {
padding: 15px;
border: 1px solid #eaeaea;
background-color: #eae;
}

You can change the background color of individual button by using their class if needed.

Let us know how this goes!