Develop Reference

How can I create an infinite scroll (lazy loading) grouped per day and showing date?

Situation
I'm creating a custom Wordpress website where I want to show the most recent articles grouped by day and have it scroll infinitely when you've reached the bottom of your screen.
Problem
I don't know how to continue with the date you were on without breaking the layout.
I've seen many code that involve having infinite scroll, but none of them really worked for me since it also needs to match the design.
Here is the design:
The image pretty much explains what I need to create and so I've written the following code:
<div class="recent">
<?php
$args = array(
'posts_per_page' => -1,
'orderby' => 'date'
);
$myQuery = new WP_Query($args);
$date = '';
$postCount = 0;
$newDay = false;
if ( $myQuery->have_posts() ) : while ( $myQuery->have_posts() ) : $myQuery->the_post();
$postCount++;
if ( $date != get_the_date() ) {
if ( $postCount != 1 ) {
$newDay = false;
if (!$newDay) {
?></div><?php
}
?>
</div>
<?php
}
?>
<div class="recent__articles">
<?php
$newDay = true;
$date = get_the_date();
?>
<div class="recent__header">
<img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
<?php echo $date; ?>
</div>
<?php
if ($newDay) {
?>
<div class="articles__wrapper"><?php
}
}
?>
<div class="recent__article">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<figure class="article__image">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else : ?>
<img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
<?php endif ?>
</figure>
<div class="article__meta">
<span class="article__cat">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</span>
<h2 class="article__title"><?php echo get_the_title() ?></h2>
<div class="article__date">
<?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
</div>
</div>
</a>
</div>
<?php
endwhile; endif;
wp_reset_postdata();
?>
</div>
Top part where I check the date and increment the postCount is so I can group the articles of that day in separate div and style it accordingly.
Now all I need is to check wether I've reached the bottom and continue with where I left off.
Any help with the directions I need to be going is much appreciated.
Thank you!

I've fixed my problem in combination with the Ajax Load More plugin.
I hope this will help others facing the same problem as I did.
If anybody sees improvement in my code, I'd much appreciate it.
Tested on: MacOS - Chrome/Safari/Firefox & iOS - Chrome/Safari
I've installed the Ajax Load More plugin
They have a Repeat Templates section which is basically the while loop in php and I've added the following code (a bit stripped from what I've showed here above).
<?php $postCount++;
if ( $date != get_the_date() ) {
if ( $postCount != 1 ) {
$newDay = false;
if (!$newDay) {
?></div><?php
}
?>
</div>
<?php
}
?>
<div class="recent__articles">
<?php
$newDay = true;
$date = get_the_date();
?>
<div class="recent__header">
<img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
<?php echo $date; ?>
</div>
<?php
if ($newDay) {
?>
<div class="articles__wrapper"><?php
}
}
?>
<div class="recent__article">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<figure class="article__image">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else : ?>
<img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
<?php endif ?>
</figure>
<div class="article__meta">
<span class="article__cat">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</span>
<h2 class="article__title"><?php echo get_the_title() ?></h2>
<div class="article__date">
<?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
</div>
</div>
</a>
</div>
I've a .php file that I load in somewhere els that looks like this:
<div class="recent">
<?php
$date = '';
$postCount = 0;
$newDay = false;
echo do_shortcode("[ajax_load_more post_type='post' posts_per_page='2' scroll_distance='0']");
?>
</div>
Now for the last part I've written the following in jQuery:
// Ajax load more fix
function ajaxShowMore() {
var oldXHR = window.XMLHttpRequest;
function newXHR() {
var realXHR = new oldXHR();
realXHR.addEventListener("readystatechange", function() {
if (realXHR.readyState === 4) { // When the Ajax call is finished new content is loaded
var oldRecentHeaders = $('.recent__header'); // Store all previous recent headers in variable
setTimeout(function() { // Set a timeout, since it goes a bit to fast to store the data
var newRecentHeaders = $('.recent__header'); // Store all the headers in a variable
newRecentHeaders.splice(0, oldRecentHeaders.length); // Splice it, so you only get the new added headers
if (newRecentHeaders.first().text() === oldRecentHeaders.last().text()) { // Check if the first of new header date is the same as the last of the old header date
var newArticles = newRecentHeaders.first().parent().find('.articles__wrapper').children(); // Store all the articles
newRecentHeaders.first().parent().remove(); // Remove the first new added articles
oldRecentHeaders.last().parent().find('.articles__wrapper').append(newArticles); // Add them here
}
}, 10);
}
}, false);
return realXHR;
}
window.XMLHttpRequest = newXHR;
}
So for me this specific solution works, based on the classes and structure of my project I've set.
I hope this helps

