I'm building a bootstrap based wordpress theme, and to manipulate the DOM of the layout on smaller screen sizes I'm using this script to append new rows and hr elements between large size row items:
//insert-row
var $mainElem = $('.latest-posts'),
$parent = $mainElem.parent(),
$nav=$('.before-navigation')
if ($(window).width() < 768){
var $items = $mainElem.children(':gt(0)').detach()
if ($items.length) {
for (var i = 0; i < $items.length; i = i + 1) {
var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 1));
$nav.before('<hr class="small-article-divider">').before($row);
}
}
}else if ($(window).width() >= 768 && $(window).width() <= 970){
var $items = $mainElem.children(':gt(1)').detach()
if ($items.length) {
for (var i = 0; i < $items.length; i = i + 2) {
var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 2));
$nav.before('<hr class="small-article-divider">').before($row);
}
}
}else if($(window).width() > 970){
var $items = $mainElem.children(':gt(3)').detach()
if ($items.length) {
for (var i = 0; i < $items.length; i = i + 4) {
var $row = $('<div class="row latest-posts">').append($items.slice(i, i + 4));
$nav.before('<hr class="small-article-divider">').before($row);
}
}
}
However, this only works after the page is refreshed. How do I make this work when the browser window is resized without refreshing the page?
This is the query I'm using in my template:
<?php get_header(); ?>
<main class="container section">
<div class="row latest-posts">
<?php
//latest posts
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$ID = get_query_var('cat');
$args= array(
'cat' => $ID,
'paged' => $paged
);
$custom_query = new WP_Query($args);
?>
<?php if ($custom_query->have_posts()) : while ($custom_query->have_posts()) : $custom_query->the_post(); ?>
<article class="col-sm-6 col-md-3 small-article" role="article">
<p class="article-date"><?php include (TEMPLATEPATH . '/inc/meta.php' ); ?></p>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail('thumbnail', array( 'class' => "img-responsive attachment-post-thumbnail")); ?>
</a>
<?php endif; ?>
<h2 class="article-title"><?php the_title(); ?></h2>
<?php $limit = 40; ?>
<p class="article-short-text"><?php echo wpse_custom_excerpts($limit); ?></p>
<a href="<?php the_permalink(); ?>" class="btn btn-learn-more">Learn more</a>
</article>
<?php
endwhile; endif;
wp_reset_query();
?>
</div>
<hr class="small-article-divider before-navigation">
<div class="row">
<div class="col-sm-12">
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
</div>
</div>
</main>
<?php get_footer(); ?>
