Make a post carousel with lightbox using SiteOrigin

1. Create a SiteOrigin custom post type.
You can find it under Tools > Post Types when you are logged into your WordPress Dashboard.

Insert a SiteOrigin Image Widget and enable the Lightbox.

2. Copy the SiteOrigin’s carousel template files from \so-widgets-bundle\widgets\post-carousel\tpl\ to your theme’s \tpl\ folder.

The two files should be: base.php and carousel-post-loop.php

3. Replace the content of the carousel-post-loop.php with the following code

<?php
/**
* @var WP_Query $posts
* @var string $default_thumbnail
*/
while($posts->have_posts()) : $posts->the_post(); ?>
<li class="sow-carousel-item<?php if( is_rtl() ) echo ' rtl' ?>">
<?php the_content(); ?>
</li>
<?php endwhile; wp_reset_postdata(); ?>

4. Copy this code to your theme’s function.php file

function themename_carousel_template_file( $filename, $instance, $widget ) {
$filename = get_stylesheet_directory() . '/tpl/carousel-base.php';
return $filename;
}
add_filter( 'siteorigin_widgets_template_file_sow-post-carousel', 'themename_carousel_template_file', 10, 3 );


Posted in Web Tutorials and tagged .