// load more
function misha_my_load_more_scripts() {
//if ( is_home() ) {
global $wp_query;
// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');
// register our main script but do not enqueue it yet
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/assets/js/myloadmore.js', array('jquery') );
// register our main script but do not enqueue it yet
wp_register_script( 'my_isotope', get_stylesheet_directory_uri() . '/assets/js/jquery.isotope.min.js', array('jquery') );
// now the most interesting part
// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages
) );
wp_enqueue_script( 'my_loadmore' );
wp_enqueue_script( 'my_isotope' );
//}
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );
function misha_loadmore_ajax_handler(){
// prepare our arguments for the query
//$args = json_decode( stripslashes( $_POST['query'] ), true );
//$args = stripslashes($_POST['query']);
$args = array(
'post_status' => 'publish',
'order' => 'DESC',
'orderby' => 'date',
'posts_per_page' => 6,
'paged' => $_POST['page'] + 1
);
//var_dump($args);
//$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
// $args['post_status'] = 'publish';
if($_POST['query'] == 'career'){
$args['post_type'] = stripslashes( $_POST['query'] );
}else{
$args['category_name'] = stripslashes( $_POST['query'] );
}
// echo $args['category_name'];
// echo '<pre>';
// print_r($args);
// echo '</pre>';
//echo 'page '.$args['post_status'];
// it is always better to use WP_Query but not here
//for career page
if($_POST['query'] == 'career'){
query_posts( $args );
if( have_posts() ) :
// run the loop
while( have_posts() ): the_post();?>
<li>
<div class="row">
<div class="col-lg-10">
<a class="toggle" href="<?php the_permalink($main_id); ?>">
<span><?php echo get_the_title($main_id); ?></span>
<div class="career-job-related pull-right">
<p>Valid hingga:<br><span><?php the_field('career_valid_date');?></span></p>
</div>
</a>
</div>
<div class="col-lg-2 text-center">
<a href="mailto:careers@telkomtelstra.co.id?subject=IT-<?php echo get_the_title($main_id); ?>"><p>Apply<br><span><i class="fa fa-envelope-o" aria-hidden="true"></i></span></p></a>
</div>
</div>
</li>
<?php
endwhile;
?>
<?php
endif;
}else{
//for insights page
query_posts( $args );
if( have_posts() ) :
// run the loop
while( have_posts() ): the_post();
// look into your theme code how the posts are inserted, but you can use your own HTML of course
// do you remember? - my example is adapted for Twenty Seventeen theme
//get_template_part( 'template-parts/post/content', get_post_format() );
// for the test purposes comment the line above and uncomment the below one
//the_title();
?>
<!-- <div id="block-grid" class="insight-imgs isotopeWrapper clearfix" id="3"> -->
<article class="col-lg-4 col-md-6 isotopeItem <?php
$cats = get_the_category();
if ($cats) {
foreach($cats as $cat) {
echo strtolower(str_replace(' ','-',$cat->cat_name));
}
}
?> <?php echo strtolower(preg_replace("/\s+/",'-',get_field('insight_author',false))); ?>" style="display:none;">
<a href="<?php the_permalink($main_id); ?>">
<?php
$cats = get_the_category();
if ($cats) {
foreach($cats as $cat) {
?>
<?php
$cat_type = strtolower(str_replace(' ','-',$cat->cat_name));
switch ($cat_type) {
case "infographics":
?>
<?php
$image = get_field('insight_image_thumbnail');
if( !empty($image) ){
?>
<div class="insight-img imgLiquidFill" style="background-image: url(<?php echo $image; ?>); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<?php }else{ ?>
<div class="insight-img imgLiquidFill" style="background-image: url(<?php echo the_content(); ?>); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<?php echo the_content(); ?>
<?php } ?>
</div>
<?php
break;
case "videos":
?>
<div class="insight-img imgLiquidFill" style="background-image: url(http://i3.ytimg.com/vi/<?php the_field('youtube_video_id'); ?>/hqdefault.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<img src="http://i3.ytimg.com/vi/<?php the_field('youtube_video_id'); ?>/hqdefault.jpg" alt="ALT" class="box-shadow">
<div class="video-emblem"></div>
</div>
<?php
break;
default:
?>
<?php
$image = get_field('insight_image_thumbnail');
if( !empty($image) ){
?>
<div class="insight-img imgLiquidFill" style="background-image: url(<?php echo $image; ?>); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<?php }else{ ?>
<div class="insight-img imgLiquidFill" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<img src="<?php echo the_post_thumbnail_url(); ?>" alt="ALT" class="box-shadow">
<?php } ?>
</div>
<?php
break;
} //end switch
}
}
?>
<div class="blog-grid-items">
<span class="blog-tags">
<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo $tag->name . ' | ';
}
}
?>
</span>
<span class="blog-parent-cat">
<?php
$cats = get_the_category();
if ($cats) {
foreach($cats as $cat) {
echo $cat->name;
}
}
?>
</span>
<span class="blog-titles"><?php echo get_the_title($main_id); ?>
<span class="read-more">[read more]</span>
<span class="blog-publisher"><?php echo get_the_date($main_id);?>, <?php echo nl2br(get_field('insight_author')); ?></span>
</div>
</a>
</article>
<?php
endwhile;
?>
<!-- </div> -->
<?php
endif;
}
die; // here we exit the script and even no wp_reset_query() required!
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}description:
Display Insight’s content when user click the “Load More” button, using Ajax function to load the data on the fly. The function will not run if no internet connection.