Support » Themes and Templates » combining wp-coda with other themes

  • Resolved micasuh


    I love the wp-coda theme! By itself, it’s a really cool little theme to have for a small WP site.

    But, I think this theme would be a great intro page to a bigger site and I’m currently trying to take on this task. However, since I’m quite the PHP novice, I don’t know what I’m doing really.

    Using the wp-coda theme inside of another theme, I’d have to redirect the wp-coda code to a Page. That page would then have to call the contents of other pages in order to use the js/slider/tab system that makes this theme so awesome.

    Could anyone give me tips on what in the code I should change to allow this to happen? I’ve already made the wp-coda them integrate into my current template but I don’t know how to populate it now with child pages.

Viewing 11 replies - 1 through 11 (of 11 total)
  • I know my problem might be solved if I understood better how to use the WordPress specific PHP but I’m not very confident to know what to do. Thanks for any help you can provide!

    What’s the verdict, Micasuh? I’d love to just have the plugin myself and toss it on a single page within my wordpress powered site. figured out how to use it independent of the entire WPCoda theme?

    Any improvements?
    I, too, would love to have coda on page or post.

    I haven’t update this yet because I’ve been slowly trying to make it work but the short answer is yes, it is possible to integrate the Coda theme into another theme. I’m doing it the hard way because of my VERY limited knowledge of php and js, but I know there’s a way this can be done easily.

    When I have it up and running, I will write back saying what I have done.

    Finally, after more than 5 months of asking, I have successfully integrated the WP Coda theme with another theme.

    Here’s how to do it.

    Activate the theme you want to use and customize it as you desire. Once you have your theme as you like it, it’s time to make some new theme files.

    • Coda Header – Copy the same header you’re already using but add the following from WP Coda: global.js script, inline script, and style.css (I copied all the necessary styles from style.css into a new stylesheet). You can also use the existing header with some IF statements to show the scripts and CSS for one specific page. Your call.
    • Coda Index – This is where the hacking comes in. The main elements you’ll need from WP Coda’s index.php: Navigation code, Scroll Buttons code and Scroll Container code. The easiest thing to do, however, is to grab all the code minus the query_posts script. Modify the header to get your newly created header mentioned just above and use default footer or new footer.

    What you’ll want to do is create a New Page and define the Coda Index as your template. This will be the first tab of the six. You’ll need to create five more pages for the five other tabs.

    To get all of these pages to show up on the WP Coda interface, you’re going to need a certain plugin called Improved Include Page. This allows you to actually include other page content into one page all together!

    Without going into a large explanation of what’s going on, you’ll have to use the iinclude_page tag from this plugin to grab the correct pages. Otherwise you’ll only see the one page you newly created and none of the other five pages you want.

    This is a very quick, basic write-up of what needs to happen in order to integrate WP Coda with any other template.

    Should I write a tutorial from scratch explaining everything step-by-step?

    Wow! I have been searching relentlessly to find something like what you have done here. Just wish there was a plugin to do it. Am certain it is possible and would be waaayyy cool! Thank you for this post. Is there anything new on combining theme/templates???
    Please advise.
    Thank you.
    David Sellers

    And Yes please do write a tutorial…that would be great! Thanks again!

    Would it also be possible to combine…say…Blueprint theme, Pixel and ComicPress themes???
    I have been looking for how I may do just that. No luck so-far except this post. HELP!? Please…

    Chris Olbekson


    Level 12 Bug Squasher & Forum Moderator

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

    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(); ?>
    <?php endwhile;?>

    <div class="scrollButtons scrollMeRight"><span>next</span></div>


    I plan on writing a detailed tutorial on it once I get it revised and styled better.

Please post back with a link to your detailed tutorial. I’d love to see what you did.


it worked very fine to me. micasuh‘s solutions seems pretty fine to, but it’s to much complicated. My opinion.

I’m using the Coda Slider effect in a smaller div as a featured post slider. When I get the entire site done, will come back to leave the link.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘combining wp-coda with other themes’ is closed to new replies.