Question

I have a pretty basic ‘featured-list – image slider’ implemented above my content in my custom WordPress theme. I’m wondering how I could hardcode the PHP in between to connect my slider with my ‘theme’. I’m trying to ‘theme‘ the slider so that the content is pulled via ‘Recent-Posts’ or via a ‘Category’. And how I could set the ‘Featured Imgs’ to display as the photo within the slider and to display in my alotted thumbnail sections in list area?

Here’s a screenshot of the jQuery I plugin I picked this up on;

(Their demo is broke, so.)

Below is the markup I have implemented.

  <div id="featured" >  
    <ul class="ui-tabs-nav">  
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>David King – on his True Crime thriller</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>Tips from Steve Perry</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Tips from Chuck Berry</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>SFIRS</span></a></li>  
     </ul>  




    <!-- First Content -->  
    <div id="fragment-1" class="ui-tabs-panel" style="">  
        <img src="images/image1.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >David King – on his True Crime thriller</a></h2>  
        <p>David King is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Second Content -->  
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image2.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Tips from Steve Perry</a></h2>  
        <p>Steve Perry is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Third Content -->  
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image3.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Tips from Chuck Berry</a></h2>  
        <p>Chuck Berry is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Fourth Content -->  
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image4.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>  
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>  
        </div>  
    </div>  
</div>  

Updated Q here, with up to date attempt, still not solved

LATEST UPDATE: Still trying to get images to pull in. I’ve tried Suni’s suggestions but still can’t get them to pull in within the slider (They end up populating outside of)

Some I’ve tried below:

<?php
$i = 1;
foreach ($posts_array as $post) :  setup_postdata($post); 
<?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; the_post_thumbnail('thumbnail'); echo '</a>'; } ?>
?> 


<?php
$i = 1;
foreach ($posts_array as $post) :  setup_postdata($post); 
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');    
?> 


 <?php
    $i = 1;
    foreach ($posts_array as $post) :  setup_postdata($post); 
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); <a  href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >  
?> 

    <?php
        $i = 1;
        foreach ($posts_array as $post) :  setup_postdata($post); ?> 

<?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; the_post_thumbnail('thumbnail'); echo '</a>'; } ?>

Answer 1

Hi, you can user get_posts to fetch posts.

Below is the code .. Not Tested ..

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme'

 */

//get_header(); ?>        
<div id="content"> 

<?php if (have_posts()) : ?>

<!--Your slider code goes here-->

<?php 
$args = array(
              'numberposts'     => 5,
              'orderby'         => 'post_date',
              'order'           => 'DESC'
);
$posts_array = get_posts( $args ); 
?>       

<div id="featured" >  
<ul class="ui-tabs-nav">

<?php
$i = 1;
foreach ($posts_array as $post) :  setup_postdata($post); 
?> 

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php echo $i; ?>">
  <a href="#fragment-1"><img src="" alt="" style="display:none;"/>
    <span>
      <?php the_title(); ?><br />
      <p class="info" style="padding-left:10px;"><?php the_excerpt(); ?></p>
    </span>
  </a>
</li> 
<?php $i++; 
endforeach; ?>
</ul>
<?php
$i = 1;
foreach ($posts_array as $post) :  setup_postdata($post); 
?>

<!-- First Content -->  
<div id="fragment-<?php echo $i; ?>" class="ui-tabs-panel" style="">
  <img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />  
  <div class="info">
    <h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
    <p><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>" >read more</a></p>  
  </div>  
</div>  
<?php $i++; endforeach; ?>


</div>  

<!--Your slider code goes here-->
<!-- End Featured Lists Image Slider -->        

<?php endif; ?>