You want to get a jQuery content slider into your WordPress site? If you use the free theme arthemia with a working timthumb script you will find a solution here to display the latest 4 posts in a nice slider based on 'Featured Content Slider Using jQuery' at http://demo.webdeveloperplus.com/featured-content-slider/
I modified the index.html given to run in WordPress and query the 5 latest posts. The slider is using timthumb to resize images from the custom field 'Image'. Your images should be minimum 610x310px in size to fill the full image space.
BACKUP YOUR FILES BEFORE EDITING PLEASE!
A walk through:
Open and insert in header.php after <?php wp_head(); ?> and before </head> the following lines to include the Javascript we need:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myslider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>Open and add to the end of your arthemia theme style.css the following lines:
/* ui slider css stuff */
#myslider{
width:630px;
padding-right:300px;
position:relative;
border:5px solid #ccc;
height:310px;
background:#fff;
}
#myslider ul.ui-tabs-nav{
position:absolute;
top:0; left:610px;
list-style:none;
padding:0; margin:0;
width:320px;
}
#myslider ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#myslider ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#myslider ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#myslider li.ui-tabs-nav-item a{
display:block;
height:75px;
color:#333; background:#fff;
line-height:20px;
}
#myslider li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#myslider li.ui-tabs-selected{
background:url('images/selected-item.gif') top left no-repeat;
}
#myslider ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#myslider .ui-tabs-panel{
width:610px; height:310px;
background:#999; position:relative;
}
#myslider .ui-tabs-panel .info{
position:absolute;
top:240px; left:0;
width:610px; height:70px;
background: url('images/transparent-bg.png');
}
#myslider .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#myslider .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#myslider .info a{
text-decoration:none;
color:#fff;
}
#myslider .info a:hover{
text-decoration:underline;
}
#myslider .ui-tabs-hide{
display:none;
}copy images for this css classes to your arthemia/images (or themes/images) folder: transparent-bg.png and selected-item.gif
you get this images on the 'Download source code and try' of the site I gave on top.
Open up index.php and add under <?php if(!is_paged()) { ?> this:
<?php if(file_exists(TEMPLATEPATH . '/myslider.php')) {
include (TEMPLATEPATH . '/myslider.php'); } ?>
This two lines translate to: if there is a file called myslider.php in the folder of the theme go and use it. As long you didn't create this new template file nothing will happen.
Remark: this if(!is_paged()) you will find only in arthemias index.php as this theme displays Headline and Featured only on the first page.
Now we create a file called myslider.php to put into your themes folder with the following content:
<div id="myslider" >
<ul class="ui-tabs-nav">
<?php query_posts('showposts=4'); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>
<li class="ui-tabs-nav-item <?php if ($i == 1) { ?>ui-tabs-selected<?php } ?>"<?php echo 'id="nav-fragment-' . $i . '"><a href="#fragment-' . $i . '">'; ?>
<?php $values = get_post_custom_values("Image"); if (isset($values[0])) { ?>
<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=100&h=65&zc=1&q=80" alt="" />
<?php } ?>
<span><?php the_title(); ?></span></a></li>
<?php $i++; } // end while loop
} // end if
wp_reset_query(); ?>
</ul>
<?php query_posts('showposts=4'); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>
<?php echo '<div id="fragment-' . $i . '" class="ui-tabs-panel" style="">'; ?>
<?php $values = get_post_custom_values("Image"); if (isset($values[0])) { ?>
<a href="<?php the_permalink() ?>" ><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=610&h=310&zc=1&q=80" alt="" /></a>
<?php } ?>
<div class="info" >
<h2><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></h2>
<p><?php the_content_rss('', TRUE, '', 30); ?><a href="<?php the_permalink() ?>" >read more</a></p>
</div>
</div>
<?php $i++; } // end while loop
} // end if
wp_reset_query(); ?>
</div>As soon you put this file onto your site, you should see something and enjoy.
Now you could remove the whole headline and featured section from arthemia, I hope you know how to do..
See a DEMO here: Free WordPress Themes Testrun
Any questions? -> Create an account and ask!
