'Themeing' my Slider in WP with PHP

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

Answer 2

This is how I would do it.

You'll need essentially two loops over the posts you want to use - one to create the tabs, one to create the content. To avoid doing two DB queries, cache the posts from one query in an array and use a foreach loop over that array.

Use a custom query to get the post objects which you want to use in your slider: http://codex.wordpress.org/Class_Reference/WP_Query

Disclaimer: This will not work verbatim, but should give you the framework required

<?php

$post_data = array();

// Use a custom query to get the posts you want for your slider
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();

    $post_data[] = $post;

endwhile;

// Reset Post Data
wp_reset_postdata();

?>

<div id="featured" >

    <ul class="ui-tabs-nav">  

    <?php 
    foreach($post_data as $key => $post){

      // Out put the markup + data from the $post object that you need for your tabs

    } 
    ?>

    </ul>

    <?php 
    foreach($post_data as $key => $post){

      // Out put the markup + data from the $post object that you need for your slider fragments

    } 
    ?>

</div>