Docs

[dscuba]

Hi Team X,

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

[Rad]

Hi there,

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!

[dscuba]

I removed the code from the wp-single file and added your new code in the Appearance < Editor section for X-Child and selected the Functions.PHP section. I pasted your code, updated, refreshed and got this error message:

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

[dscuba]

If I need to do this in my c-panel, I need to know where the file is, where to copy it and please dumb it down.

Thanks

[Kosher K]

Hi There,

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

[dscuba]

Ok, I found the functions.php file in my child theme. I added your code, updated, refreshed, and still got the same error 500 message, so i deleted it.

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;
}

}

[Paul R]

Hi,

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

[dscuba]

This reply has been marked as private.

[dscuba]

Also, I wanted these buttons to go ABOVE the Comments section on my Post page which is a FB Plugin.

Thanks

[Nabeel A]

Hi there,

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!

[dscuba]

This reply has been marked as private.

[Paul R]

Hi,

Please replace the code above with this.

add_action ('the_content', 'add_button_navigation' );

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 = '<div class="custom-nav"><a class="x-previous" href="'.get_previous_posts_link().'">Previous Story</a>  <a class="x-next" href="'.get_next_posts_link().'">Next Story</a> </div> '.$facebook_share;
    if( is_singular('post') ) {
        $content .= $my_custom_text;
    }
    return $content;
}

You can then add this under Custom > CSS in the Customizer.

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

.x-fb {
   margin-top:13px; 
   clear:both;
   width:100%;
   display:block;
}

.custom-nav {
   display:block;
   clear:both;
overflow:hidden;
}

.x-previous, 
.x-next {
   width:49%;
}

.x-previous {
   float:left;
}

.x-next {
   float:right;
}

Hope that helps

[dscuba]

This reply has been marked as private.

[Zeshan]

Hi there,

#1 & #4: Please use following code:

add_action ('the_content', 'add_button_navigation' );

function add_button_navigation ( $content ) {
    $prev_post = get_adjacent_post( false, '', false );
    $next_post = get_adjacent_post( false, '', true );

    $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;\"><i class\"x-icon-facebook\"></i> Share This Story on Facebook</a>";
    $my_custom_text = '<div class="custom-nav"><a class="x-previous" href="'.$prev_post.'">Previous Story</a>  <a class="x-next" href="'.$next_post.'">Next Story</a> </div> '.$facebook_share;
    if( is_singular('post') ) {
        $content .= $my_custom_text;
    }
    return $content;
}

#2: If you have added a code for facebook comments box, please add the above given code above it, and the buttons should appear before the comment box.

#3 & #5: Add following CSS code under Custom > CSS in the Customizer:

.x-fb, .x-previous, .x-next {
    color: #fff !important;
    border-radius: 10px;
}

.x-fb:hover, .x-previous:hover, .x-next:hover {
    color: #ddd !important;
}

Cheers!

[dscuba]

This reply has been marked as private.

[Author]

Posts