Displaying Featured Stories in Custom Format using GK NSP

analystguy

I am trying to display three featured stories each having two supported story links on the homepage of my GkNews1_13 wordpress theme. The effect I am looking to replicate is shown in www.aboutlawsuits.com.

Looking at the elements of this page in Chrome I’ve replicated the CSS in override.css but I am at a loss as to how I can use widget_gk_nsp to display the data in the gk-mainbody section of my page.

Online discussions regarding the GK NSP Widget are specific to Joomla and I run Wordpress. Does GkNews1_13 include the most up to date GK NSP widget? (I purchased the theme in 2020).

I am trying to determine how to proceed.

Question I have are –

Is this a sophisticated fancy use of the gk nsp widget, another widget/plugin or is it php code in a new page template of functions.php.

If anyone more familiar with gk nsp and this theme I would greatly appreciate any help you may offer.

Thanks

Link to the effect I am trying to create
https://ibb.co/VCDMZYY
or see www.aboutlawsuits.com

The page.php shows the following code in the mainbody section

	<?php the_post(); ?>

	<?php get_template_part( 'content', 'page' ); ?>
	
	<?php if(get_option($tpl->name . '_pages_show_comments_on_pages', 'Y') == 'Y') : ?>
	<?php comments_template( '', true ); ?>
	<?php endif; ?>
</div>

<?php gk_load('inner_inset'); ?>

</section>

The following is the section html that chrome shows for the www.aboutlawsuits.com home page.

