Hi all, I’m using Orbit Slider for [URL=“http://foundation.zurb.com/”]Foundation framework on my website. I’m trying to create my theme without the use of WordPress plugins.
I have Orbit slider working, and I’ll share the code with you bellow, but it’s been about 6 days for me trying to figure out how to add the title of the slide in a separate div above the ‘orbit-caption’.
It’s been taking a while, as I’m not much of a coder.
I’d like to get help here to add the title, but ideally, I’d like to also pull slides from a certain category rather than the built in ‘add slides’ option, which i think can be done by changing
$args = array( 'post_type' => 'slides', 'posts_per_page'=>9999 );
to
$args = array( 'post_type' => 'featured', 'posts_per_page'=>5 );
. Id also like to use a custom pre-defined
the_post_thumbnail('home_slider');
size for the slides, and to add a link to each slide to the post it belongs to
Here’s are the relevant code snippets
functions.php
function slides_register() {
$labels = array(
'name' => _x('Slideshow', 'post type general name'),
'singular_name' => _x('Slide', 'post type singular name'),
'add_new' => _x('Add New', 'slide'),
'add_new_item' => __('Add New Slide'),
'edit_item' => __('Edit Slide'),
'new_item' => __('New Slide'),
'all_items' => __('All Slides'),
'view_item' => __('View Slide'),
'search_items' => __('Search Slides'),
'not_found' => __('Nothing found'),
'not_found_in_trash' => __('Nothing found in Trash'),
'parent_item_colon' => '',
'menu_name' => 'Slides'
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => false,
'hierarchical' => false,
'menu_position' => 7,
'rewrite' => array(
'slug' => 'slideshow-item',
'with_front' => false,
'feed' => true,
'pages' => true ),
'supports' => array('title','editor','thumbnail', 'excerpt')
);
register_post_type( 'slides' , $args );
}
add_action('init', 'slides_register');
loop-slideshow.php
<div id="featured">
<?php
global $post;
$args = array( 'post_type' => 'slides', 'posts_per_page'=>9999 );
$loop_slides = new WP_Query( $args );
while ( $loop_slides->have_posts() ) : $loop_slides->the_post();
$postid = get_the_ID();
if(has_excerpt()) {
$datacaption = 'data-caption="#slide-'.$postid.'"';
} else {
$datacaption = '';
}
if(has_post_thumbnail()) {
$imgid = get_post_thumbnail_id($postid);
$alt = get_post_meta($imgid , '_wp_attachment_image_alt', true);
$imgurl = wp_get_attachment_url($imgid);
echo '<img class="orbit-slide" src="'.$imgurl.'" '.$datacaption.' alt="'.$alt.'" />';
} else {
echo '<div class="orbit-slide" '.$datacaption.'>';
echo get_the_content();
echo '</div>';
}
if(has_excerpt()) {
$output = '<span class="orbit-caption" id="slide-'.get_the_ID().'">';
$output .= '<span class="slide_excerpt">'.get_the_excerpt().'</span>';
$output .= '</span>';
echo $output;
}
endwhile;
?>
</div>
<?php wp_reset_query(); ?>
Calling the slider in my index file
<div class="twelve columns">
<?php get_template_part('loop', 'slideshow'); ?>
</div>