Jquery tabs elements with same id

I am working with wordpress and jquery tabs and was wondering if somebody can help me. My example is similar to this one jQuery UI Tabs
Here is my php code
<?php if (!defined('FW')) die( 'Forbidden' ); ?>
<?php $tabs_id = uniqid('fw-image-tabs-'); ?>
<div class="fw-image-tabs-container" id="<?php echo esc_attr($tabs_id); ?>">
<div class="fw-image-tabs">
<?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
<div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
<h3 class="fw-image-tabs-content"><?php echo $tab['tab_image_title']; ?></h3>
<img src="<?php echo esc_attr( $tab['tab_image']['url']); ?>">
</div>
<?php endforeach; ?>
<ul>
<?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
<li><?php echo $tab['tab_title']; ?></li>
<?php endforeach; ?>
</ul>
<?php foreach ( $atts['image_tabs'] as $key => $tab ) : ?>
<div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
<p><?php echo do_shortcode( $tab['tab_content'] ) ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
And my script
jQuery(document).ready(function ($) {
$('.fw-image-tabs-container').tabs();
});
The trouble i am having is that i cannot hide the second <div class="fw-image-tabs-content"></div>. Both divs have the same class name and the same id. For some reason only the first id works. How can i show/hide the text for both divs?
Thanks

Have you tried this?
jQuery(document).ready(function ($) {
$('.fw-image-tabs').tabs();
});

JQuery tabs - unique ID for each container div

In my latest Wordpress project I'm trying to figure out how to use JQuery tabs in combination with the ACF repeater fields. The first one works but now I want multiple divs containing a few tabs on a single page. The following ones don't show the content in tabs (the script is not working on these). As far as I understand this is caused by the ID of the div (#tabs). Therefore I like to add something to this ID to see if this fixes my problem; like #tabs1, #tabs2, #tabs3, etc. I can't give each div it's own ID manually as they are created in a loop (ACF repeater field). Been searching for days and can't seem to find how to do this in the script. Hope someone can guide me in the right direction.
<script>
jQuery(document).ready(function($) {
$('#tabs').tabs();
})
</script>
The loop to create the tabs:
<?php if( have_rows('slider') ): ?>
<div id="tabs">
<?php while(have_rows('slider') ): the_row(); ?>
<div id="<?php the_sub_field('tab_title');?>">
<?php the_sub_field('tab_content');?>
</div>
<?php endwhile; ?>
<ul>
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
Here's an example of a website that has a set up kind of like what I'm trying to achieve... note that each section has a slide show with buttons (in my case the 'tabs') underneath to select a different slide show.
http://partnersandspade.com/studio/

I believe the problem lies here <div id="<?php the_sub_field('tab_title');?>">.
If your tab_title have spaces, comma, quotes (which is most likely since it's a title and not a slug) and you use it as an element id then this isn't valid and will likely cause some problem.
Use simple ids instead. tab-1, tab-2, tab-2 etc.,
e.g.
<?php if( have_rows('slider') ): ?>
<div id="tabs">
<?php $i = 1; ?> <!-- initiate the loop count var -->
<?php while(have_rows('slider') ): the_row(); ?>
<div id="#tab-<?php echo $i;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $i++; ?>
<?php endwhile; ?>
<ul>
<?php $i = 1; ?> <!-- initiate the loop count var -->
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php $i++; ?>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>

UPDATE
Changing to class should work but if it doesn't I would suggest to change your ACF structure a bit. You could include the slider repeater in another repeater field "tabs" then you would be able to loop in the loop (docs - nested lops) and that way you will give each "tabs" an unique id. See the code below:
<?php if( have_rows('tabs') ): ?>
<?php $i = 1; while(have_rows('tabs') ): the_row(); ?>
<div id="tabs<?php echo $i++; ?>">
<?php while(have_rows('slider') ): the_row(); ?>
<div id="<?php the_sub_field('tab_title');?>">
<?php the_sub_field('tab_content');?>
</div>
<?php endwhile; ?>
<ul>
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php endwhile; ?>
<?php endif; ?>
I've misunderstood at the first time. Did you consider changing id="tabs" to class="tabs". This should solve the problem:
<script>
jQuery(document).ready(function($) {
$('.tabs').tabs();
})
</script>
Markup:
<div class="tabs">
IGONRE BELOW:
Add variable $i with value "1" and increase its value on the end on the loop.
Replace
<?php the_sub_field('tab_title');?>
with
tabs<?php echo $i;?>
All together this should give you unique id for each row.
<?php $i = 1; while(have_rows('slider') ): the_row(); ?>
<div id="tabs<?php echo $i;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $i++; endwhile; ?>

This is where I'm at now...
I managed to give all tab wrappers (#tabs) it's own ID and all the tabs inside this wrapper will get a unique ID too.
<?php $tabsId = 1; while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<header class="article-header">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
</header>
<?php if( have_rows('slider') ): ?>
<div id="tabs<?php echo $tabsId; ?>">
<?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
<div id="tab<?php echo $tabId;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $tabId++; endwhile; ?>
<ul class="tabs">
<?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php $tabId++; endwhile; ?>
</ul>
</div>
<?php endif; ?>
<section class="entry-content cf">
<?php the_content(); ?>
</section>
</article>
<?php $tabsId++; endwhile; ?>
However I think I need to change the script somehow so it knows that I'm not targeting the #tabs div but I'm targeting #tabs1, #tabs2, #tabs3 etc. Here's the script I'm using as i'm using it. Is there way to change this so it runs on each #tabs.. div?
jQuery(document).ready(function($) {
$('#tabs1').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
})

Show/Hide multiple WordPress entries

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();
});
});

