slideshow using jQuery cycle for WordPress (Arthemia)

von Joern am 29. Mrz. 2010 | Keine Kommentare

How to get a jQuery cycle slideshow of some posts into the Headline part or above frontlist I try to explain you here.
A demo is available in the frontlist under the category bar here:

This slideshow is using timthumb script which is supplied with the WordPress theme Arthemia. Timthumb should be setup and work on your site before using this slider template!
Things we need to do:
Get some images for the transparent background, the Previous and the Next button into the /images/ folder.
Get jquery.cycle.min.js into a new /js/ folder.
Edit style.css to add the styling of this slideshow.
Add a new template file called featuresslide.php to the themes/arthemia/ folder
Add some lines to call your new slider in index.php
To make things easier I am going to pack the files into one folder and give you a download link:
The details:

You should start putting the images in a folder inside your themes folder, if you use Arthemia theme this should be:

transparent-bg.png, next.png and prev.png in:

Now create a new folder ‚js‘ in your themes folder:


put the jquery.cycle.min.js script file in there
It’s time now to load the required jQuery script files, you have to edit your header.php to do this.

Open header.php in a text editor or online.

Look for a line


we have to add the following two lines just BEFORE </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type=’text/javascript‘ src="<?php bloginfo(‚template_directory‘); ?>/js/jquery.cycle.min.js?ver=2.9.2"></script>
The first of this above lines loads jquery.min.js from a free google site, second line loads the script jquery.cycle.min.js to cycle the images from your new /js/ folder.
Next step is to open up your themes style.css (the one in your current themes folder arthemia)