<section id="gk-mainbody" style="font-size: 100%;">
<div id="home-featured-three" class="box header all widget_gk_nsp">
<h5 class="box-title">Top Stories:</h5>
<div class="gk-nsp mobile_layout activated" data-cols="1" data-rows="1" data-links="5" data-autoanim="off" data-autoanimint="5000" data-autoanimhover="on">
<div id="home-featured-left" class="gk-nsp-arts">
<div class="gk-nsp-arts-scroll gk-nsp-pages-1">
<div class="gk-nsp-arts-page gk-nsp-cols-1">
<div class="gk-nsp-art gk-nsp-cols-1" style="padding: 0 12px 0 0;">
<div class="home-featured-first">
<a href="https://www.aboutlawsuits.com/ventralight-mesh-motion-in-limine-177629/" rel="bookmark" title="Bard Ventralight ST Trial in January Likely To Signal Outcomes In Thousands of Similar Hernia Mesh Lawsuits"><h3>Bard Ventralight ST Trial in January Likely To Signal Outcomes In Thousands of Similar Hernia Mesh Lawsuits</h3>
<div id="home-left-image"><img width="400" height="266" src="https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/gavelcloseup_ss_148390601-400x266.jpg" class="gk-responsive wp-post-image" alt="" loading="lazy" srcset="https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/gavelcloseup_ss_148390601-400x266.jpg 400w, https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/gavelcloseup_ss_148390601.jpg 1000w" sizes="(max-width: 400px) 100vw, 400px"></div>
</a>
<p class="meta">(Posted 2 days ago)</p> <p>Following motions in limine, the first Bard Ventralight hernia mesh trial is scheduled to begin in January.…</p>
</div>
<div class="sub-stories">
<p class="sub-topic">▸ More About: <a href="https://www.aboutlawsuits.com/hernia-mesh-1364/">Hernia Mesh Lawsuits</a></p>
<ul>
<li><a href="https://www.aboutlawsuits.com/15k-mesh-claims-177189/" rel="bookmark" title="Permanent Link to Nearly 15,000 Hernia Mesh Claims Filed Against Bard, Ethicon and Atrium in Federal Courts">Nearly 15,000 Hernia Mesh Claims Filed Against Bard, Ethicon and Atrium in Federal Courts</a> <span class="top-stories-meta">(10/22/2020)</span></li>
<li><a href="https://www.aboutlawsuits.com/physiomesh-bellwether-trial-175908/" rel="bookmark" title="Permanent Link to Ethicon Hernia Mesh Case Selected For First Bellwether Trial in Physiomesh MDL">Ethicon Hernia Mesh Case Selected For First Bellwether Trial in Physiomesh MDL</a> <span class="top-stories-meta">(9/16/2020)</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>

	<div id="home-featured-right" class="gk-nsp-links">
		<div>
			<ul class="gk-nsp-list gk-nsp-cols-1">
				<li class="home-featured-second">
				<a href="https://www.aboutlawsuits.com/zantac-cancer-cases-diagnosed-177525/" rel="bookmark" title="Zantac Cancer Cases Continue To Be Diagnosed Over A Year After Drug Recall">
					<img width="100" height="100" src="https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/zantac-pills-100x100.jpg" class="alignleft wp-post-image" alt="" loading="lazy" srcset="https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/zantac-pills-100x100.jpg 100w, https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/zantac-pills-440x440.jpg 440w" sizes="(max-width: 100px) 100vw, 100px">											
					<h4 class="gk-nsp-link-header">Zantac Cancer Cases Continue To Be Diagnosed Over A Year After Drug Recall</h4>	
				</a>
					<p class="meta">(Posted 3 days ago)</p>		                         <div style="clear:both;"></div>
				<div class="sub-stories">
                          		                              <p class="sub-topic">▸ More About: <a href="https://www.aboutlawsuits.com/zantac/">Zantac Cancer Lawsuits</a></p>
                                               		                             <ul>
                          	                                             <li><a href="https://www.aboutlawsuits.com/zantac-court-census-177328/" rel="bookmark" title="Permanent Link to Court Outlines Access to Census Data On Lawsuits Over Zantac and Cancers Caused by Heartburn Drug">Court Outlines Access to Census Data On Lawsuits Over Zantac and Cancers Caused by Heartburn Drug</a> <span class="top-stories-meta">(10/29/2020)</span></li>
                                                   	                                             <li><a href="https://www.aboutlawsuits.com/zantac-bladder-cancer-lawsuit-4-176859/" rel="bookmark" title="Permanent Link to Zantac Use Led To Multiple Surgeries In Fight Against Bladder Cancer, Lawsuit Claims">Zantac Use Led To Multiple Surgeries In Fight Against Bladder Cancer, Lawsuit Claims</a> <span class="top-stories-meta">(10/19/2020)</span></li>
                                                      		                           </ul>
	                         </div><!-- .sub-stories -->



				</li>
 						
				<li class="home-featured-third">
				<a href="https://www.aboutlawsuits.com/talc-verdict-appeal-rejected-177609/" rel="bookmark" title="Johnson &amp; Johnson Sets Aside $2.1B To Cover Talcum Powder Verdict, As Appeal Options Narrow">
				   <img width="100" height="100" src="https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/talcum-baby-powder_ss_700136416-100x100.jpg" class="alignleft wp-post-image" alt="" loading="lazy" srcset="https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/talcum-baby-powder_ss_700136416-100x100.jpg 100w, https://aboutlawsuits-wpengine.netdna-ssl.com/wp-content/uploads/talcum-baby-powder_ss_700136416-440x440.jpg 440w" sizes="(max-width: 100px) 100vw, 100px">					
				   <h4 class="gk-nsp-link-header">Johnson &amp; Johnson Sets Aside $2.1B To Cover Talcum Powder Verdict, As Appeal Options Narrow</h4>
				</a>
				   <p class="meta">(Posted 4 days ago)</p>					<div style="clear:both;"></div>
				<div class="sub-stories">
                          		                              <p class="sub-topic">▸ More About: <a href="https://www.aboutlawsuits.com/talcum-powder/">Talcum Powder Lawsuits</a></p>
                                               		                             <ul>
                          	                                             <li><a href="https://www.aboutlawsuits.com/talc-bellwether-discovery-177526/" rel="bookmark" title="Permanent Link to Discovery for Talc Powder Bellwether Trials Continuing in Federal Litigation">Discovery for Talc Powder Bellwether Trials Continuing in Federal Litigation</a> <span class="top-stories-meta">(11/2/2020)</span></li>
                                                   	                                             <li><a href="https://www.aboutlawsuits.com/cancer-settlements-johnsons-baby-powder-lawsuits-176574/" rel="bookmark" title="Permanent Link to Cancer Settlements Reached to Resolve About 1,000 Johnson’s Baby Powder Lawsuits: Report">Cancer Settlements Reached to Resolve About 1,000 Johnson’s Baby Powder Lawsuits: Report</a> <span class="top-stories-meta">(10/6/2020)</span></li>
                                                      		                           </ul>
	                         </div><!-- .sub-stories -->
				</li>
			</ul>
		</div>
	</div><!-- #home-featured-right -->
 	
</div>

</div>
</section>

dominic

Hi analystguy,
I have checked and see that the widget does not support to show the post as the layout that you mentioned here. Also. you can find a third party plugin here: https://wordpress.org/plugins/

analystguy

dominic

Hi Dominic:

I think the related posts are usig the YARPP plugin. The question is how to show the posts within each div. This must be a layout plugin. I will look at the ones you link to.

Thanks for the reply. You are a great help.

dominic

Hi analystguy,
Please let me know detail about this question.
I have checked the plugin, if you want to show the related post in the theme, you can let me know the position that you want to show it. I see that this plugin has supported the shortcode, you can use the shortcode to show the related post.

analystguy

Domenic.
A picture of the actual post layout is
https://ibb.co/HB2mwp7

From what I see using Firefox inspector, the content is encapsulated in Divs. The left side column is a single post enclosed in a div with a sub div containing a list of associated posts. I believe YARPP is used to create the sub stories.

The right side column is encapsulated in a div and contains the second and third featured posts. Both posts are contained in an unspecified list with each post being within a specific list element and <a> tag. as shown in this diagram.
https://ibb.co/PN2k28F

My thought is that to replicate this, I will need to write some php code in my template file. But I would like to utilize widgets in select the articles to display. Any ideas? I don't expect you to do this, I hope that you are experienced enough to tell me what I need to do next or how to proceed.

