Wow, you did it the hard way but it looks good. I have been looking for an easy way to integrate coda into wordpress. Here is what I came up with:
example https://bigcityrealty.info/coda-slider-test-page please note that this is not styled at all and very rough and is on a test server I use to play around with stuff. I am eventually going to use it to show my web design portfolio at https://c3mdgital.com.
I used the global.js file from the coda theme that contains all the JavaScript files needed compressed into one file then added the following to my header.php file
<?php if (is_coda-slider-test-page() && !is_paged()) { ?>
<script src="<?php bloginfo('template_url'); ?>/script/global.js" type="text/javascript"></script>
<?php } else { ?>
<?php } ?>
This way it only calls to the JavaScript file when the specific page I want the slider to show on is being displayed.
Next I modified the css from the coda theme (You only need the css from the section labeled /* — Slider — /*
and added this to my themes style sheet. (I plan on creating a separate css file that I will call to in header.php just like I called the javascript, so it only loads when the page I want is being displayed.
Next step is to add the html to whatever page template you want to use. Here is code to add.
<?php query_posts('cat=4')('post_type=post&order=asc'); ?>
<div id="page">
<div id="slider">
<ul class="navigation">
<?php while (have_posts()) : the_post(); ?>
- post_name?>"><span><?php the_title(); ?></span>
<?php endwhile;?>
<div class="scrollButtons scrollMeLeft"><span>previous</span></div>
<div class="scroll">
<div class="scrollContainer">
<?php while (have_posts()) : the_post(); ?>
<div class="panel" id="<?=$post->post_name?>">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
<?php endwhile;?>
</div>
</div>
<div class="scrollButtons scrollMeRight"><span>next</span></div>
</div>
</div>
I plan on writing a detailed tutorial on it once I get it revised and styled better.