Related posts at bottom of page after all other plugins

Hi there,

I’m trying to change the order of related posts and social sharing on this page:

http://www.budagastropest.com/2019/08/26/ecology/

How can I change them? This is the php I’m using for the social sharing:

function x_add_social_sharing ( $content ) {
if ( is_singular(‘post’) ) {
echo do_shortcode(’[share title=“Share this Post” facebook=“true” twitter=“true” google_plus=“false” linkedin=“false” pinterest=“false” reddit=“false” email=“true”]’);
}
}
add_action(‘x_before_the_content_end’, ‘x_add_social_sharing’);

Question #2

I would like to use these icons for sharing instead:

Found here:

How can I easily change these?

Example page: https://greenkitchenstories.com/our-stockholm/

Thanks!

Hello @Pbalazs89,

Thanks for writing in!

1.) You can change the order by adding a priority number in your code. For example, like this:

function x_add_social_sharing ( $content ) {
	if ( is_singular('post') ) {
		echo do_shortcode('[share title="Share this Post" facebook="true" twitter="true" google_plus="false" linkedin="false" pinterest="false" reddit="false" email="true"]');
	}
}
add_action('x_before_the_content_end', 'x_add_social_sharing', 5);

Notice that I added 5 in this line: add_action('x_before_the_content_end', 'x_add_social_sharing', 5);. In your other code, you can insert 10 so that the social sharing will display first and then the related post items.

2.) The social sharing is using the square icons. If you want to change it, you will have to modify the social sharing code. Assuming that the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Entry Share
// =============================================================================

