i am trying to fetch posts in bootstrap accordian like this
<div class="container">
<div class="panel-group" id="accordion">
<?php
if ( have_posts() ) :
// Start the Loop.
while ( have_posts() ) :the_post ();?>
<div class='col-md-12 col-xs-12'>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed"><?php echo the_title()?></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p><?php echo the_content()?></p>
</div>
</div>
</div>
<?php
get_template_part( 'content', get_post_format() );
endwhile;
twentyfourteen_paging_nav();
else :
// If no content, include the "No posts found" template.
get_template_part( 'content', 'none' );
endif;
?>
</div>
<?php // get_sidebar( 'content' ); ?>
</div>
now problem is that once post content is printed inside accordian and once again its getting printed outside accoridan
Related
So I'm converting bootstrap site to Wordpress and post cards don't want to stack horizontally... I know there should be foreach loop which will loop through posts but I don't know how to set it up...
<?php while(have_posts()) {
the_post();
?>
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
while is also a loop. Inside the loop, you can just put the repeated code. As I've understood your code than you need to something like this:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
?>
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
Also, better to move code for one block to another file for example partials/post.php:
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
And update your current file:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
get_template_part( 'partials/post' );
} ?>
</div>
</div>
</section>
I have some code below, and the pagination seems to be failing after the second page. I'm sure that I've done something wrong on one of the loops.
Can someone sanity check my code below for me?
<?php get_header();?>
<!-- Carousel -->
<div class="container fullwidth">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background:url(<?php echo esc_url( home_url( '/' ) ); ?>wp-content/uploads/2018/09/testphoto.jpg);">
<div class="container">
<div class="carousel-caption microstory">
<h1>Backstage Blog</h1>
</div>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div>
</div>
<!-- End Carousel -->
<!-- Posts -->
<div class="container paddingtop paddingbottom">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
// are we on page one?
if(1 == $paged) { ?>
<div class="row row-eq-height paddingbottom">
<?php $query = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=1' ); ?>
<?php if ( $query->have_posts() ) :?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-6 col-md-6 col-sm-6 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage"><?php the_post_thumbnail('full'); ?></div>
<div class="blog-column">
<div class="titledatemain">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time('F jS, Y'); ?></li>
</ul>
<p><?php the_excerpt(); ?></p>
</div>
Read More
</div>
</div>
</div>
<?php endwhile;?>
<?php endif; ?>
<?php $query2 = new WP_Query( 'post_type=advert&order=DESC&orderby=date&posts_per_page=1' ); ?>
<?php if ( $query2->have_posts() ) :?>
<?php while ( $query2->have_posts() ) : $query2->the_post();
$advert_url = get_post_meta($post->ID, 'url', true);
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); ?>
<div class="col col-lg-6 col-md-6 col-sm-6 col-xs-12 postpaddingbottom">
<a href="<?php echo $advert_url ?>"><div class="col-lg-12 col-xs-12 advertbox" style="background:url(<?php echo $featured_img_url ?>);">
</div></a>
</div>
<?php endwhile; endif; ?>
</div>
<?php
$query = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=3&offset=1&paged='. $paged ); ?>
<?php if ( $query->have_posts() ) :?>
<div class="row row-eq-height paddingbottom">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-4 col-md-4 col-sm-4 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage blogimagesmall" style="background:url(<?php the_post_thumbnail_url('full'); ?>);"></div>
<div class="blog-colum">
<div class="titledate">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time( 'F jS, Y' ); ?></li>
</ul>
</div>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php endif; ?>
<?php } else { ?>
<?php
$query = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=12&offset=4&paged='. $paged ); ?>
<?php if ( $query->have_posts() ) :?>
<div class="row row-eq-height paddingbottom">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-4 col-md-4 col-sm-4 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage blogimagesmall" style="background:url(<?php the_post_thumbnail_url('full'); ?>);"></div>
<div class="blog-colum">
<div class="titledate">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time( 'F jS, Y' ); ?></li>
</ul>
</div>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php
wp_reset_postdata();
endif; ?>
<?php } ?>
<div class="row paddingbottom">
<div class="pagenav">
<div class="alignleft"><?php previous_posts_link('Newer Posts', $query- >max_num_pages) ?></div>
<div class="alignright"><?php next_posts_link('Older Posts', $query->max_num_pages) ?></div>
</div>
</div>
</div>
<!-- End Posts -->
<?php get_footer();?>
I'm sure that there is just a mistake in my loop. I have essentially got a different layout on the first page to the rest of the pages (as you will see).
It just seems that after page 2, when you go to the 3rd page, it just keeps displaying the 2nd page content.
Any help would be great.
Here is the updated code:
<?php /* Template Name: Blog Page */ ?>
<?php get_header();?>
<!-- Carousel -->
<div class="container fullwidth">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background:url(<?php echo esc_url( home_url( '/' ) ); ?>wp-content/uploads/2018/09/testphoto.jpg);">
<div class="container">
<div class="carousel-caption microstory">
<h1>Backstage Blog</h1>
</div>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div>
</div>
<!-- End Carousel -->
<!-- Posts -->
<div class="container paddingtop paddingbottom">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
// are we on page one?
$query = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=12&paged='. $paged );
if(1 == $paged) { ?>
<?php if ( $query->have_posts() ) { ?>
<div class="row row-eq-height paddingbottom">
<?php $temp_query2 = $wp_query2; ?>
<?php $query3 = new WP_Query( 'post_type=post&order=DESC&orderby=date&posts_per_page=1' ); ?>
<?php while ( $query3->have_posts() ) : $query3->the_post(); ?>
<div class="col col-lg-6 col-md-6 col-sm-6 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage"><?php the_post_thumbnail('full'); ?></div>
<div class="blog-column">
<div class="titledatemain">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time('F jS, Y'); ?></li>
</ul>
<p><?php the_excerpt(); ?></p>
</div>
Read More
</div>
</div>
</div>
<?php endwhile; ?>
<?php $wp_query2 = $temp_query2; ?>
<?php $temp_query = $wp_query; ?>
<?php $query2 = new WP_Query( 'post_type=advert&order=DESC&orderby=date&posts_per_page=1' ); ?>
<?php while ( $query2->have_posts() ) : $query2->the_post();
$advert_url = get_post_meta($post->ID, 'url', true);
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); ?>
<div class="col col-lg-6 col-md-6 col-sm-6 col-xs-12 postpaddingbottom">
<a href="<?php echo $advert_url ?>"><div class="col-lg-12 col-xs-12 advertbox" style="background:url(<?php echo $featured_img_url ?>);">
</div></a>
</div>
<?php endwhile; ?>
<?php $wp_query = $temp_query; ?>
</div>
<div class="row row-eq-height paddingbottom">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-4 col-md-4 col-sm-4 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage blogimagesmall" style="background:url(<?php the_post_thumbnail_url('full'); ?>);"></div>
<div class="blog-colum">
<div class="titledate">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time( 'F jS, Y' ); ?></li>
</ul>
</div>
</div>
</div>
</div>
<?php endwhile;
rewind_posts();
}?>
</div>
<?php } else { ?>
<div class="row row-eq-height paddingbottom">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col col-lg-4 col-md-4 col-sm-4 col-xs-12 postpaddingbottom">
<div class="col-lg-12 col-xs-12">
<div class="featuredimage blogimagesmall" style="background:url(<?php the_post_thumbnail_url('full'); ?>);"></div>
<div class="blog-colum">
<div class="titledate">
<h4><?php the_title(); ?></h4>
<ul class="blog-detail">
<li><i class="fa fa-calendar"></i> <?php the_time( 'F jS, Y' ); ?></li>
</ul>
</div>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php wp_reset_postdata(); ?>
<?php } ?>
<div class="row paddingbottom">
<div class="pagenav">
<div class="alignleft"><?php previous_posts_link('Newer Posts', $query->max_num_pages) ?></div>
<div class="alignright"><?php next_posts_link('Older Posts', $query->max_num_pages) ?></div>
</div>
</div>
</div>
<!-- End Posts -->
<?php get_footer();?>
You should see i'm now running one loop which is nice.. but I have put the first post in its own loop within a loop to show the first post. The issue i'm having now is that I want to on the main loop and only on the first page, have an offset of 1. But I can't work out how to do this just on the first page :(
I'm trying to get Bootstrap's accordion to work in Wordpress, but I'm not sure what else I have to add in the loop. At the moment, its expanding the first panel only no matter which one I click, and not displaying any content.
<div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true">
<?php
$args = array(
'post_type' => 'faq_question',
'category_name' => 'order',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="<?php the_ID(); ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><?php the_title();?></a>
</h4>
</div><!-- end panel heading -->
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="<?php the_ID(); ?>">
<div class="panel-body">
<p><?php the_content(); ?></p>
</div><!-- end panel body -->
</div><!-- end panel collapse -->
</div><!-- end panel default -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- end panel group -->
Appreciate any help, thanks.
Code for Bootstrap 4 with area Closed
<!-- Accordion Collapse Bootstrap 4 -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<?php
$args = array(
'post_type' => 'question',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="card">
<div class="card-header" role="tab" id="<?php the_ID(); ?>">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseOne">
<?php the_Title(); ?>
</a>
</h5>
</div>
<div id="collapse<?php the_ID(); ?>" class="collapse" role="tabpanel" aria-labelledby="heading<?php the_ID(); ?>">
<div class="card-block">
<?php the_Content(); ?>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
<!-- Accordion Collapse Bootstrap 4 -->
I suspect it's because you are ending up with multiple divs with the same id, #collapse1, so Bootstrap doesn't know which one you want to collapse. Try altering your code so that each collapsible panel has a unique id, like this;
(I've stripped out some of the extra attributes so I could more easily see what's going on)
<div class="panel-group" id="accordian">
<?php
$args = array(
'post_type' => 'faq_question',
'category_name' => 'order',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordian" href="#collapse<?php the_ID(); ?>" ><?php the_Title(); ?></a>
</h4>
</div><!-- end panel heading -->
<div id="collapse<?php the_ID ?>" class="panel-collapse collapse">
<div class="panel-body">
<p><?php the_Content(); ?></p>
</div><!-- end panel body -->
</div><!-- end panel collapse -->
</div><!-- end panel default -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- end panel group -->
<?php
$args = array(
'post_type' => 'Help',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="<?php the_ID(); ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian" href="#collapse<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseOne"><?php the_title();?></a>
</h4>
</div><!-- end panel heading -->
<div id="collapse<?php the_ID(); ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="<?php the_ID(); ?>">
<div class="panel-body">
<p><?php the_content(); ?></p>
</div><!-- end panel body -->
</div><!-- end panel collapse -->
</div><!-- end panel default -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- end panel group -->
I'm trying to display a taxonomy term for each post on this page by using
<?php foreach(get_the_terms($wp_query->post->ID, 'stock') as $term) echo $term->slug; ?>
I've used this before in body classes so i can style pages better but i'm not sure why it's not working here...
can anyone help please?
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php $catquery = new WP_Query( 'cat=10&posts_per_page=10' ); while($catquery->have_posts()) : $catquery->the_post(); ?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="container">
<a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapse<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne">
<h4 class="panel-title">
<?php the_title(); ?><div class="stock-level"> <?php foreach(get_the_terms($wp_query->post->ID, 'stock') as $term) echo $term->slug; ?></div>
</h4></a>
</div>
</div>
<div id="collapse<?php echo $i; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-7 col-md-7 col-lg-7 recycled-image">
<?php echo the_post_thumbnail(); ?>
</div>
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $i++; endwhile; ?>
If this is more of an archive page than a single page using $wp_query->post->ID will not return the ID of all posts in the archive.
You would have to do something like:
$args = array('YOUR POST ARGS');
$posts = get_posts($args);
foreach ($posts as $post ) {
setup_postdata( $post );
foreach(get_the_terms(get_the_ID(), 'stock') as $term){
echo $term->slug.'<br />';
}
}
I'm trying to create an accordion where the first one is open (with this CSS that means that the panel has 'in' added to the panel-collapse div).
So, I'm setting the variable $i to 1 and just echoing 'in' when it does equal 1, incrementing after the first. When this is executed, however, all looped posts have 'in' and so are open. Can anyone see what I'm doing wrong?
<?php
$i=1;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<!-- individual panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#faqs" href="#<?php the_ID(); ?>">
<?php the_title(); ?>
</a>
</h4>
</div>
<div id="<?php the_ID(); ?>" class="panel-collapse collapse <?php if ($i=1) { echo 'in'; } ?>">
<div class="panel-body">
<?php the_field('answer'); ?>
</div>
</div>
</div>
<!-- /individual panel -->
<?php $i++; endwhile;
?>
<?php
$i=1;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<!-- individual panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#faqs" href="#<?php the_ID(); ?>">
<?php the_title(); ?>
</a>
</h4>
</div>
<div id="<?php the_ID(); ?>" class="panel-collapse collapse <?php if ($i==1) { echo 'in'; } ?>">
<div class="panel-body">
<?php the_field('answer'); ?>
</div>
</div>
</div>
<!-- /individual panel -->
<?php $i++; endwhile;
?>
It should be $i==1 not $i=1 in your if condition
When you do $i=1 it means you are assigning value 1 to $i , so every time it is successfully satisfying condition.
Here is Comparison Operators :D