Frontpage with a post slideshow

Hi there,

I'm looking to create a slideshow for my homepage(frontpage) that will loop through a catogory of posts named 'Featured'. At the moment i have the posts pulling through from that category as follows:

add_filter( 'beans_loop_query_args', 'post_slider' );

function post_slider( ) {

    beans_remove_action( 'beans_post_meta' );
    beans_remove_action( 'beans_post_meta_tags' );
    beans_remove_action( 'beans_post_meta_categories' );
    beans_remove_action( 'beans_post_image' );

    return array(
        'category_name' => 'featured',
        'paged' => get_query_var( 'paged' ),
        'nopaging' => false
    );

}

which works fine, but not for extending into UIKit slideshow html markup such as:

add_action( 'beans_main_prepend_markup', 'post_slider' );

function post_slider() {

    ?><hr class="uk-grid-divider"> 

        <div class="uk-slidenav-position" data-uk-slideshow="">

            <ul class="uk-slideshow uk-text-center">
              <!-- post loop -->
                <li style="animation-duration: 500ms; height: 232px;">
                    post1
                </li>
                <li style="animation-duration: 500ms; height: 232px;">
                    post2
                </li>
                <!-- /post loop -->
            </ul>

            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>

        </div>
    <?php
}

Please guide me in the right direction. Love learning beans btw!

Thanks!

Ok i figured it out. This is my solution which works pretty well...

add_action( 'beans_main_prepend_markup', 'post_slider' );

function post_slider() {

    $query = new WP_Query( array(
        'category_name' => 'featured',
        'paged' => get_query_var( 'paged' ),
        'nopaging' => false
    ) );

    ?><hr class="uk-grid-divider"> 

        <div class="uk-slidenav-position" data-uk-slideshow="">

            <ul class="uk-slideshow uk-text-center">

                <?php if ( $query->have_posts() ) : ?>

                    <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                        <li style="animation-duration: 500ms; height: 232px;">
                            <h3><?php the_title(); ?></h3>
                            <p><?php the_excerpt(); ?></p>
                            <a href="<?php the_permalink();?>">Read More</a>
                        </li>

                    <?php endwhile; ?>

                <?php endif; ?>

            </ul>

            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>

        </div>
    <?php
}

Cheers 🙂

Hey Mike,

Well done, your code are almost perfect 🙂 Just make sure to add wp_reset_postdata() after the endif; which will reset the query and avoid conflicts for all queries which is done after that loop.

Great work mate,

I would put the if-statement more to the outside. If there are no posts in the featured category, you don't have the unneded html tags in your page.

like that:

add_action( 'beans_main_prepend_markup', 'post_slider' );

function post_slider() {

    $query = new WP_Query( array(
        'category_name' => 'featured',
        'paged' => get_query_var( 'paged' ),
        'nopaging' => false
    ) );

 if ( $query->have_posts() ) : ?>

      ?><hr class="uk-grid-divider"> 

        <div class="uk-slidenav-position" data-uk-slideshow="">
            <ul class="uk-slideshow uk-text-center">
                    <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                        <li style="animation-duration: 500ms; height: 232px;">
                            <h3><?php the_title(); ?></h3>
                            <p><?php the_excerpt(); ?></p>
                            <a href="<?php the_permalink();?>">Read More</a>
                        </li>

                    <?php endwhile; ?>
            </ul>
            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
        </div>

    <?php endif;
}

And I will copy your code for sure 🙂 Thanks!

Thanks Jochen!

Curious, wouldn't it be an idea to approach this so that category defines what content type is loaded, enabling both post and page?

@jcm do you mean dynically getting the category viewed and displaying the slider accordingly?

@Thierry Yup, exactly.

Yes absolutely, that could totally be done. We could even add a checkbox option in the category using Beans Term Meta 🙂

Oh, why didn't I think of that! 😛

You make it sound so easy 🙂 Bloody hell, I really need to pick up a book on programming some time this Christmas 😛