Add to the end of this file the following code for styling:
/* featured slideshow */
.featured { background:none repeat scroll 0 0 #CCCCCC; height:250px; margin:0 0 10px; padding:5px;}
#controls { position: relative; float: left; z-index: 100; top: 90px; }
#controls .next, #controls .prev {font-size:0.001em; width: 30px; height: 30px; display: block; z-index: 1000; opacity: 0.7; }
#controls .prev { background:transparent url(images/prev.png) no-repeat; float: left; position: absolute; left: 5px; }
#controls .next { background:transparent url(images/next.png) no-repeat; float: right; position: absolute; left: 545px; }
#controls .next:hover, #controls .prev:hover { opacity: 1; font-size:0.001em;color:000;border: none;}
#featured-slideshow { position: relative; height: 250px; margin-right: 0; z-index: 0 !important; }
.featured-article { display: block; width: 580px; height: 250px; text-decoration: none !important; background-position: center !important; }
.featured-entry { position: relative; top: 175px; overflow: hidden; background:url("images/transparent-bg.png") repeat scroll 0 0 transparent; height: 75px; color: #a7a7a7; padding: 0; display: block; }
.featured-entry .entry-title { color: #FFF; padding: 5px 15px; display: block; font-size: 18px; font-weight: 700; }
.featured-entry .entry-summary { padding: 0 15px; margin: 0; display: block; }
Still some more to do: use the featuresslide.php template file you can download in the .zip or create a new file called featuresslide.php with the following content:
<div class="featured">
query_posts("showposts=4&category_name=Featured"); // set the number (showposts=4) and category NAME
<div id="controls" style="display: none;">
<a href="" class="prev" title="Prev"> </a>
<a href="" class="next" title="Next" > </a>
<div id="featured-slideshow">
<?php $count = 0; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php if ($count != 0) echo ’style="display: none"‘; ?>>

<a class="featured-article" href="<?php the_permalink(); ?>" rel="bookmark" style="background: url(<?php echo bloginfo(‚template_url‘); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=580&h=250&zc=1&q=70) no-repeat #1E1B1A;">
<span class="featured-entry">
<span class="entry-title"><?php the_title(); ?></span>
<span class="entry-summary"><?php the_content_rss(“, TRUE, “, 25); ?></span>
<span class="progress"></span>
<?php $count++; endwhile; endif; wp_reset_query(); ?>
<script type="text/javascript">
jQuery(document).ready(function($) {

function() {
function() {
fx: ‚fade‘,
speed: 1000,
next: ‚#controls .next‘,
prev: ‚#controls .prev‘,
timeout: 5000
In the third line of this code you can set the number of post to cycle and change the category name, which is currently ‚Featured‘ to give you immediate results.
This featuresslide.php you have to put into your themes folder (where also style.css should be)
What’s missing? The code in index.php to load the slideshow.
In the demo http://themes.go41.de/?wptheme=arthemia this slider is in the part below the category bar, inside the div front-list.
These lines of code will load the slideshow if the template exists:
<?php if(!is_paged()) { // start of new slideshow if is not paged ?>
<?php if(file_exists(TEMPLATEPATH . ‚/featuresslide.php‘)) { // get the slider in featuresslide.php
include (TEMPLATEPATH . ‚/featuresslide.php‘); } ?>
<?php } // end of new slideshow if is not paged ?>
As you might see the template is loaded only on frontpage, not on the following pages.

You might replace all the code in div id="headline", replacing the headline image and text. Headline in Arthemia is anyway only loaded in the front page view, so to replace this part you need only:
<?php if(file_exists(TEMPLATEPATH . ‚/featuresslide.php‘)) { // get the slider in featuresslide.php
include (TEMPLATEPATH . ‚/featuresslide.php‘); } ?>
Any problems? join the forum http://forum.go41.de and ask
you find me on Google+, Twitter and Facebook

(von: Joern)

Hier noch 8 weitere Ergebnisse dieses Threads:

Re: slideshow using jQuery cycle for WordPress (Arthemia) :: Reply by cricrazy

29. Mrz. 2010 (von: cricrazy)

Joern,It looks great. Only one thing, I am trying is the get latest four posts in the slideshow, instead of particular category. We had done it before, can you help me with this? If I make it to work, I…

Re: slideshow using jQuery cycle for WordPress (Arthemia) :: Reply by Joern

29. Mrz. 2010 (von: Joern)

actually just remove the category part from the query<?php query_posts("showposts=4); // set the number only if you like (showposts=4)?>this should get the four latest posts regardless of any categoryIf you work with sticky posts and do not want to show…

Re: slideshow using jQuery cycle for WordPress (Arthemia) :: Reply by cricrazy

30. Mrz. 2010 (von: cricrazy)

thanks Joern,I finished the update. Looks great. thanks for your help as always.Chris. Weiterlesen →

Re: slideshow using jQuery cycle for WordPress (Arthemia) :: Reply by Joern

30. Mrz. 2010 (von: Joern)

Looks great, soon is not much arthemia left on your site.Did you recognize that the Prev - Next button does not fadeOut after the first hover-fadeIn?I found a solution to make it invisible again after mouseout, not fade but just…

Re: slideshow using jQuery cycle for WordPress (Arthemia) :: Reply by cricrazy

30. Mrz. 2010 (von: cricrazy)

Thanks. Its true that I have changed many features of Arthemia (With your help, off-course). Today, I had a look at the default Arthemia theme, and was surprised to notice so many changes. Thanks again. Weiterlesen →

Re: slideshow using jQuery cycle for WordPress (Arthemia) :: Reply by cricrazy

31. Mrz. 2010 (von: cricrazy)

Joern,Yet another observation. I am trying to make subpages in the pages. (Parent and child pages). I have a page links on the top in navbar.The subpages gets hidden in the slide show. something like this:http://img28.imageshack.us/i/screenshot ... at4... Weiterlesen →

Re: slideshow using jQuery cycle for WordPress (Arthemia) :: Reply by Joern

31. Mrz. 2010 (von: Joern)

this you can change with the z-indexlower the values in the new css code and add higher values to page bar as explained here:topic/dropdown-menu-disappears-behind-jdgallerythe higher the value of z-index the more in front it will display_______________... Weiterlesen →

Re: slideshow using jQuery cycle for WordPress (Arthemia) :: Reply by saber210

29. Apr. 2011 (von: saber210)

will this work on premium arthemia? Weiterlesen →


Du findest mich auch auf Twitter und Facebook!

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

weitere forum Beiträge: