I am using Bootstrap tabs to display a grid with employee profiles and photo's in ACF repeater fields and when clicking on the profile a bootstrap modal pops up with the information filled out in a repeater sub field.
Everything is working fine, but when you click on the different profiles, the same profile information is in the modal and not different profile information.
Here is my code
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="team" role="tabpanel" aria-labelledby="team-tab">
<div class="row justify-content-md-between">
<?php
if( have_rows('team_profile_boxes') ):
$i = 1;
// loop through the rows of data
while ( have_rows('team_profile_boxes') ) : the_row(); ?>
<div id="profile-box">
<div class="profile-image-box">
<div class="profile-image" style="background-image: url('<?php echo the_sub_field('profile_image'); ?>');"></div>
<div class="profile-image-hover" style="background-image: url('<?php echo the_sub_field('second_profile_image'); ?>');"></div>
</div>
<div class="profile-details">
<a data-toggle="modal" href="#exampleModal">
<h4>
<span><?php the_sub_field('division_title'); ?></span>
<br>
<?php the_sub_field('profile_name'); ?> <br>
<span><?php the_sub_field('job_title'); ?></span>
</h4>
</a>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<?php the_sub_field('profile_information'); ?>
</div>
</div>
</div>
</div>
<?php $i++;
endwhile;
else :
// no rows found
endif;
?>
</div>
</div>
I've looked through this example but it doesn't seem to apply:
ACF Repeater + Modal
you have not print $i , try this code ...
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="team" role="tabpanel" aria-labelledby="team-tab">
<div class="row justify-content-md-between">
<?php
if( have_rows('team_profile_boxes') ):
$i = 1;
// loop through the rows of data
while ( have_rows('team_profile_boxes') ) : the_row(); ?>
<div id="profile-box-<?php echo $i; ?>">
<?php //your code ?>
</div>
<div class="modal fade" id="profile-box-<?php echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<?php //your code ?>
</div>
<?php $i++;
endwhile;
else :
// no rows found
endif; ?>
</div>
</div>
</div>
I managed to solve it using the philosophy above but using the following code:
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="team" role="tabpanel" aria-labelledby="team-tab">
<div class="row justify-content-md-between">
<?php
if( have_rows('team_profile_boxes') ):
$i = 1;
// loop through the rows of data
while ( have_rows('team_profile_boxes') ) : the_row(); ?>
<div id="profile-box">
<div class="profile-image-box">
<div class="profile-image" style="background-image: url('<?php echo the_sub_field('profile_image'); ?>');"></div>
<div class="profile-image-hover" style="background-image: url('<?php echo the_sub_field('second_profile_image'); ?>');"></div>
</div>
<div class="profile-details">
<a data-toggle="modal" href="<?php echo '#exampleModal' . $i ?>">
<h4>
<span><?php the_sub_field('division_title'); ?></span>
<br>
<?php the_sub_field('profile_name'); ?> <br>
<span><?php the_sub_field('job_title'); ?></span>
</h4>
</a>
</div>
</div>
<div class="modal fade" id="<?php echo 'exampleModal' . $i ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<?php the_sub_field('profile_information'); ?>
</div>
</div>
</div>
</div>
<?php $i++;
endwhile;
else :
// no rows found
endif;
?>
</div>
</div>
you can use an acf build-in function called get_row_index() to set an index to all the rows. it starts from 1 and goes up to end of your rows count.
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="team" role="tabpanel" aria-labelledby="team-tab">
<div class="row justify-content-md-between">
<?php if( have_rows('team_profile_boxes') ):
// loop through the rows of data
while ( have_rows('team_profile_boxes') ) : the_row(); $i = get_row_index();?>
<div id="profile-box">
<div class="profile-image-box">
<div class="profile-image" style="background-image: url('<?php echo the_sub_field('profile_image'); ?>');"></div>
<div class="profile-image-hover" style="background-image: url('<?php echo the_sub_field('second_profile_image'); ?>');"></div>
</div>
<div class="profile-details">
<a data-toggle="modal" href="#exampleModal-<?php echo $i;?>">
<h4>
<span><?php the_sub_field('division_title'); ?></span>
<br>
<?php the_sub_field('profile_name'); ?> <br>
<span><?php the_sub_field('job_title'); ?></span>
</h4>
</a>
</div>
</div>
<div class="modal fade" id="exampleModal-<?php echo $i;?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<?php the_sub_field('profile_information'); ?>
</div>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div>
</div>
Related
I have 2 wordpress installations, 1 is for major content, the other is a help center.
the help center is installed in the major content directory. So you have the wordpress directory, and another in that directory, making it so we can use different themes and change the look between the two.
I'm just curious, on the search results page, I'm getting the correct url's, but they are going to 404 pages. I verified in the database that these records exist, so it's not a matter of the database not making these records and that these pages don't exist. Another note is that the search results page will return pages that have been created, but
<?php
get_header();
global $wp_query;
$total_result = $wp_query->found_posts;
?>
<div class="main">
<div class="main-hero">
<div class="container">
<h1>Boxstorm Help Center</h1>
<p>Search the Boxstorm Help Center documentation</p>
<div class="search-wrapper">
<form id="searchform" class="searchform" role="search" method="get" action="<?php echo site_url(); ?>">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input id="s" name="s" type="text" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'boxstorm' ); ?>" value="<?php echo get_search_query(); ?>">
<span class="search-button-wrapper">
<input id="searchsubmit" type="submit" value="">
<i class="fa fa-search"></i>
</span>
</div>
</form>
</div><!-- / .search-wrapper -->
</div>
</div><!-- /.main-hero -->
<nav class="main-hero-subnav cd-secondary-nav">
<div class="container">
<div class="is-hidden-mobile">
<?php get_breadcrumb(); ?>
</div>
</div>
</nav>
<div class="panel sub-nav-hero">
<div class="container page">
<div class="columns is-multiline is-mobile search-results">
<div class="column is-3-desktop is-6-tablet is-full-mobile left">
<div class="columns top-cats is-multiline is-mobile is-centered">
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/getting-started/">
<i class="fas fa-list-ul"></i>
<h2>Getting Started</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/documentation/">
<i class="fas fa-book"></i>
<h2>Documentation</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/videos/">
<i class="far fa-play-circle"></i>
<h2>Browse Videos</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/contact/">
<i class="fas fa-at"></i>
<h2>Contact Support</h2>
</a>
</div>
</div>
</div>
</div>
<div class="column is-9-desktop is-6-tablet is-full-mobile right">
<h1 class="results"><?php printf( __( 'Search results for: <b>%s</b>', 'boxstormsupport'), get_search_query() ); ?></h1>
<div class="columns is-multiline">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', 'search' ); ?>
<div class="column is-12 results">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php the_permalink(); ?>
</div>
<?php endwhile; else : ?>
<div class="column is-12">
<p><?php _e( '<p>Sorry, but there were no results for the term <b style="font-weight:900;">'.get_search_query().'</b>. Please refine your search terms and try again.</p>' ); ?></p>
</div>
<?php endif; ?>
</div><!-- / columns -->
</div><!-- / columns is-9 right -->
</div><!-- / search-results -->
</div>
</div>
</div>
<?php get_footer(); ?>
The site is live at https://www.boxstorm.com/help-center. If you'd like to see the problem.
The pages follow this format in wordpress:
Pages parameters:
This is what I'm seeing:
Chrome
Firefox
Any help would be appreciated, thanks.
I'm trying to show the featured image or the post thumbnail in every list items < li >. Here's the code:
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>
but, it's not showing after all while on the other page shows. Please help.
Should you have get_the_post_thumbnail($row_submenu_sql->ID); and not $row_submenu_sql->ID $post->ID is not defined in that loop.
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
//UPDATE THIS LINE LIKE BELOW
<?php echo get_the_post_thumbnail($row_submenu_sql->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>
Hello I have a while loop in WordPress and I am adding an active class on the first instance of the loop and this works fine but the same instance then again repeats afterwards without the active class.
here is my code any help would be greatly appreciated.
<div class="carousel-inner" role="listbox">
<?php
query_posts( array( 'post_type' => 'deal','dealtype' => 'deals' ) );
while (have_posts()) : the_post();
?>
<?php if( $wp_query->current_post == 0 && !is_paged() ) { ?>
<div class="item active">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } ?>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
Believe you need to add an else statement after your <?php if ($wp_query->current_post == 0 && !is_paged() ) { ?> statement ends. Should look something like this:
<div class="carousel-inner" role="listbox">
<?php
query_posts( array( 'post_type' => 'deal','dealtype' => 'deals' ) );
while (have_posts()) : the_post();
?>
<?php if ( $wp_query->current_post == 0 && !is_paged() ) { ?>
<div class="item active">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; // end of the loop. ?>
</div>
I am looking at this example : https://wordpress.stackexchange.com/questions/95661/open-wordpress-posts-in-bootstrap-modal
but don't seem to understand the principal of this. I have my posts displaying as a masonry grid on the front page with this loop:
<?php query_posts('posts_per_page=25'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_title(); ?>
<a href="<?php echo the_permalink(); ?>" class="box col<?php echo rand(2,3); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php endwhile; endif; ?>
which when clicked is opening the single-content.php:
<?php while (have_posts()) : the_post(); ?>
<article <?php post_class(); ?>>
<?php the_title(); ?>
<?php get_template_part('templates/entry-meta'); ?>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
I have been trying to get the single-content in a bootstrap modal window when a thumbnail of the masonry grid is being clicked. No luck when experimenting with different content on the web, any guidance would be appreciated.
best of wishes
O.
EDIT:
<?php query_posts('posts_per_page=25'); ?> <!-- posts per page -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<span class="new-wrapper">
<span><h1><?php the_title(); ?></h1></span>
<a href="<?php echo the_permalink(); ?>" class="box col<?php echo rand(2,3); ?>"> <!-- randomize .col2 & .col3, creating the grid portfolio -->
<?php
$post_id = get_the_id();
if ( has_post_thumbnail() ) {
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img src="<?php echo $feat_image;?>">
<?php
}
?>
</span>
<?php endwhile; endif; ?>
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<!-- Here showing the title of the post -->
<h4 class="modal-title" id="myModalLabel"><?php
the_title();
?></h4>
</div>
<div class="modal-body">
<?php the_content() // the content is adding here ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
Am using your code, but it is only working on the first post and therefor not being dynamic. Clicking on all the other posts doesn't seem to have any effect.
<?php query_posts('posts_per_page=25'); ?>
<?php the_title(); ?>
<?php
$post_id = get_the_id();//make sure this getting the correct post id
//here change the direct thum to custom link like this
if ( has_post_thumbnail())
{
//here we can get the featured image of the post as a link
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); //make sure this will return the correct featured image url
//place the url in our custome html like this:
//in this we change the target as per the post id so each post have its own modal for show the content in the while loop.
?>
<img src="<?php echo $feat_image;?>">
<?php
}
// here the target is set as #post'current post id'
//here we starting the modal part
?>
<!-- Modal -->
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<!-- Here showing the title of the post -->
<h4 class="modal-title" id="myModalLabel"><?php
the_title();
?></h4>
</div>
<div class="modal-body">
<?php the_content() // the content is adding here ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<?php
?>
Here am trying to load the modal inside the while loop and change the name of the modal and the click trigger related to the post id. Suppose the post id is 1 then the trigger and the modal id is like #post1 and post1. Here avoid the permlink to the detail page. I hope that this will solve problem.
<?php
//Get Post ID
echo $id= get_the_ID(); ?>
link to open model
Read More
Bootsrap model
<div class="modal fade project-model" id="myModal<?php echo $id;?>" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><?php the_title(); ?></h5>
<button type="" class="close project-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
I am working with a WP website and in my template I am running the loop like this:
<!-- START LOOP -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<div class="eight columns">
<h3><?php the_title() ?></h3>
<p><?php the_excerpt() ?></p>
<p><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></p>
</div>
</div>
</div>
<hr />
<?php endwhile; ?>
Because this is a responsive website, I am trying to get a grid column look. The problem I am having is how I can insert a div with a class or "row container" after every third item?
I know I probably just confused the crap out of you because I confuse myself but in short the html would look like this:
<div class="row container">
<!-- item 1 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 2 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 3 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 4 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
</div>
and so on, instead I would like it to display in a grid so the HTML should look more like this:
<div class="row container">
<!-- row 1 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 1 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 2 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 3 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
<!-- row 2 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 4 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 5 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 6 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
</div>
I can do everything else Im just not sure how to implement the below so I get the results I pasted above? I have found this online and feel like it is a step in the right direction:
<?php ($i % 3) == 0 ?>
Your feelings are right.
You can use the $current_post property of the WP_Query class to get the index of the post currently displayed in the loop, and then use the modulus operator to make sure you are targeting multiples of three.
So your loop could look like this:
<div class="row container">
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php while ( have_posts() ) : the_post(); ?>
<!-- item -->
<div class="four columns">IMAGE HERE</div>
<?php if( $wp_query->current_post % 3 == 0 ) : ?>
</div>
</div>
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php endif; ?>
<?php endwhile; ?>
</div>
You might need to improve this implementation. Specifically, make sure that, whatever happens, your HTML closes correctly.
What I needed was a counter:
<!-- START LOOP -->
<?php $counter = 1 ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<?php while ( have_posts() ) : the_post(); ?>
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<?php if ($counter % 3 == 0){echo '</div></div></hr /><div class="row" style="margin:15px 0;"><div class="twelve columns">';} ?>
<?php $counter++ ;
endwhile; ?>
</div>
</div>
<?php
$currentPage = get_query_var('paged');
// General arguments
$posts = new WP_Query(array(
'post_type' => 'post', // Default or custom post type
'posts_per_page' => 11, // Max number of posts per page
'paged' => $currentPage
));
// Content display
$i = 0;
if ($posts->have_posts()) :
while ($posts->have_posts()) :
$posts->the_post();
if( $i % 3 == 0 )
echo '<section class="columns">';
echo "<div class='column'>";
?>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php
echo "</div>";
$i++;
if( $i % 3 == 0 )
echo '</section>';
endwhile;
endif;
?>
<?php
// Bottom pagination (pagination arguments)
echo "<div class='page-nav-container'>" . paginate_links(array(
'total' => $posts->max_num_pages,
'prev_text' => __('<'),
'next_text' => __('>')
)) . "</div>";
?>