Thanks,

dominic

Hi analystguy,
In this case, if you want to create a widget to support select articles, you can refer the following code, this is a demo widget for select posts.
URL: http://snippi.com/s/4lgeops
Hope this help

analystguy

I created a template that works in case anyone else is interested.
Only issue at this stage is that the <?php the_date() ?> for the second featured post doesn't display for some reason.

<?php

/

Template Name: Page Home

/

global $tpl;

gk_load('header');
gk_load('before-child');
?>

<?php
// the query
$the_query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 3,
'post__in' => get_option('sticky_posts'),
'orderby' => 'date',
'ignore_sticky_posts' => 1
));

?>
<?php $counter = 1; ?>

<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
if ($counter == 1) { ?>
<section id="gk-mainbody" style= "font-size: 100%;">
<div id="home-featured-three" class="box header all widget_gk_nsp">
<h5 class="box-title">Top Stories:</h5>
<div class="gk-nsp mobile_layout activated" data-cols="1" data-rows="1" data-links="5" data-autoanim="off" data-autoanimint="5000" data-autoanimhover="on">
<div id="home-featured-left" class="gk-nsp-arts">
<div class="gk-nsp-arts-scroll gk-nsp-pages-1">
<div class="gk-nsp-arts-page gk-nsp-cols-1">
<div class="gk-nsp-art gk-nsp-cols-1" style="padding: 0 12px 0 0;">
<div class="home-featured-first">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<h3>
<?php the_title();?>
</h3>

									<div id="home-left-image">
	      								<?php the_post_thumbnail(); ?>
	      							</div>
	      						</a>
	      						<p class="meta"><?php the_date(); ?> </p>
	      						<p><?php the_excerpt(); ?>
	      						</p>
	      					</div> <!-- home-featured-first-->	
	      					<div class="sub-stories">
	      							
            						<p class="sub-topic">
	      								More About: 
	      								<a href="<?php echo get_permalink( $post->post_parent ); ?>" >
    										<strong><?php echo get_the_title( $post->post_parent ); ?></strong>
 										</a>
									</p>
	      						 	<?php if ( function_exists( 'echo_crp' ) ) { echo_crp(); } ?>
	      					</div> <!--sub stories-->
	      				</div> <!--gk-nsp-art dk-nsp-cols-1-->	
	      			</div>
	      		</div>
	      		
	      		</div> <!--home-featured-left-->	

<?php } ?>		      					
 
<?php if ($counter == 2)  { ?>
	<div id="home-featured-right" class="gk-nsp-links">
				<div>
					<ul class="gk-nsp-list gk-nsp-cols-1">
						<li class="home-featured-second">
							
							<a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>">	
							<img class="alignleft wp-post-image" <?php the_post_thumbnail('widgetthumb'); ?>
							<h4 class="gk-nsp-link-header"> <?php the_title(); ?> </h4>
							</a>
							
							<p class="meta"><?php the_date();?></p>
							
							<div style ="clear:both;"></div>
							

							<div class="sub-stories">
								
								<p class="sub-topic">
									More About:
									<a href="<?php echo get_permalink( $post->post_parent ); ?>" >
    								<strong><?php echo get_the_title( $post->post_parent ); ?></strong>
 									</a>
								</p>
								<?php if ( function_exists( 'echo_crp' ) ) { echo_crp(); } ?>
							</div> <!--sub stories-->
								
						</li> <!--home-featured-second -->
<?php } ?>

<?php 
if ($counter == 3) { ?> 
						<li class="home-featured-third">
							 
							<a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>">	
							<img class="alignleft wp-post-image" <?php the_post_thumbnail('widgetthumb'); ?>
							<h4 class="gk-nsp-link-header"> <?php the_title(); ?>   </h4>
							</a>
							<p class="meta"><?php the_date();?></p>
							
							<div style ="clear:both;"></div>	
							
							<div class="sub-stories">
								
								<p class="sub-topic">
									More About:
									<a href="<?php echo get_permalink( $post->post_parent ); ?>" >
    								<strong><?php echo get_the_title( $post->post_parent ); ?></strong>
 									</a>
								</p>
								<?php if ( function_exists( 'echo_crp' ) ) { echo_crp(); } ?>
								
							</div> <!--sub stories-->
								
						</li>
					
					</ul>
				</div>
				
			</div> <!--home-featured-right -->
		</div>
		
	</div> <!-- home-featured-three -->

<?php } ?>

<?php ++$counter; ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>

<?php else : ?>
<p><?php __('No News'); ?></p>
<?php endif; ?>

<?php gk_load('inner_inset'); ?>

</section>

<?php
gk_load('after-child');
gk_load('footer');

// EOF

dominic

Hi analystguy,
If you want to show the Date in the meta tag, you can use the following code:
<?php echo esc_html(get_the_date()); ?>

analystguy

dominic

Thanks Dominic
That did the trick!