multiple slideshow on one page using repeater fields

I would like to display multiple slideshow on one page from my website.
I'm using a repeater ACF to enter my images.
I'm not able to know in advance how many slideshows are going to be displayed
when one slideshow is displayed, everything works perfectly, but when 2 are displayed, It doesn't work anymore.
does anyone knows how I can fix it ?
here is a basic code without the repeater and with 2 slideshows :
http://jsfiddle.net/XRpeA/13/
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
<br><br>
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
and here is my code with the repeater :
http://jsfiddle.net/XRpeA/14/
<?php if(get_field('images')): ?>
<div id="counter_2"><span id="current">1</span> / <span id="total"></span></div>
<div id="slideframe">
<?php while(has_sub_field('images')): ?>
<?php if(get_sub_field('image') != ''){ ?>
<img class="image_news" src="<?php the_sub_field('image'); ?>"/>
<?php } ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
thanks a lot

Ok, so I did it just for you as I promiced, thought I thought it will be faster :)
Result
http://skyloveagency.com/new/
(will remove tomorrow)
Fields:
photo_repeater - repeater
---photo_slider - repeater
------photo_block - image with URL output
Full script, not optimized but works perfectly
<?php
/**
* Template Name: Profiles2
*/
get_header(); ?>
<?php
// query
$args = array(
'post_type' => 'profiles',
'show' => 1
);
$wp_query = new WP_Query($args);
?>
<?php $random = 0;
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php if(get_field('photo_repeater')): ?>
<?php while(has_sub_field('photo_repeater')): ?>
<?php $random++; ?>
<div id="slideframe<?php echo $random; ?>">
<?php if(get_sub_field('photo_slider')): ?>
<?php while( has_sub_field('photo_slider') ): ?>
<?php
$img_url = get_sub_field('photo_block');
$image = aq_resize( $img_url, 200, 200, true );
?>
<img class="image_news" src="<?php echo $image; ?>" alt="111" />
<?php endwhile; ?>
<?php endif; ?>
</div>
<br>
<div id="counter<?php echo $random; ?>">image <span id="current<?php echo $random; ?>">1</span> / <span id="total<?php echo $random; ?>"></span></div>
<script>
var count<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news').length;
$("#total<?php echo $random; ?>").text(count<?php echo $random; ?>);
// set display:none for all members of ".pic" class except the first
$('#slideframe<?php echo $random; ?> .image_news:gt(0)').hide();
// stores all matches for class="pic"
var $slides<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news');
$slides<?php echo $random; ?>.click(function () {
// stores the currently-visible slide
var $current<?php echo $random; ?> = $(this);
if ($current<?php echo $random; ?>.is($slides<?php echo $random; ?>.last())) {
$("#current<?php echo $random; ?>").text("1");
$current<?php echo $random; ?>.hide();
$slides<?php echo $random; ?>.first().show();
}
// else, hide current slide and show the next one
else {
$("#current<?php echo $random; ?>").text($current<?php echo $random; ?>.next().index()+1);
$current<?php echo $random; ?>.hide().next().show();
}
});
</script>
<br><br>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php get_footer(); ?>