I want to add a simple load more button to the front page of my wordpress site that will load more posts. I'm using a query and bootstrap to have 1 post per line, and then 2, and then 1, and so on. I want 15 posts to be displayed and then a load more button, and then when you press the button 15 more posts are loaded. I've started to try to add this button, but every time I try it does not work. I have tried plugins and making my own. If anyone can help me add in a load more button I would be extremely appreciative.
my front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 15,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();
EDITS FROM DOMINIQUE'S ANSWER
front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 15,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) { ?>
<button id=load-more>load more</button>
<?php
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();
loop.php
<?php if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
}
?>
functions.php
//LOAD MORE
add_action( 'wp_ajax_load_more', 'load_more' );
function load_more() {
if ( isset($_POST['action']) && $_POST['action'] === 'load_more' ){
$loopFile = $_POST['loop_file'];
$paged = $_POST['page_no'];
$posts_per_page = $_POST['posts_per_page'];
$args = array('paged' => $paged,
'post_type' => 'post',
'posts_per_page' => $posts_per_page);
$query = new WP_Query($args);
get_template_part( $loopFile );
}
wp_reset_query();
exit;
}
js
// AJAX to grab more posts, wrap with a vanilla javascript or
// jQuery click event function.
function loadMorePosts(pageNumber, postsPerPage) {
var query = 'action=load_more&page_no=' + pageNumber +
'&loop_file=loop&posts_per_page=' + postsPerPage;
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
data: query,
success: function(response){
// handle response
}
});
}
One approach you can take is to move your query to functions.php and add an action to wp_ajax. For example:
add_action( 'wp_ajax_load_more', 'load_more' );
function load_more() {
if ( isset($_POST['action']) && $_POST['action'] === 'load_more' ){
$loopFile = $_POST['loop_file'];
$paged = $_POST['page_no'];
$posts_per_page = $_POST['posts_per_page'];
$args = array('paged' => $paged,
'post_type' => 'post',
'posts_per_page' => $posts_per_page);
$query = new WP_Query($args);
get_template_part( $loopFile );
}
wp_reset_query();
exit;
}
Create a loop.php that resides in the root of your theme. This will be a template for your posts that can be iterated over:
<?php if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// populate your post template here
echo '<h2>' . get_the_title() .'</h2>';
}
?>
Place this code in a javascript file. When you need to grab more posts make an AJAX call to the action 'load_more':
// AJAX to grab more posts, wrap with a vanilla javascript or
// jQuery click event function.
function loadMorePosts(pageNumber, postsPerPage) {
var query = 'action=load_more&page_no=' + pageNumber +
'&loop_file=loop&posts_per_page=' + postsPerPage;
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
data: query,
success: function(response){
// handle response
}
});
}
This is a very simple implantation, you will want to include a NONCE for security and handle when max number of pages has been reached.
Related
On my front page I have a load more button that appears after every 15 posts. It works perfectly, the load more button will still show up if there is nothing left to load. When there is nothing left to load, I just have to press the button once and then it disappears. But I would rather just have the load more button not show up at all if there are no posts left to load. Does anyone have any ideas for how I could fix this.
my front-page.php
<?php
get_header();
get_template_part ('post-template/trendingg');
?>
<script>
var now=2; // when click start in page 2
jQuery(document).on('click', '#load_more_btn', function () {
jQuery.ajax({
type: "POST",
url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",
data: {
action: 'my_load_more_function', // the name of the function in functions.php
paged: now, // set the page to get the ajax request
posts_per_page: 15 //number of post to get (use 1 for testing)
},
success: function (data) {
if(data!=0){
jQuery("#ajax").append(data); // put the content into ajax container
now=now+1; // add 1 to next page
}else{
jQuery("#load_more_btn").hide();
}
},
error: function (errorThrown) {
alert(errorThrown); // only for debuggin
}
});
});
</script>
<section id="ajax"><!-- i have to change div to section, maybe a extra div declare -->
<?php
$the_query = new WP_Query( [
'posts_per_page' => 15, // i use 1 for testing
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => get_query_var('paged', 1) //page number 1 on load
] );
if ($the_query->have_posts()) {
$i = 0;
$j = 0;
while ($the_query->have_posts()) {
$the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php } else { // Small posts ?>
<?php if($j % 2 === 0){ echo '<div class="row">';} ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<div class="two-front-container">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a>
<div>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0){ echo '</div>';}?>
<?php
}
$i++;
}?>
<?php
}?>
</section>
<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
<?php
get_footer();
my functions.php
//FRONT PAGE
add_action('wp_ajax_my_load_more_function', 'my_load_more_function');
add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function');
function my_load_more_function() {
$query = new WP_Query( [
'posts_per_page' => $_POST["posts_per_page"],
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => get_query_var('paged', $_POST["paged"])
] );
if ($query->have_posts()) {
$i = 0;
$j = 0;
while ($query->have_posts()) {
$query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php } else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<div class="two-front-container">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a>
<div>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}
wp_reset_query();
}else{
return 0;
}
exit;
}
You have to start considering the total amount of posts you are looping through. If you already reached the total number of posts it means there's nothing else to load though you can just not render the button.
You have to create a kind off pagination system so you know where you are in each case. You need to know what is the number of each post out of the total of posts for the current query, this way you know if you reached the last one.
Check this post where they make use of post_count in queries:
https://wordpress.stackexchange.com/questions/74920/post-count-only-shows-the-number-of-results-per-page
I am trying to create a load more posts button on my wordpress site. I want 15 posts to show at first, and then after ever 15 posts the load more button appears, loading 15 posts at a time. I also want the load more button to disappear if there are no more posts left to load. With the code below, I've been able to add the button. However, at first no posts appear on my site and then when I press the button 15 load, but then the button disappears. How could I fix this, and make the load more button work effectively?
frontpage.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 15,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
</div>
<div class="loadmore">Load More</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
loadmore-posts.js
jQuery(document).ready(function () {
jQuery(".post").addClass("hide");
total = jQuery( ".post" ).length;
x = 15;
jQuery('.loadmore').click(function () {
//y = x;
jQuery(total);
jQuery(".post").removeClass("hide");
jQuery(".post:gt("+x+")").addClass("hide");
x++;
if(x >= total){
jQuery( ".loadmore" ).hide();
}
});
});
I added a load more button onto one of my category pages. I have three posts in a row and after two columns (6 posts) I have a load more button. The problem is when you press the load more button it scrolls back to the top. I'm assuming because the load more code is in the wrong spot, however I can't find the error. (you have to wrap content in div id=ajax) Does anyone have a solution? Thanks in advance.
by the way I am using this plugin
<?php
get_header();
get_template_part ('inc/carousel-food');
get_template_part ('inc/food-double-posts');
$the_query = new WP_Query( [
'posts_per_page' => 6,
'paged' => get_query_var('paged', 1),
'cat'=> 10
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if($i % 3 == 0) {
echo '</div><div class="row">';
}
?>
<article <?php post_class('col-md-4'); ?> >
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
<?php get_template_part( 'share-buttons' ); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
</article>
<?php
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
I am attempting to use ajax in my WordPress project to dynamically load videos depending on their post ID. At the moment when I click on the video link I get the error 500 internal server error. I send the post ID via ajax to a PHP script, there I attempt to get the post meta of the post using the ID and then display the video url stored within that post meta. Can anyone see where I am going wrong?
Below is my shortcode function
/**
* Render the HTML code for the speaker interviews
*
* #return $output string The HTML code to be rendered, caught by ob_start();
*/
function test_view_shortcode_fn( $attributes ) {
ob_start();
$args = array( 'post_type' => 'test_video',
'post_status' => 'publish',
'posts_per_page' => 1
);
$main_video = new WP_Query( $args );
if( $main_video->have_posts() ) : while ( $main_video->have_posts() ) : $main_video->the_post();
$video = get_post_meta( get_the_ID(), '_video_url' );
$poster = get_post_meta( get_the_ID(), '_video_poster' );
?>
<div class="row">
<div class="columns small-12 medium-7 large-8 video-single">
<?php echo do_shortcode("[video src='" . $video[0] . "' poster='" . $poster[0] . "' width='800' height='640' preload='none' ]") ?>
<ul class="channel-share">
<li><a class="text-center" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" title="Share on Facebook" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a class="text-center" href="https://twitter.com/home?status=<?php the_title(); ?>-<?php the_permalink(); ?>" title="Share on Twitter" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a class="text-center" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Share on Linked In" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a class="text-center" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="Share on Google+" target="_blank"><i class="fa fa-google-plus"></i></a></li>
</ul>
<?php the_content(); ?>
</div>
<div class="columns small-12 medium-5 large-4 video-single">
<aside>
<ul class="iot-channel-sidebar">
<?php
$args = array(
'post_type' => 'test_video',
'posts_per_page' => 5,
'orderby' => 'rand'
);
$channel = new WP_Query( $args );
if( $channel->have_posts() ) : while( $channel->have_posts() ) : $channel->the_post();
$poster = get_post_meta( get_the_ID(), '_video_poster' );
$id = get_the_ID();
$video_ajax_url = VIDEO_URI . '/inc/video_ajax.php';
?>
<?php if( $poster ) { ?>
<li class="video-archive-item">
<div class="video-poster">
<a title="<?php the_title(); ?>" id="video_<?php echo $id; ?>">
<img src="<?php echo $poster[0]; ?>" alt="<?php the_title(); ?>" />
</a>
</div>
<div class="video-title">
<a title="<?php the_title(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</div>
</li>
<script type="text/javascript">
jQuery("#video_<?php echo $id; ?>").click(function(){
jQuery.ajax({
url: '<?php echo $video_ajax_url; ?>',
type: 'POST',
data: {id: '<?php echo $id; ?>'},
success: function(data){
$('.wp-video').html(data); // Load data into a <div> as HTML
}
});
});
</script
<?php } ?>
<?php endwhile; endif; ?>
</ul>
</aside>
</div>
</div>
<?php endwhile; endif;
$output = ob_get_clean();
return $output;
}
My ajax:
<?php
global $post;
$postID = $_POST['id'];
setup_postdata( $postID );
echo $postID;
$video = get_post_meta( $postID, '_video_url' );
$poster = get_post_meta( $postID, '_video_poster' );
echo do_shortcode("[video src='" . $video[0] . "' poster='" . $poster[0] . "' width='800' height='640' preload='none' ]")
?>
I finally realised this was due to the fact that WordPress wasn't being loaded on the PHP file being called via Ajax.
To fix this I included wp-load.php at the top of my PHP script the Ajax was calling and it works perfectly. Here's what I added to my PHP file.
<?php
$filename = "../../../../wp-load.php";
include($filename);
?>
I have some code that pulls in wordpress posts, I want to just pull in the image. Then when the image is clicked, more info to appear in a div at the right side of the page. Been trying a few things myself but can't seem to get it to work correctly.
This is my wordpress code, i'm incrementing the posts to add showdiv-1, showdiv-2 etc... then incrementing the information div to be storeinfo-1, storeinfo-2 etc...
Clickable logos:
<ul class="store_list">
<?php $i = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li class="one-third nomargin">
<a id="showdiv-<?php echo $i; ?>" class="store-logo" title="View <?php echo $post->post_title; ?> shop info"><?php
$thumbnail_id = get_post_meta($post->ID, 'Store Logo', true);
echo wp_get_attachment_image($thumbnail_id, 'Store Logo');
?></a>
</li>
<?php $i++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>
</ul>
Divs to show when logo is clicked:
<?php $m = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="storeinfo-<?php echo $m; ?>">
<h1 class="shop-name"><?php echo $post->post_title; ?></h1>
<p class="shop-telephone nop">Tel: <?php getCustomField('Telephone'); ?></p>
<div class="shop-openinghours">
<?php the_content(); ?>
</div>
<p class="shop-website nop"> <a target="_blank" href="http://<?php getCustomField('Website'); ?>">Visit Site</a></p>
</div>
<?php $m++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>
Thanks in advance!
You can do that with following steps;
You have already give ids, ok. Those images are related to specific information divs.(I assume store-info-* divs are hidden first). Simply write a jquery function. I am giving your updated code, and my new implemented jquery code.
EDIT: In order to hide previous ones when you click show info, I have added a class to store-info-* divs and added jquery code to my implementation to hide all open stores and show clicked one.
<ul class="store_list">
<?php $i = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li class="one-third nomargin">
<a id="showdiv-<?php echo $i; ?>" class="store-logo" title="View <?php echo $post->post_title; ?> shop info" class="images"><?php
$thumbnail_id = get_post_meta($post->ID, 'Store Logo', true);
echo wp_get_attachment_image($thumbnail_id, 'Store Logo');
?></a>
</li>
<?php $i++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>
</ul>
<?php $m = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="storeinfo-<?php echo $m; ?>" style="display:none;" class="stores">
<h1 class="shop-name"><?php echo $post->post_title; ?></h1>
<p class="shop-telephone nop">Tel: <?php getCustomField('Telephone'); ?></p>
<div class="shop-openinghours">
<?php the_content(); ?>
</div>
<p class="shop-website nop"> <a target="_blank" href="http://<?php getCustomField('Website'); ?>">Visit Site</a></p>
</div>
<?php $m++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>
jQuery(function ($) {
$(".images").on('click', function() {
$(".stores").hide();
var idObj = $(this).attr("id").split("-");
var id = idObj[1];
$("#storeinfo-" + id).show();
});
});