blog_archive.php 4.67 KB
<?php
/**
 * The template for displaying the Cancel Subscription .
 *
 * This page template will display any functions hooked into the `homepage` action.
 * By default this includes a variety of product displays and the page content itself. To change the order or toggle these components
 * use the Homepage Control plugin.
 * https://wordpress.org/plugins/homepage-control/
 *
 * Template name: Blog Archive
 *
 * @package storefront
 */
/*
 * Created on : Mar 11, 2016, 8:35:20 AM
 * Author: Tran Thi Phuong An
 * Email: phuongantt.na@gmail.com
 */
remove_filter('the_content', 'wpautop');
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main blog-archive" role="main">
        <h1>BLOG</h1>
        <section class="container container-blog-archive">
            <ul id="ajax-posts">
                <?php
                $postsPerPage = 9;
                $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage
                );

                $loop = new WP_Query($args);
                $do_not_duplicate = '';//array();
                while ($loop->have_posts()) : $loop->the_post();                 
                $do_not_duplicate  .= get_the_ID().",";
                    ?>
                    <li class="item">
                        <a href="<?php the_permalink(); ?>">
                            <?php
                            $thumbnail = get_the_post_thumbnail(null, $size, $attr);
                            if ($thumbnail == '') {
                                the_content();
                            } else {
                                echo $thumbnail;
                            }
                            ?>
                        </a>
                        <div class="item-content">
                            <h3 class="font20"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                            <?php fgc_get_short_description(get_the_ID()) ?>
                            <!--more-->
                            <br/>
                            <br/>
                            <?php // the_content();    ?>
                            <span class="read-more"><a href="<?php the_permalink(); ?>" class="font16">Read More</a></span>
                        </div>
                    </li>
                    <?php
                endwhile; // end of the loop.

                wp_reset_postdata();
                ?>
            </ul>
        </section>
        <div id="more_posts" class="load-more font16"  data-category="<?php echo get_cat_ID("News"); ?>" >LOAD MORE</div>
    </main><!-- #main -->
</div><!-- #primary -->

<?php get_footer(); ?>

<script>
    jQuery(document).ready(function ($) {
    	var $container = $('#ajax-posts');
    	function initMasonry(){
	        $container.imagesLoaded(function () {
	            $container.masonry({
	                itemSelector: '.item',
	                isFitWidth: true,
    				isAnimated: true
	            });
	        });
    	}
        initMasonry();

        // $container.masonry('reloadItems');
        var pageNumber = 1;
        var ppp = <?php echo $postsPerPage ?>;
        var do_not_duplicate = <?php echo "'".$do_not_duplicate."'" ?>;
        // console.log('Existed Array: ' + do_not_duplicate);

        jQuery("#more_posts").on("click", function () { // When btn is pressed.
            jQuery("#more_posts").attr("disabled", true); // Disable the button, temp.
            load_posts();
        });
        var ajaxurl = '<?php echo admin_url('admin-ajax.php') ?>';
        function load_posts() {
            pageNumber++;
            var str = '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&do_not_duplicate=' + do_not_duplicate + '&action=more_post_ajax';

            jQuery.ajax({
                type: "POST",
                dataType: "html",
                url: ajaxurl,
                data: str,
                success: function (data) {
                    var $data = jQuery(data);
                    if ($data.length) {
                        $container.append($data).each(function(){
                        	$container.masonry('reloadItems');
                        });
                        jQuery("#more_posts").attr("disabled", false);
                    } else {
                        jQuery("#more_posts").attr("disabled", true);
                    }
                    initMasonry();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
                }
            }).done(function () {

            });
            return false;
        }
    })
</script>

<?php