I want to multiple of 2 close div and open a new div in wp loop using shortcode post loop.
if($i % 2 == 0) {echo '</li><li>';}
$i++;
How Can do it?
General loop:
<?php
$i = 1;
//added before to ensure it gets opened
echo '<li>';
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();
// post stuff...
?>
<div class="frCol"><?php the_post_thumbnail('thumbnail', array('class' => 'imgthumb')); ?>
<div class="item-info">
<h2><?php the_title(); ?></h2>
</div>
</div>
<?php
// if multiple of 3 close div and open a new div
if($i % 2 == 0) {echo '</li><li>';}
$i++; endwhile; endif;
//make sure open div is closed
echo '</li>';
?>
This is the shortcode:
function testimonial_thumb_shortcode($atts){
extract(shortcode_atts(array(
'category' => ''
), $atts));
$q = new WP_Query(array(
'posts_per_page' => -1,
'post_type' => 'testimonials',
'testimonial_cat' => $category
));
$list = ' <ul>';
while($q->have_posts()):
$q->the_post();
$idd = get_the_ID();
$author_photo = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
$list .= '/*Main loop*/';
endwhile;
$list.= '</ul>';
wp_reset_query();
return $list;
}
add_shortcode('tthumb', 'testimonial_thumb_shortcode');
Based on your comment, maybe this helps:
function testimonial_thumb_shortcode($atts){
extract(shortcode_atts(array(
'category' => ''
), $atts));
$q = new WP_Query(array(
'posts_per_page' => -1,
'post_type' => 'testimonials',
'testimonial_cat' => $category
));
$list = ' <ul><li>';
$i = 0; //init the counter
while($q->have_posts()):
$q->the_post();
$idd = get_the_ID();
$author_photo = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
$list .= '/*Main loop*/';
$i++; //increase counter
if($i % 2 == 0){
$list .= '</li><li>';
}
endwhile;
$list.= '</li></ul>';
wp_reset_query();
return $list;
}
add_shortcode('tthumb', 'testimonial_thumb_shortcode');
Related
How to insert a div after the third post of this wordpress loop (code below) ??
I searched the site but I couldn't find an explanation of how to insert it in a code like mine.
<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'orderby' => 'rand',
'showposts'=>6, //
'caller_get_posts'=>1
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="loopindex">';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
<div class="post_mobile" id="post-<?php the_ID(); ?>">
CONTENT
</div>
<?php
}
echo '</div>';
}
}
?>
All you need is a counter! Before your while loop starts, initialize a counter variable.
Then at the beginning of your while loop check the counter value, and at the end of while loop add 1 to it. Like so:
$your_query = new wp_query($args);
$counter = 1;
while ($your_query->have_posts()) {
// first check the value of your counter variable
if (3 == $counter) {
// output your div/html here
}
// do your stuff in the loop if you need to!
// right at the end of your while loop add 1 to your counter
$counter++;
}
Use WordPress current_post to check the post index in while loop.
<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'orderby' => 'rand',
'showposts'=>6, //
'caller_get_posts'=>1
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="loopindex">';
while ($my_query->have_posts()) {
$my_query->the_post();
// Get the current post index
$current_post = $my_query->current_post;
//Check if post is 4th post
if($current_post == 3){?>
<div>This content is displayed only after third post.</div>
<?php
}
?>
<div class="post_mobile" id="post-<?php the_ID(); ?>">
CONTENT
</div>
<?php
}
echo '</div>';
}
}
?>
I know this question has been asked before. I checked through multiple answers on this site,
for example:
Wordpress loop with different bootstrap columns
https://wordpress.stackexchange.com/questions/222278/how-to-separate-posts-loop-in-to-two-columns/222281
... but I cannot work out how to integrate answers with my code (assuming that is possible).
I want to display a list of Categories and their related posts on a page.
The code I'm using works fine BUT displays the results in a single column down the page:
I want to split the display into 2 columns, like in the image below, if possible:
The code I'm using (currently placed in a new page template) is as follows:
<?php
/*
* Template Name: Alphabetical List
*/
get_header();
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
foreach ( $categories as $category ) {
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<p><?php the_title(); ?></p>
<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
} // End foreach
get_footer();
?>
Wondering if anyone can help me to get this code to display loop results in 2 columns.
Many thanks.
UPDATE TO QUESTION
Karl, thanks for your answer. Your script works, but with a small problem:
The Categories/Related Posts display in 2 columns but a 'gap/space' appears in the middle of the display of data (see image below):
I added to your code slightly so I could display a custom field I inserted into each post. I'm not sure if this has caused the problem.
Altered code (changes are immediately after $query->the_post();):
<?php
/*
* Template Name: Alphabetical List
*/
get_header();
?>
<div style="height:100px"></div>
<?php
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
echo "<div class='new-column'>";
$counter = 0;
foreach ( $categories as $category ) {
if($counter % 4 == 0 && $counter !=0){
echo "<div class='new-column'>";
}
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$customfieldvalue = get_post_meta($post->ID, "PDF", true);
?>
<p><a href="<?php echo $customfieldvalue; ?>" target="_blank"><?php
the_title(); ?></a></p>
<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
$counter++;
if($counter % 4 == 0){
echo "</div>";
}
} // End foreach
if($counter % 4 != 0){
echo "</div>";
}
get_footer();
?>
I've used bootstrap classes (row, col-6). Checked the size of categories array and used 2 variables - one as a counter and the other one to check if the column is first or second.
<?php
/*
* Template Name: Alphabetical List
*/
get_header();
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
//get size of category
$catSize = sizeof($categories);
$j = 1;
$n = 1;
// Loop through categories
foreach ( $categories as $category ) {
if($n == 1){
echo '<div class="row">';
}
echo'<div class="col-6">';
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<p><?php the_title(); ?></p>
<?php
} // End while
} // End if
echo '</div></div>';
if($n == 1){
if($j == $catSize){
echo '<div class="col-6"></div>
</div>';
}
else{
$n = 2;
}
}
else{
echo '</div>';
$n =1;
}
$j++;
}
// Restore original Post Data
wp_reset_postdata();
} // End foreach
get_footer();
?>
Try this, I used a modulos operator "%" to group loops into 4, it will create new column every 4 loops. MAKE SURE YOU ADD CSS TO class new-column to arrange it like columns.
<?php
/*
* Template Name: Alphabetical List
*/
get_header();
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
echo "<div class='new-column'">;
$counter = 0;
foreach ( $categories as $category ) {
if($counter % 4 == 0 && $counter !=0){
echo "<div class='new-column'">;
}
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<p><?php the_title(); ?></p>
<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
$counter++;
if($counter % 4 == 0){
echo "</div>";
}
} // End foreach
if($counter % 4 != 0){
echo "</div>";`enter code here`
}
get_footer();
?>
I built a custom blog page in my custom wordpress theme, and I'm trying to add pagination to the blog page. Im' using a foreach loop, instead your standard "if while post" loop.
Everything is working find, however I'm not sure where to add "paged" as an argument.
Here is my code:
<?php if (is_page( 'Blog' )) : ?>
<?php
//Get the Posts
$posts = get_posts();
foreach ($posts as $post) :
setup_postdata( $post );
//Setup Post data
$haystack = get_the_category($post->ID);
$i = count($haystack);
$string = "";
for ($j=0; $j < $i; $j++) {
$string .= " ";
$string .= $haystack[$j]->slug;
}
$link = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large', false );
$href = get_the_permalink();
$theCat = wp_get_post_categories($post->ID);
if (has_post_thumbnail($post->ID)){
$theCols = 'span12';
$imgWidth = 'span4';
$contentWidth = 'span8';
} else {
$theCols = 'span12';
$imgContainer ='display: none;';
$contentWidth = 'width: 100%;';
}
?>
<div class="<?php echo $string;?>">
<div id="post-<?php the_ID(); ?>" class="post-content <?php echo $theCols;?> group nopad">
<div class="post-content--image <?php echo $imgWidth;?> <?php echo $imgContainer;?>">
<img src="<?php echo $link[0]; ?>">
</div>
<!-- Post Content -->
<div class="post-content--container <?php echo $contentWidth;?>">
<?php
$post_title = get_the_title();
$post_title = explode(' ', $post_title);
$title = '';
for ($i=0; $i < 5 ; $i++) {
$title .= $post_title[$i];
$title .= ($i == 50) ? "..." : " ";
}
?>
<p class="post-content--date"><?php echo get_the_date('d M Y'); ?></p>
<h4 class="post-content--heading"><?php echo $title;?></h4>
<p class="post-content--cat"><?php echo $string;?></p>
<div class="post-content--text">
<?php
if ($theCat){
$str = substr(get_the_excerpt(), 0,255);
} else {
$str = get_the_excerpt();
}
$n = strpos($str, '<a');
if ($n > 0){
$rest = substr($str, 0, $n);
echo $rest;
} else {
echo $str;
}
?> ...
</div>
<button class="see-more-btn">Read More</button>
</div>
</div>
</div>
<?php endforeach;
wp_reset_postdata();?>
<?php else : ?>
<p>Critiria Not Found</p>
<?php endif; ?>
what am I missing? Thanks for the help in advance.
If you are going to use the get_posts function you need to set the posts_per_page and offset parameters. You need to check the current page and set the offset according to how many posts you are showing per page and the current page. For eg. On Page 2 and showing 5 posts per page you need to set the offset to 5 in order to skip the first 5 posts.
Note: The posts_per_page parameter does NOT work without setting the offset parameter.
$args = array(
'posts_per_page' => 5,
'offset' => 0
);
$posts_array = get_posts( $args );
One other way is to use the WP_Query and instead of passing the offset argument you just pass the page argument only like the example below where get_query_var('paged') get the value of the ?paged=x and if it its not set will default to '1'.
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query = new WP_Query( array( 'paged' => $paged ) );
If you are going to use WP_Query you need to change from foreach to:
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$post_id = get_the_ID();
$haystack = get_the_category($post_id);
$i = count($haystack);
}
}
To output the pagination links after the WP_Query you can use the paginate_links function as below. The advantage of using WP_Query is that you will also get the total number of posts found matching the current query parameters in found_posts and other values which you might need like max_num_pages.
echo paginate_links( array(
'base' => '%_%',
'total' => $query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'prev_next' => true,
'prev_text' => __('« Previous'),,
'next_text' => __('Next »'),
'add_args' => false,
'add_fragment' => '',
) );
get_posts: https://codex.wordpress.org/Template_Tags/get_posts
WP_Query: https://codex.wordpress.org/Class_Reference/WP_Query#Pagination_Parameters
paginate_links: https://codex.wordpress.org/Function_Reference/paginate_links
I tried with the code provided but it stil doesn't work...
and it started giving problems only after updating to wordpress 4.8.2
I copy also the code with the following parte where I close the foreach and the if ...
With Wordpress 4.7.6 works perfectly...
Any Idea?
Thanks a lot for the help!
<?php
$cat_array = array();
$args = array(
'post_type' => 'post',
'posts_per_page' => 9,
'ignore_sticky_posts' => 1
);
$my_query = null;
$my_query = new WP_Query($args);
if ($my_query->have_posts())
{
while ($my_query->have_posts()):
$my_query->the_post();
$cat_args = array(
'orderby' => 'none'
);
$cats = wp_get_post_terms($my_query->post->ID, 'category', $cat_args);
foreach($cats as $cat)
{
$cat_array[$cat->term_id] = $cat->term_id;
}
endwhile;
wp_reset_postdata();
}
if ($cat_array)
{
foreach($cat_array as $cat)
{
$category = get_term_by('ID', $cat, 'category');
$slug = get_term_link($category, 'category');
$id = $category->term_id;
$valore = "category_" . $id;
$colore = get_field('colore_categoria', $valore);
$immagine = get_field('immagine_ispirazione', $valore);
$testo_box = get_field('testo_box', $valore);
?>
<div class="colonna clearfix">
<a href="<?php echo $slug;?>">
<div class="box">
<img src="<?php echo $immagine?>" alt="italia">
<div class="overlay">
<p><?php echo $testo_box;?></p>
</div>
<div class="titolobox" style="background-color:<?php echo $colore;?>">
<h2><?php echo $category->name;?></h2>
</div>
</a>
</div>
</div>
<?php
}
}
wp_reset_query();
?>
Use 'ignore_sticky_posts' instead of 'caller_get_posts'.
You can refer to this page to update your query
I don't know your requirement but I think you didn't close the the foreach loop and if condition, and also I think that you need advance custom field value of category assigned to the post for that you should use
wp_get_post_categories( int $post_id, array $args = array() )
in your while loop. hope this help.
and you should use "ignore_sticky_posts" rather than "caller_get_posts"
use bellow code.
<?php
$cat_array = array();
$args = array(
'post_type' => 'post',
'posts_per_page' => 9,
'ignore_sticky_posts' => 1
);
$my_query = null;
$my_query = new WP_Query($args);
if ($my_query->have_posts())
{
while ($my_query->have_posts()):
$my_query->the_post();
$cat_args = array(
'orderby' => 'none'
);
$cats = wp_get_post_terms($my_query->post->ID, 'category', $cat_args);
foreach($cats as $cat)
{
$cat_array[$cat->term_id] = $cat->term_id;
}
endwhile;
wp_reset_postdata();
}
if ($cat_array)
{
foreach($cat_array as $cat)
{
$category = get_term_by('ID', $cat, 'category');
$slug = get_term_link($category, 'category');
$id = $category->term_id;
$valore = "category_" . $id;
$colore = get_field('colore_categoria', $valore);
$immagine = get_field('immagine_ispirazione', $valore);
$testo_box = get_field('testo_box', $valore);
}
}
?>
enjoy
I am adding filter for each tag in a specific category and getting all tags using below code now i am adding tabs to this system , the anchor tags are not working in echo
<?php
$dyno_cat = get_field( "category_slug" );
$query_args = array(
'category_name' => $dyno_cat,
'posts_per_page' => -1
);
$query = new WP_Query( $query_args );
$posttags = "";
while( $query->have_posts() ) {
$query->the_post();
if( get_the_tag_list() ){
$posttags = $posttags . get_the_tag_list('',',',',');
}
}
// Reset
wp_reset_postdata();
// Explode tags in array
$sortedtags = explode(',', $posttags);
// Sort array
asort($sortedtags);
// Remove duplicates from array
$sortedtags = array_unique($sortedtags);
// Remove the blank entry due to get_the_tag_list
$sortedtags = array_values( array_filter($sortedtags) );
// Wrap each tag in list element
echo '<ul class="nav nav-tabs" role="tablist">';
foreach ($sortedtags as $tagname) {
//echo '<li>' . $tagname . '</li>';
echo
'<li>
<a href="#'.$tagname.'" role="tab" data-toggle="tab">
'.$tagname.'
</a>
</li>';
}
echo '</ul>';
echo '<div class="tab-content">';
foreach($sortedtags as $tagname) {
echo '<div class="tab-pane" id="' . $tagname.'">';
$the_query = new WP_Query(array(
'post_status' => array('private'),
'posts_per_page' => -1,
'category_name' => $dyno_cat
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
echo '<h1>';
the_title();
echo '</h1>';
endwhile;
}
echo '</div>';
?>
It seems posts are getting but the tabs are not working , check the attached screen
$tagname the tag name coming some thing like with below format ,
Americas