Jquery Featured Post Slideshow

Steps

  1. use wp_enqueue_script to load the Jquery that is packaged with WordPress.
  2. go over how Jquery Cycle works and make The Loop generate the necessary XHTML
  3. make a custom query to load only the posts we want
  4. configure Jquery Cycle to run the slideshow

Download preview

1. Enqueue Jquery

The first thing you want to do is to get Jquery to load WordPress comes with a version of Jquery included so its generally best to load that> The function to load javascript libraries and plugins is wp_enqueue-script. The code to load the jQuery and the jQuery Cycle plugin is below

<?php wp_enqueue_script('jquery.cycle.all.min','/wp-content/themes/upsidedowncity_v_3/jquery.cycle.all.min.js',array('jquery')); ?>
<?php wp_enqueue_script('jquery_script','/wp-content/themes/upsidedowncity_v_3/jquery_script.js'); ?>
<?php wp_head(); ?>


Place this code right above the “wp_head();” line your header.php file.
 Write the css code for featured post sideshow.


/*Featured Post Slide Show @asokkumar.t@gmail.com*/
#featured_posts{
width:960px;
margin-left:-10px;
height:140px;
}

#featured_posts h3{
font-size:12px;
width:255px;
}

#featured_posts ul{

}

#featured_posts ul li{
float:left;
margin:0 9px 0;
}

.slide_cont{
width:835px;
clear:none;
float:left;
margin:0 17px;
}

.slide_cont ul li h3 a, .slide_cont ul li h3 a:hover{
color:#fff;
}

.prev{
display:block;
width:35px;
height:75px;
background: url('images/left_arrow.png') no-repeat center;
cursor:pointer;
float:left;
margin:35px 0 0 10px;
}

.next{
display:block;
width:35px;
height:75px;
background: url('images/right_arrow.png') no-repeat center;
cursor:pointer;
float:right;
margin:35px 10px 0 0;
}

h1, h2, h3, h4, h5, h6{
color:#fff;
background:#000;
font-family:"courier new",courier;
padding:3px 0 3px 5px;
}

add the given php code at any place in your templete

/* PHP code*/

<div id="featured_posts">
<a></a>

<div>

<?php 
$containter = 1; 
$display = 1;
?>

  <?php $my_query = new WP_Query('category_name=featured');
  while ($my_query->have_posts()) : $my_query->the_post(); ?>

<?php
if (($containter == 1) and ($display >= 4)) {
        echo "<ul class='slides' style='display:none;'>";
        } elseif  ($containter == 1) {
        echo "<ul class='slides'>"; 
        } else {}
?>

<li>
        <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
         <a href="<?php the_permalink() ?>"><?php getImage('1'); ?> </a>
</li>

<?php 
$containter++; 
$display++;
?>

<?php
if ($containter >= 4) {
echo "</ul>"; $containter = 1;} else {}
?>

                <?php endwhile; ?>
</div> <!-- end #slide_cont -->

<a></a>
</div> <!-- end #featured_posts -->

Download preview

Advertisements

One Response to “Jquery Featured Post Slideshow”

  1. MeSoCutte Says:

    Astonishing style. I would love to write that way.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: