How do I grab my wordpress posts and get them to display inside FLEXSLIDER?

2 Views

Hi I am a beginner to HTML/CSS/JS and I am trying to create a web app (FOR MOBILE ONLY) which grabs wordpress posts and inserts them into a slider like FLEXSLIDER. I want my users to be able to swipe through wordpress posts select one and once they have read it, SWIPE to the next post.

Can anybody help me?

Read More

How do I get individual WORDPRESS posts into FLEXSLIDER and integrate the slider with the WORDPRESS loop?

If you need more description please ask.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Firstly, StackOverflow is intended to be used to help you with your code, not write your code for you. Given that you’ve never posted here before I’ll give you the benefit of the doubt. In the future, please give us code examples of what you have tried and explicitly explain what the problem is.

    As far as integrating your posts with Flexslider, that should be easy enough. I’ve not used the plugin before, but I’ll give it a go based on the documentation on the Flexslider site. There are good instructions on how to use the plugin here: http://www.woothemes.com/flexslider/

    First, you’ll need to make sure you have the necessary files linked inside of the<head></head> tags of your header.php file.

    Place these lines in the document head, you may have to adjust the paths to target the files.

    <link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.flexslider.js"></script>

    Next you’ll need to connect to the flexslider, place the code below in the head right after the two lines I just posted above

    <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
        touch: true, // to allow for touch controls
    });
  });
</script>

    Then you’ll need to integrate a loop with the slider markup. You need to place the below code in the template file for the page you wish to display the slider on.

    <div class="flexslider">
<ul class="slides">

    <?php  
        $post_query = new WP_Query('post_type' => 'post');
        if($post_query->have_posts() ) : while($post_query->have_posts() ) : $post_query->the_post(); ?>

    <li>
        <?php the_title(); ?>
        <?php the_content(); ?>
    </li>

</ul>
</div>

<?php endwhile; ?>
<?php endif; ?>

    Without actually installing the plugin and only by going off of the documentation I think this will work. Let me know if you have any questions. If this gets the job done, please accept my answer.

  2. In your template file you would set up your markup with the class that gets used by Flexslider (in my case .flexslider) and insert your WordPress Loop into that. Here’s an example;

    <div class="slider">
  <div id="slider" class="flexslider"> 
    <ul class="slides">
        <!-- THE POST LOOP -->
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>     

            <li>

                // Pull whatever you need from your posts here.  Featured images, content, excerpts. 
                // An image and then some absolutely positioned divs etc. The world;s you oyster

            </li>

        <?php endwhile; endif: ?>                   
    </ul>
</div>

    I’m assuming you have included the Flexslider scripts and CSS, so you would initiate Flexslider like so (in the header.php or footer.php or enqueue it in functions.php, whatever your favourite way of handling onload script is);

    <script type="text/javascript">              
    jQuery(window).load(function() {
        jQuery('.flexslider').flexslider({
            animation: "slide", 
            direction: "vertical",
            easing: "easeOutExpo",
            animationSpeed: '400',
            controlNav: false 
    });
});