Creating an Orbit Slider in the Reverie Foundation Theme

Readme.md

Adding Orbit slider to Foundation.

This code shows how to add orbit to your theme. Adding it to the homepage on home.php is a common place. Basically you can copy the code in home.php here and use it. A few things to remember:

Make sure it is in a container with Foundation Columns attached (line 3 here).

The good thing about orbit is that it will adjust itself to fit its container. So if you don't want our slider to be all of the way across the screen at large sizes then you can make the container narrower and it will adjust accordingly.

My example sets small-12 medium-8. This is by no means a requirement. You can change it to what you want, or just copy lines 5-33 and put it in your own container.

There must be a <ul> element around the slider

This is the basic requirement. The UL also has to have a data-orbit attribute:

<ul class="example-orbit" data-orbit>

Each slide is a <li> element

That is the other basic requirement.

For captions, add a div with class orbit-caption

<div class="orbit-caption">

You should set a size for the slider using a featured image size

Look at functions.php to see an example

For more information visit the docs

Orbit Slider Documentation

_custom.scss

// You may find that you still have to add your own styles to get the text in the slider just how you want. 
// I suggest adding it to either the bottom of app.scss or style.scss
// style.scss is the general place to add custom style, but app.scss has foundation styles.
.orbit-caption h3 {
    color: #fff;
}

_settings.scss

//Look for the following in _settings to customize the look. On mine it started on line 596

// Orbit ===============================

// $include-html-orbit-classes: $include-html-classes;

// We use these to control the caption styles
// $orbit-container-bg: none;
// $orbit-caption-bg: rgba(51,51,51, 0.8);
// $orbit-caption-font-color: #fff;
// $orbit-caption-font-size: rem-calc(14);
// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
// $orbit-caption-padding: rem-calc(10 14);
// $orbit-caption-height: auto;

// We use these to control the left/right nav styles
// $orbit-nav-bg: none;
// $orbit-nav-bg-hover: rgba(0,0,0,0.3);
// $orbit-nav-arrow-color: #fff;
// $orbit-nav-arrow-color-hover: #fff;

// We use these to control the timer styles
// $orbit-timer-bg: rgba(255,255,255,0.3);
// $orbit-timer-show-progress-bar: true;

// We use these to control the bullet nav styles
// $orbit-bullet-nav-color: #ccc;
// $orbit-bullet-nav-color-active: #999;
// $orbit-bullet-radius: rem-calc(9);

// We use these to controls the style of slide numbers
// $orbit-slide-number-bg: rgba(0,0,0,0);
// $orbit-slide-number-font-color: #fff;
// $orbit-slide-number-padding: rem-calc(5);

// Graceful Loading Wrapper and preloader
// $wrapper-class: "slideshow-wrapper";
// $preloader-class: "preloader";

functions.php

//Add this to your functions.php

	// Add post thumbnail supports. if you don't already have them. http://codex.wordpress.org/Post_Thumbnails
	add_theme_support('post-thumbnails');
	// set_post_thumbnail_size(150, 150, false);
	add_image_size('orbit', 2000, 1125,true);
	

home.php

<!-- You would add the code shown here in addition to all of the other PHP and HTML on the page -->

	<div class="hero small-12 medium-8 columns">
		
		<?php
			$args = array('category_name' => 'featured');
			$hero = new WP_Query($args);

		    if($hero->have_posts()) :
		?>
		<ul class="example-orbit" data-orbit>
		<?php
		    while($hero->have_posts()) : $hero->the_post();
		?>	
			<li>
				<?php the_post_thumbnail('orbit'); ?>
		    	<div class="orbit-caption">
		      	<h3><?php the_title(); ?></h3>
		      	<?php the_excerpt(); ?>
		    	</div>
		  	</li>
		<?php
		    endwhile;
		?>
		</ul><!-- end orbit slider ul -->
		<?php
		    else: 
		?>
			<!-- There are not posts for the chosen category -->
			<!-- Add something here if you want it to show in place of the slider -->
		<?php endif;
			wp_reset_postdata();
		?>
		
	</div>	
	<!-- end hero container -->