I used a plugin called "Insert PHP Code Snippet" to create this page:
URL; https://sololoaded.com/All-Profiles/
Snippet Short Code; [xyz-ips snippet="All-Profiles"]
I later find out that most of my pages are appearing inside the page
for a exmaple:
DMCA PAGE
About Us page
please help I need a code on how to remove these pages from appearing inside the snippet page:
Here is the code:
<!-- query -->
<!-- query -->
<?php
add_action('admin_init', function () {
// Redirect any user trying to access comments page
global $pagenow;
if ($pagenow === 'edit-comments.php') {
wp_redirect(admin_url());
exit;
}
// Remove comments metabox from dashboard
remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
// Disable support for comments and trackbacks in post types
foreach (get_post_types() as $post_type) {
if (post_type_supports($post_type, 'comments')) {
remove_post_type_support($post_type, 'comments');
remove_post_type_support($post_type, 'trackbacks');
}
}
});
// Close comments on the front-end
add_filter('comments_open', '__return_false', 20, 2);
add_filter('pings_open', '__return_false', 20, 2);
// Hide existing comments
add_filter('comments_array', '__return_empty_array', 10, 2);
// Remove comments page in menu
add_action('admin_menu', function () {
remove_menu_page('edit-comments.php');
});
// Remove comments links from admin bar
add_action('init', function () {
if (is_admin_bar_showing()) {
remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
}
});
global $post;
$post_slug=$post->post_name;
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$query = new WP_Query( array(
'post_type' => array( 'page' ),
'post__not_in' => array(3,5550,8, 73, 6, 11, 9817,22177),
'posts_per_page' => 19,
'orderby' => 'title',
'order' => 'ASC',
'paged' => $paged
) );
?>
<?php if ( $query->have_posts() ) : ?>
<section class="top-stories section-theme-border">
<!-- begin loop -->
<div style="background:white; padding:15px; border-radius: 5px;">
<div class="row row-lg">
<?php while ( $query->have_posts() ) : $query->the_post();
$url1 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
$url2 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium');
$image_id = get_post_thumbnail_id();
$img_src = wp_get_attachment_image_url( $image_id, 'large' );
$img_srcset = wp_get_attachment_image_srcset( $image_id, 'full' );
$img_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
?>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="item">
<div class="item-media rounded ">
<a href="<?php the_permalink(); ?>"
class="item-media-content"
style="background-image: url('<?php echo esc_attr( $img_src ); ?>');"></a>
</div>
<div class="item-info text-center">
<div class="post-title a item-title text-ellipsis">
<?php the_title(); ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div></div>
<!-- end loop -->
<div class="container-wrapper songs-pag">
<?php
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => sprintf( '<i></i> %1$s', __( 'Previous', 'text-domain' ) ),
'next_text' => sprintf( '%1$s <i></i>', __( 'Next', 'text-domain' ) ),
'add_args' => false,
'add_fragment' => '',
) );
?>
</div>
</section>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
As I observe you have problem in below loop and specifically in funcions the_permalink() and the_title() that is why you are getting all other details as well, so check first than you get it.
<?php while ( $query->have_posts() ) : $query->the_post();
$url1 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
$url2 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium');
$image_id = get_post_thumbnail_id();
$img_src = wp_get_attachment_image_url( $image_id, 'large' );
$img_srcset = wp_get_attachment_image_srcset( $image_id, 'full' );
$img_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
?>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="item">
<div class="item-media rounded ">
<a href="<?php the_permalink(); ?>"
class="item-media-content"
style="background-image: url('<?php echo esc_attr( $img_src ); ?>');"></a>
</div>
<div class="item-info text-center">
<div class="post-title a item-title text-ellipsis">
<?php the_title(); ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div></div>
<!-- end loop -->
Related
I'm using this code to show post loop on my homepage.
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
endif;
?>
And my content.php contain this code:
<div class='post-outer'>
<h2 class='entry-title'>
<a href='<?php echo get_permalink(); ?>' id='pt'><?php the_title(); ?></a>
</h2>
<div class='pimg'>
<img alt='featured image' id='fimg' src='<?php the_post_thumbnail_url(); ?>'/>
</div>
<div class='post-inner'>
<?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 25 ) ); ?>
<a href='<?php echo get_permalink(); ?>'>[Continue Reading]</a>
</div>
<div class='clear'></div>
</div>
I'm trying to add pagination in this code by showing only 5 post at a time in loop and adding next page option in it.
if you want with previous and next pages try this:
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( 'Back', 'textdomain' ),
'next_text' => __( 'Onward', 'textdomain' ),
) );
or if you want without previous and next pages:
the_posts_pagination( array( 'mid_size' => 2 ) );
after endwhile and endif .
and for setting post per page, go to Setting > Reading and set number in 'Blog pages show at most' field.
and here the complete pagination reference: Pagination
hope to be useful!
I'm using AJAX to "Show More". Currently I have my custom post type show 12 initially and when the "Show More" button is clicked, 12 more post-types are loaded on page.
The Issue: After the first click, 12 are shown. But every click proceeding, it continues to repeat the previously populated 12 items.
Question: How can I properly use AJAX to show the posts, by 12s, when the users clicks "Show More".
AJAX Handler in Functions.php
function ajax_more_team($offset) {
$offset = $offset + 12;
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'team',
'posts_per_page' => 12,
'offset' => $offset,
);
$the_query = new WP_Query($args);
if ($the_query -> have_posts()) : while ($the_query -> have_posts()) : $the_query -> the_post();
//Loop content
endwhile;
endif;
wp_reset_postdata();
die($out);
}
Jquery Function
var count = 0;
function load_more_team(count) {
var count = count + 12
var button = $('#more_posts'),
data = {
'action': 'ajax_more_team',
'offset': count
}
$.ajax({
url: team_ajax.ajaxurl,
data: data,
type: 'POST',
dataType: 'html',
success: function(data){
if(data.length){
$("#ajax_posts").append(data);
button.attr("disabled",false);
} else{
button.attr("disabled",true);
}
}
});
return false;
}
$('#more_posts').click(function() {
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_more_team();
});
Edit:
To add a bit of extra context, I am adding the initial page template loop.
page.php
<div id="ajax_posts" class="row">
<?php
$args = array(
'post_type' => 'team',
'posts_per_page' => 12
);
$the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()) : while($the_query->have_posts()) : $the_query->the_post(); ?>
<?php $id = get_the_id(); ?>
<div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4">
<div class="team-member">
<a href="#" data-toggle="modal" data-target="#<?php echo $id ?>">
<img class="img-fluid" src="<?php the_field('employee_headshot'); ?>" alt="<?php the_field('employee_name'); ?>">
</a>
<div class="team-info">
<h6><?php the_field('employee_name'); ?></h6>
</div>
<a href="" data-toggle="modal" data-target="#myModal">
<div class="modal-icon">
<img class="img-fluid" src="<?php bloginfo('template_directory');?>/imgs/modal-icon.svg">
</div>
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="<?php echo $id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="team-close-btn">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="img-fluid" src="<?php the_field('employee_headshot'); ?>" alt="Alice George">
<div class="team-info">
<h6><?php the_field('employee_name'); ?></h6>
<p><strong>Title:<br></strong> <?php the_field('employee_title'); ?></p>
<p><strong>Company:<br></strong> <?php the_field('employee_company'); ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div>
<?php
if( $the_query->max_num_pages > 1)
echo '<div id="more_posts" class="btn-primary mt-4">View More</div>'
?>
<?php wp_reset_postdata(); ?>
</div>
Updated to your code, this should work for you. I think count was a bit confusing, cause for me, it wasn't immediatly clear if it was a total amount or the current page.
Not sure how you're recieving the $offset value in your PHP function but $offset here should be just the POST value 'offset', no + 12 or anything. That way at first call you have a offset of 0 and get first 12 records starting at row 1, next time you have offset of 12 and get next 12 records (starting at the 13th row). Your post_per_page remain 12, while offset multiplies. Offset indicates from what records it should begin taking the "post_per_page" amount.
function ajax_more_team($offset) {
$offset = $_POST['offset'];
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'team',
'posts_per_page' => 12,
'offset' => $offset,
);
$the_query = new WP_Query($args);
if ($the_query -> have_posts()) : while ($the_query -> have_posts()) : $the_query -> the_post();
//Loop content
endwhile;
endif;
wp_reset_postdata();
die($out);
}
-
var page = 1; // first page
function load_more_team() {
var button = $('#more_posts'),
data = {
'action': 'ajax_more_team',
'offset': page * 12 // first time 0 * 12 = offset 0
}
$.ajax({
url: team_ajax.ajaxurl,
data: data,
type: 'POST',
dataType: 'html',
success: function(data){
if(data.length){
$("#ajax_posts").append(data);
button.attr("disabled",false);
} else{
button.attr("disabled",true);
}
page++; // increment page after first request
}
});
return false;
}
var page = 2; // first page already loaded
function load_more_team() {
var button = $('#more_posts'),
data = {
'action': 'ajax_more_team',
'paged': page
}
$.ajax({
url: team_ajax.ajaxurl,
data: data,
type: 'POST',
dataType: 'html',
success: function(data){
if(data.length){
$("#ajax_posts").append(data);
button.attr("disabled",false);
} else{
button.attr("disabled",true);
}
page++; // increment page after request
}
});
return false;
}
function ajax_more_team() {
$paged = $_POST['paged'];
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'team',
'post_status' => 'publish',
'posts_per_page' => 12,
'paged' => $paged,
);
$the_query = new WP_Query($args);
if ($the_query -> have_posts()) : while ($the_query -> have_posts()) : $the_query -> the_post();
//Loop content
endwhile;
endif;
wp_reset_postdata();
die($out);
}
I want to dispay a JSON Array in <li>'s inside a Wordpress-Template.
This is the JSON-File: http://www2.suntrips.de/import/Output-extended.json
I have absolutly no clue how to do it.
This is my HTML
<div ng-app="appExtern" ng-controller="externCtrl">
<ul>
<li ng-repeat="name in Destinations">{{name}}</li>
</ul>
</div>
And this is my JS
var appExtern = angular.module('appExtern',[]);
appExtern.controller('externCtrl', function($scope, $http) {
$http.get("http://www2.suntrips.de/import/Output-extended.json").then(function(response) {
$scope.Destinations = response.data;
});
});
Can anybody help?
Your JSON structure is the following :
{
"themes" : [
{ "id": ... , "name" : ... , "imageUrl" : ..., ... },
{ "id": ... , "name" : ... , "imageUrl" : ..., ... },
{ "id": ... , "name" : ... , "imageUrl" : ..., ... }
]
}
So here's how you use that :
<li ng-repeat="theme in Destinations.themes">
<p>{{theme.name}}</p>
<img src="{{theme.imageUrl}}"/>
</li>
(As an aside, I'm always quite astonished by the number of people who are learning Angular 1, when Angular 2 - now Angular 4 - has been in development for years and its RC1 came out in September 2016.)
Your JSON contains the following data :
{
"theme" : [
{
"id" : 4,
"name" : Strand,
"imageUrl" : https://travelc.azureedge.net/themes/1869748-9bb43f9e-a7a1-4d74-bc23-7b180829a019.jpg,
"ideas" : +[ ... ],
"minPrice" : 922,
"minPriceDot" : 922
},
[ ... ]
]
}
So you must ng-repeat on Destination["theme"] in order to access its data. Not Destination. Following code should do the trick :
<div ng-app="appExtern" ng-controller="externCtrl">
<ul>
<li ng-repeat="theme in Destinations.theme">{{ theme.name }}</li>
</ul>
</div>
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package suntrips
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'suntrips' ); ?></a>
<?php if(!is_page_template( 'blank-page.php' )): ?>
<header id="masthead" class="site-header navbar navbar-static-top" role="banner">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"><?php echo esc_html__('Toggle navigation', 'suntrips'); ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>
<a href="<?php echo esc_url( home_url( '/' )); ?>">
<img src="<?php echo get_theme_mod( 'wp_bootstrap_starter_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
</a>
<?php else : ?>
<a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
<?php endif; ?>
</div>
</div>
<nav class="collapse navbar-collapse navbar-left" role="navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 3,
'link_before' => '', //Add wrapper in the text inside the anchor tag
'link_after' => '',
'container' => '',
'container_class' => '',
'container_id' => 'navbar-collapsed',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</nav>
</div>
</header><!-- #masthead -->
<div ng-app="appExtern" ng-controller="externCtrl">
<ul>
<li ng-repeat="theme in Destinations.themes">
<p>{{theme.name}}</p>
<img src="{{theme.imageUrl}}"/>
</li>
</ul>
</div>
<div id="page-sub-header" style="background-image: url('<?php if(has_header_image()) { header_image(); } ?>');">
<div class="container">
<h1><?php esc_url(bloginfo('name')); ?></h1>
<p><?php bloginfo( 'description'); ?></p>
</div>
</div>
<div id="content" class="site-content">
<div class="container">
<div class="row">
<?php endif; ?>
This is my whole header.php
function add_this_script_footer(){
wp_enqueue_script('jquery');
// Internet Explorer HTML5 support
wp_enqueue_script( 'html5hiv',get_template_directory_uri().'/js/html5.js', array(), '3.7.0', false );
wp_script_add_data( 'html5hiv', 'conditional', 'lt IE 9' );
// load bootstrap js
wp_enqueue_script('suntrips-bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array() );
wp_enqueue_script('suntrips-themejs', get_template_directory_uri() . '/js/theme-script.js', array() );
wp_enqueue_script( 'suntrips-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
wp_enqueue_script('angularjs', get_template_directory_uri() . '/js/angular.min.js', array() );
wp_enqueue_script('suntrips-mainjs', get_template_directory_uri() . '/js/main.js', array() );
}
add_action('wp_footer', 'add_this_script_footer');
This is in my functions.php
Hope anybody could find my mistake
http://sols.no/galleri/
If you scroll down to the bottom of the page you could see the new images loading but I want it to load them before scrolling all the way down to the bottom.
Here's the code from the page template
<?php
/**
* Template Name: gallery
*/
get_header();
?>
<main id="main" role="main">
<div class="page gallery">
<?php
/*$args = array('posts_per_page' => -1,'post_type' => 'post','orderby' => 'date', 'order' => 'DESC');
$posts_array = get_posts( $args );
$postids=array();
foreach($posts_array as $post){
$postids[]=$post->ID;
}*/
//query_posts(array('post_type'=>'attachment','posts_per_page' => 15,'paged'=>1,'post_status' => 'any', 'post_parent' => null));
$args = array( 'post_type' => 'attachment','post_status'=>'inherit', 'posts_per_page' => 25,'paged'=>1 , 'post_parent' => null, 'orderby' => 'date', 'order' => 'DESC' );
$attach = new wp_Query( $args );
//while ( have_posts() ) : the_post();
if ( $attach->have_posts()) {
while ( $attach->have_posts() ) {
$attach->the_post();
$parent=wp_get_post_parent_id(get_the_ID());
?>
<article class="post-<?php the_ID();?> gallery type-gallery status-publish has-post-thumbnail hentry" id="post-<?php the_ID();?>" >
<div class="entry-thumbnail">
<a href="<?php echo get_permalink($parent); ?>" rel="bookmark">
<?php //the_post_thumbnail('gallery-thumb'); ?>
<?php echo wp_get_attachment_image( get_the_ID(), 'gallery-thumb' ); ?>
</a>
</div><!-- .entry-thumbnail -->
<header class="entry-header">
<div class="entry-meta">
<?php twentytwelve_entry_meta(); ?>
</div>
<h1 class="entry-title">
<?php echo get_the_title($parent); ?>
</h1>
</header><!-- entry-header -->
<span class="screen-reader-text">Continue reading <span class="meta-nav">→</span></span>
</article>
<?php
}
//endwhile;
wp_reset_query();
}
// Reset Query
//load more links
?>
</div>
<div class="gallery-btn" style="display:none;">
<img src="<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif" class="loader-img" />
<a class="loadmore" href="#" rel="2">Load more</a>
</div>
</main>
<script>
jQuery(document).ready(function($){
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$("a.loadmore").click();
}
});
});
jQuery(document).ready(function($){
$("a.loadmore").click(function(){
var pageno=parseInt($(this).attr('rel'));
$(".gallery-btn").addClass('loader');
// here we call ajax
var data = {
action: 'loadmore',
pageno: pageno,
_ajax_nonce: '<?php echo wp_create_nonce( 'my_ajax_nonce' ); ?>'
};
$.post(MyAjax.ajaxurl, data, function(response) {
if(response!=""){
$(".page.gallery").append(response);
$("a.loadmore").attr('rel',pageno+1);
$(".gallery-btn").removeClass('loader');
}
else{
$("a.loadmore").hide();
$(".gallery-btn").removeClass('loader');
}
});
//
return false;
});
});
</script>
<?php get_footer(); ?>
I figured out it has to do with this code. But I am unable to figure out how to make it work.
jQuery(document).ready(function($){
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$("a.loadmore").click();
}
});
});
please use this new one...
jQuery(document).ready(function($){
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()-800)
{
$("a.loadmore").click();
}
});
});
You can try this. it might be helpful to you.
jQuery(document).ready(function($){
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()-400) {
$("a.loadmore").click();
}
});
});
I received some help previously in order to build a Wordpress Ajax Load more function, However the site I am building is using different variances of this on different pages pages.
The issue I'm having is controlling the variables such as 'post-type' 'postsPerPage' from the template file, the person that helped me gave me a method of creating a variable for 'category' and passing it between the template, functions.php and JS file which works perfectly, all I want to do is replicate that for 'postsPerPage' and 'post-type', easy right?
Apparently not,
I thought I had it right, however the functions.php seems like it doesnt recieve the 'postsPerPage' variable at all:
I'll put the original code for the initial instance of this that works followed by each the changes I've made to try make it work:
Initial Template File
<!-- ************************************************************************** -->
<!-- This controls the Load More AJax Function and Loadout for dropdow sections -->
<!-- ************************************************************************** -->
<div id="ajax-posts" class="row">
<?php
$cat_id = 2;
$postsPerPage = 4;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => $cat_id
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe">
<?php the_post_thumbnail( $size, $attr ); ?>
<a href="<?php the_permalink(); ?> "><figcaption>
<h2><?php the_title(); ?></h2>
<hr class="light">
<p class="description"><?php the_content(); ?></p>
</figcaption></a>
</figure>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<a id="more_posts" data-category="<?php echo $cat_id; ?>">Load More</a>
<!-- **************************************************************** -->
<!-- End of Load More AJax Function and Loadout for dropdown sections -->
<!-- **************************************************************** -->
Edited Template File
<!-- ************************************************************************** -->
<!-- This controls the Load More AJax Function and Loadout for dropdow sections -->
<!-- ************************************************************************** -->
<div id="ajax-posts" class="row">
<?php
$ppp_id = 6;
$cat_id = 2;
$postit_id = 'post';
$postsPerPage = 6;
$args = array(
'post_type' => $postit_id,
'posts_per_page' => $postsPerPage,
'cat' => $cat_id
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe">
<?php the_post_thumbnail( $size, $attr ); ?>
<a href="<?php the_permalink(); ?> "><figcaption>
<h2><?php the_title(); ?></h2>
<hr class="light">
<p class="description"><?php the_content(); ?></p>
</figcaption></a>
</figure>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<a id="more_posts"
data-category="<?php echo $cat_id; ?>"
data-ppp="<?php echo $postsPerPage; ?>"
>Load More</a>
<!-- **************************************************************** -->
<!-- End of Load More AJax Function and Loadout for dropdown sections -->
<!-- **************************************************************** -->
Initial functions.php
function more_product_ajax(){
$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 4;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
$cat = (isset($_POST['cat_id'])) ? $_POST['cat_id'] : '';
header("Content-Type: text/html");
$args = array(
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => $cat,
'paged' => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
$out .= '<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe light">
<?php the_post_thumbnail( $size, $attr ); ?>
</figure>
<h2 class="product-load"><?php the_title() ?></h2>
</div>
</div>';
endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_product_ajax', 'more_product_ajax');
add_action('wp_ajax_more_product_ajax', 'more_product_ajax');
Edited functions.php
/***********************************************
This controls initial load more function
***********************************************/
function more_post_ajax(){
$ppp = (isset($_POST['postsPerPage'])) ? $_POST['postsPerPage'] : '';
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
$cat = (isset($_POST['cat_id'])) ? $_POST['cat_id'] : '';
header("Content-Type: text/html");
$args = array(
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => $cat,
'paged' => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
$out .= '<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe">
'.get_the_post_thumbnail( get_the_ID(), $size, $attr ).'
<figcaption>
<h2>'.get_the_title().'</h2>
<hr class="light">
<p class="description">'.get_the_content().'</p>
</figcaption>
</figure>
</div>
</div>';
endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
Initial Custom.js
var ppp = 4; // Post per page
var cat = $('#more_posts').data('category');
var pageNumber = 1;
function load_posts(){
pageNumber++;
var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp' + ppp + '&action=more_post_ajax';
$.ajax({
type: "POST",
dataType: "html",
url: ajax_posts.ajaxurl,
data: str,
success: function(data){
var $data = $(data);
if($data.length){
$("#ajax-posts").append($data);
$("#more_posts").attr("disabled",false);
} else{
$("#more_posts").attr("disabled",true);
}
},
error : function(jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
return false;
}
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_posts();
});
Edited custom.js
var ppp = $('#more_posts').data('ppp');
var cat = $('#more_posts').data('category');
var pageNumber = 1;
function load_posts(){
pageNumber++;
var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp' + ppp + '&action=more_post_ajax';
$.ajax({
type: "POST",
dataType: "html",
url: ajax_posts.ajaxurl,
data: str,
success: function(data){
var $data = $(data);
if($data.length){
$("#ajax-posts").append($data);
$("#more_posts").attr("disabled",false);
} else{
$("#more_posts").attr("disabled",true);
}
},
error : function(jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
return false;
}
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_posts();
});
Sorry about all the code, just want to give you all the full picture, can anyone see where I am going wrong?