function custom_shortcode_share( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'title'       => '',
    'share_title' => '',
    'facebook'    => '',
    'twitter'     => '',
    'google_plus' => '',
    'linkedin'    => '',
    'pinterest'   => '',
    'reddit'      => '',
    'email'       => '',
    'email_subject' => ''
  ), $atts, 'x_share' ) );

  $share_url        = urlencode( get_permalink() );

  if ( is_singular() ) {
    $share_url = urlencode( get_permalink() );
  } else {
    global $wp;
    $share_url = urlencode( home_url( ($wp->request) ? $wp->request : '' ) );
  }

  if ( is_singular() ) {
    $share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( get_the_title() );
  } else {
    $share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( apply_filters( 'the_title', get_page( get_option( 'page_for_posts' ) )->post_title) );
  }

  $share_source     = urlencode( get_bloginfo( 'name' ) );
  $share_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
  $share_image      = ( function_exists( 'x_get_featured_image_with_fallback_url' ) ) ? urlencode( x_get_featured_image_with_fallback_url() ) : urlencode( $share_image_info[0] );

  if ( $linkedin === 'true' ) {
    $share_content = urlencode( cs_get_excerpt_for_social() );
  }

  $tooltip_attr = cs_generate_data_attributes_extra( 'tooltip', 'hover', 'bottom' );

  $id          = ( $id          != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class       = ( $class       != ''     ) ? 'x-entry-share ' . esc_attr( $class ) : 'x-entry-share';
  $style       = ( $style       != ''     ) ? 'style="' . $style . '"' : '';
  $title       = ( $title       != ''     ) ? $title : csi18n('shortcodes.share-title');
  $facebook    = ( $facebook    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-facebook') . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&amp;t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook\" " . fa_data_icon('facebook') . "></i></a>" : '';
  $twitter     = ( $twitter     == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-twitter') . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&amp;url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter\" " . fa_data_icon('twitter') . "></i></a>" : '';
  $google_plus = ( $google_plus == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-google-plus') . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus\" " . fa_data_icon('google-plus') . "></i></a>" : '';
  $linkedin    = ( $linkedin    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-linkedin') . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&amp;url={$share_url}&amp;title={$share_title}&amp;summary={$share_content}&amp;source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin\" " . fa_data_icon('linkedin') . "></i></a>" : '';
  $pinterest   = ( $pinterest   == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-pinterest') . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&amp;media={$share_image}&amp;description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest\" " . fa_data_icon('pinterest') . "></i></a>" : '';
  $reddit      = ( $reddit      == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-reddit') . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit\" " . fa_data_icon('reddit') . "></i></a>" : '';


  if ( $email       == 'true' ) {

    $email_subject = esc_attr( ( $email_subject != '' ) ? cs_decode_shortcode_attribute( $email_subject ) : csi18n('shortcodes.share-email-subject') );
    $mail_to_subject = esc_attr( $share_title );
    $mail_to_url = esc_url( get_permalink() );

    $mail_to = "mailto:?subject=$mail_to_subject&amp;body=$email_subject $mail_to_url";

    $email = "<a href=\"{$mail_to}\" {$tooltip_attr} class=\"x-share email\" title=\"" . csi18n('shortcodes.share-email') . "\"><span><i class=\"x-icon-envelope\" " . fa_data_icon('envelope') . "></i></span></a>";

  } else {
    $email = '';
  }



  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . '<p>' . $title . '</p>'
            . '<div class="x-share-options">'
              . $facebook . $twitter . $google_plus . $linkedin . $pinterest . $reddit . $email
            . '</div>'
          . '</div>';

  return $output;
}

function update_x_share_shortcode() {
  remove_shortcode( 'x_share' );
  add_shortcode( 'x_share', 'custom_shortcode_share' );
}
add_action('wp_head', 'update_x_share_shortcode');
// =============================================================================

We would love to know if this has worked for you. Thank you.

March 2021 Update: The above code example has been adjusted to account for a change to a function name.

Hi there,

Thanks for the tips!

  1. Is there perhaps another hook I could add it to that loads before the related posts plugin? Thing is that is a separate plugin from the plugin, so I can’t seem to find a way to make it load later than the social sharing one, regardless of what I put as a priority.

  2. I tried adding the code to functions.php, but it does not seem to work. This is the area where I should be updating the classes correct?

I tried updating fa_data_icon and x-icon-facebook but neither of them changes the look of the front-end. Any idea what I’m doing wrong?

Hey @Pbalazs89,

  1. Please contact the plugin developer of the Recent Posts to know what hook they’re using then use the same. Regretfully, helping further with this would mean that we will spend custom development time and that is beyond the scope of our product support.

  2. To change the icon, you need to change the data-x-icon-b attribute value. Please watch the demo in the video below to learn how to use the output an icon using HTML.

You will be able to utilize Font Awesome effectively in our themes and builders if you watch the videos in the playlist below.

Hope that helps.

Thanks a bunch! I’ll do that.

  1. Changing order of Related Posts / Share Items

I managed to fix 1 by turning off automatic placement of related posts, and opening functions.php and addig related posts before the sharing code!

  1. Changing FontAwesome Icons

Unfortunately I don’t think this code works, I might be in the wrong, but I tried changing every instance of the code and the logos won’t update, have a look:

$facebook    = ( $facebook    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-envelope') . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&amp;t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-envelope\" " . fa_data_icon('envelope') . "></i></a>" : '';

$twitter = ( $twitter == ‘true’ ) ? “<a href=”#share" {$tooltip_attr} class=“x-share” title="" . csi18n(‘shortcodes.share-envelope’) . “” onclick=“window.open(‘https://twitter.com/intent/tweet?text={$share_title}&url={$share_url}’, ‘popupTwitter’, ‘width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0’); return false;”><i class=“x-icon-envelope” " . fa_data_icon(‘envelope’) . “>” : ‘’;

if ( $email == ‘true’ ) {

$email_subject = esc_attr( ( $email_subject != '' ) ? cs_decode_shortcode_attribute( $email_subject ) : csi18n('shortcodes.share-email-subject') );
$mail_to_subject = esc_attr( $share_title );
$mail_to_url = esc_url( get_permalink() );

$mail_to = "mailto:?subject=$mail_to_subject&amp;body=$email_subject $mail_to_url";

$email = "<a href=\"{$mail_to}\" {$tooltip_attr} class=\"x-share email\" title=\"" . csi18n('shortcodes.share-test') . "\"><span><i class=\"x-icon-test\" " . fa_data_icon('envelope') . "></i></span></a>";

I tried changing everything to “test” or “envelope” to see if the code updates, but there’s no change on the frontend. I have used font awesome before, and if I were able to change a logo to something random, than I would know what to do. What am I doing wrong?

  1. Translation

I need to translate some strings in the comment section to Russian. How would you achieve doing that?

Namely these: https://www.dropbox.com/s/kh65nbnl7arumre/Screenshot%202019-09-03%2009.07.40.png?dl=0

Thanks a bunch!

Hey @Pbalazs89,

  1. We’re glad that you have figured out how your third-party related plugin works.
  2. Ok I see the code provided by Ruenel doesn’t work. Please remove it. I’d recommend making a copy of the Share shortcode instead of overriding it so replace this block of code in the given code:
function update_x_share_shortcode() {
  remove_shortcode( 'x_share' );
  add_shortcode( 'x_share', 'custom_shortcode_share' );
}
add_action('wp_head', 'update_x_share_shortcode');

to this:

add_shortcode( 'custom_share', 'custom_shortcode_share' );

You’ll then need to use this shortcode:

[custom_share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"]

instead of

[share title="Share this Post" facebook="true" twitter="true" google_plus="false" linkedin="false" pinterest="false" reddit="false" email="true"]

Then to replace the icon, change this:

" . fa_data_icon('facebook') . "

to this:

data-x-icon-b=\"&#xf39e\"

That’s for Facebook. Do the same for the rest of the icons. I’ve already posted the tutorials about Font Awesome usage in our themes.

I’ve personally tested that and it works. It will also work for you if followed correctly.

If that does not work for you, please hire a third-party web developer as this is veering into further custom development.

Regarding the translation, please follow are translation guide at https://theme.co/apex/forum/t/setup-translation/61. To give you more context, also read this thread: https://theme.co/apex/forum/t/translating-comment-form/62308/7

If you still have more questions, please open each in a separate thread as it’s hard to manage multiple topics in a thread and that results in longer response times which is not good for you, our customers and the support staff.

Hope that helps and thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.