customise Jet pack related articles to my own design in wordpress

Question

I need to customise default design of related articles from jet pack in wordpress to my custom design i am unable to find the error where it was wrong in my code. I had written a hook in functions.php file.

This is my hook in functions.php

function jetpackme_custom_related() {
$posts = '<div class="single-article-popularGi">';
$posts .= '<h1>related</h1><div class="row">';

if ( class_exists( 'Jetpack_RelatedPosts' ) && method_exists( 'Jetpack_RelatedPosts', 'init_raw' ) ) {
    $related = Jetpack_RelatedPosts::init_raw()
        ->get_for_post_id(
            get_the_ID(),
            array( 'size' => 2 )
        );

    if ( $related ) {
        foreach ( $related as $result ) {
            // Get the related post IDs
           $title = get_the_title( $result[ 'id' ] );
           $link = get_permalink( $result[ 'id' ] );
           $image = featuredOrFirstImage($result[ 'id' ], 'blog-post-image');
           $category_name = get_the_category( $result[ 'id' ] );


           $posts .= '<div class="col-sm-3 col-3"><span class="thumbnail-image"><a href="'.$link.'">'.$image.'</a></span></div>';
           $posts .= '<div class="post-details col-sm-3 col-3 align-self-center"><div class="entry-cat post-category">'.$category_name.'</div>';
           $posts .= '<div class="mostPopularTitle"><h2 class="entry-title"><a class="post-title" href="%s" rel="bookmark">'.$title.'</a></h2>';

           $posts .= '<div class="readArticle"><a class="readMorePost" href="'.$link.'">MORE GI></a>';
        }
    }
}

$posts .= '</div>';
$posts .= '</div>';

// Return a list of post titles separated by commas
if( $related ){ 
   return $posts;
}else{
  return false;
}
}
add_action('admin_init', 'jetpackme_custom_related');

I had called it in single.php like this

<?php echo $related = jetpackme_custom_related();?>

But there is nothing displayed and getting error some times which is not displaying nothing. Can anyone Please let me solve it out..

Answer 1

I had changed the way of procedure and it works for me.My code is

$related_posts = array();
$query = array();
$query['showposts'] = 2;// Number of posts to show
if ( class_exists( 'Jetpack_RelatedPosts' ) && method_exists( 'Jetpack_RelatedPosts', 'init_raw' ) ) :
    $related = Jetpack_RelatedPosts::init_raw()
     ->set_query_name( 'theme-custom' ) // optional, name can be anything
     ->get_for_post_id( get_the_ID(), array( 'size' => $query['showposts'] )
  );
  if ( $related ) :
     foreach ( $related as $result ) :
        $related_posts[] = $result[ 'id' ];
     endforeach;
  endif;
endif;

if ( $related_posts ) {
  $query['post__in'] = $related_posts;
  $query['orderby'] = 'post__in';
  $title = __( 'Related', 'prefix' );
} else {
  $query['post__not_in'] = array( $post->ID );
  $title = __( 'Related', 'prefix' );
}

I had called the related articles like..

<div class="single-article-popularGi">
  <h1><?php esc_attr_e( $title ); ?></h1>
  <div class="row">  
     <?php $related = new WP_Query( $query ); ?>
        <?php while ( $related->have_posts() ) : $related->the_post(); ?>
           <div class="col-sm-3 col-3">
              <div class="thumbnail-image">
                 <a href="<?php the_permalink();?>"><span class="thumb-wrap"><?php the_post_thumbnail('medium', array("class" => "img-fluid")); ?></span></a>
              </div>
           </div>
           <div class="post-details col-sm-3 col-3 align-self-center">
              <?php if ( has_category() ) : ?>
                 <div class="entry-cat post-category">
                    <?php the_category(' '); ?>
                 </div><!-- end .entry-cats -->
              <?php endif; // has_category() ?>
              <div class="mostPopularTitle">
                 <?php the_title( sprintf( '<h2 class="entry-title"><a class="post-title" href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
              </div>
              <i class="postIntro"><?php echo $intro = wp_trim_words( get_field('intro' ), 20,'...' ); ?></i>
              <div class="readArticle">
                 <a class="readMorePost" href="<?php echo get_permalink(); ?>">MORE GI></a>
              </div>
           </div>
        <?php endwhile; 
     wp_reset_query(); ?>
  </div>