Display posts in loop of specific authors - php

Hi guys I'm in a bit of a problem on making a new wordpress website. I have a custom post type called "authors" where I place all authors that will create content in new website. Now after styling with CSS those single author sites I would like to make a loop, which will show their posts in website. How can I achieve that? Right now, when I use standard loop, it displays me posts of all user, but not that specific one, on which site I'm actually in. If it isn't achievable in that way, please tell me how to achieve it in easier way? Maybe I should delete the custom post type, and base on "users". But then how can I pick their "info" into loop (for example name, bio, and how many posts they have written already). Below the code of single-authors.php
<?php get_header(); ?>
<main class="author">
<div class="container">
<h1>Author's articles</h1>
Meet our team <i class="fa fa-angle-double-right" aria-hidden="true"></i>
<div class="breadcrumbs">
<span>You are here:</span>
<ol class="breadcrumb">
<li>INFO</li>
<li>About us</li>
</ol>
</div>
<div class="entries-authors">
<div class="single-author row">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); print_r($thumb[0]); ?>" alt="">
</a>
<div class="author-info">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<h3><?php $title = get_the_title(); echo substr($title, 0 , 100); ?>
</h3>
</a>
<h4>
<?php
$terms = get_the_terms( $post->id, 'job' );
if ( !is_wp_error($terms)) {
$album_categories = array();
foreach ($terms as $term) {
$album_categories[] = $term->name;
$albums = join( ", ", $album_categories );
}
?>
<span><?php echo $albums; ?></span>
<?php } ?>
</h4>
<p>Follow me:</p>
<!--
<div class="author-social">
<ul class="nav nav-pills">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
</ul>
</div>
-->
</div>
<div class="author-bio">
<div class="bio-desc">
<p class="more-toggle">
<?php
echo get_post_field('post_content', $post_id);
?>
</p>
<button class="toggle">Show more <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
</div>
<div class="genre-list"><img src="<?php echo get_template_directory_uri(); ?>/library/images/gamepad.png" alt="">Favourite genre:
<span class="genre-tags">
<?php
$terms = get_the_terms( $post->id, 'genre' );
if ( !is_wp_error($terms)) {
$album_categories = array();
foreach ($terms as $term) {
$album_categories[] = $term->name;
$albums = join( ", ", $album_categories );
}
?>
<span><?php echo $albums; ?></span>
<?php } ?>
</div>
</div>
<div class="author-entries-count">
<span>Entries:</span>
<p href="<?php the_permalink(); ?>" class="count">
<?php
$post_author_id = get_post_field( 'post_author', $post_id );
echo count_user_posts($post_author_id);
?>
</p>
</div>
</div>
</div>
<section class="articles">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#news">News (18)</a></li>
<li><a data-toggle="tab" href="#reviews">Reviews (2)</a></li>
<li><a data-toggle="tab" href="#features">Features (6)</a></li>
</ul>
<div class="tab-content">
<div id="news" class="tab-pane fade in active">
<?php $loop = new WP_Query( array( 'posts_per_page' => 7)); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php echo the_content(); ?>
<?php endwhile; wp_reset_query(); ?>
<div class="single-post">
<div class="thumb">
<img src="<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); print_r($thumb[0]); ?>" alt="">
<span>nintendo</span>
</div>
<div class="content">
<h2>Nintendo Explains Why Zelda Games Rarely Come Out on Time</h2>
<p>Some of the key designers behind Nintendo's famous Legend of Zelda series have spoken up to explain why new installments in the iconic... Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?>
</span>
</div>
<div class="comments-stamp">
<span>
<img src="<?php echo get_template_directory_uri(); ?>/library/images/comments-gray.png" alt=""><?php comments_number( '0', '1', '%' ); ?>
</span>
</div>
</div>
</div>
</div>
<?php
$post_author_id = get_post_field( 'post_author', $post_id );
count_user_posts($post_author_id);
?>
</div>
<div id="reviews" class="tab-pane fade">
</div>
<div id="features" class="tab-pane fade">
</div>
</div>
</section>
<aside class="sidebar">
<sidebar>
<div class="hot-news">
<h3>hot topics</h3>
<?php $loop = new WP_Query( array( 'post_type' => 'hot_topics', 'posts_per_page' => 5)); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="single-hot-news">
<img src="<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); print_r($thumb[0]); ?>">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<h3><?php $title = get_the_title(); echo substr($title, 0 , 40); ?></h3>
</a>
<span><img src="<?php echo get_template_directory_uri(); ?>/library/images/comments.png" alt=""><?php comments_number( '0', '1', '%' ); ?></span>
</div>
<?php endwhile; wp_reset_query(); ?>
<div class="show-more">
See more
</div>
</div>
<div class="interesting-news">
<h3>You might be interested in</h3>
<?php $loop = new WP_Query( array('posts_per_page' => 5)); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="single-interesting-news">
<img src="<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); print_r($thumb[0]); ?>">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<h3><?php $title = get_the_title(); echo substr($title, 0 , 40); ?></h3>
</a>
<span><img src="<?php echo get_template_directory_uri(); ?>/library/images/author-comments.png" alt=""><?php comments_number( '0', '1', '%' ); ?></span>
</div>
<?php endwhile; wp_reset_query(); ?>
<div class="show-more">
See more
</div>
</div>
</sidebar>
</aside>
</div>
</main>
<?php get_footer(); ?>
Cheers

That was what I needed
<?php query_posts('author=' . $post->post_author . '&order=ASC&showposts=7'); ?>

Related

How can I add an if statement to display conditional HTML using PHP without using the echo function

I am trying to display a piece of HTML code I added to a WordPress website but I do not want to use the echo function as it affects the loop. I had to use a WP_query which works in a certain way to get what I want to do. My code works great but I don't want it on certain pages.
This is what I have tried so far
<?php
if(!is_front_page()){
<div class="slider-container">
<h4 class="slider-header">
<span class="slider-header_text">Trending</span>
</h4>
<div class="slider">
<div class="carousel-container">
<div class="carousel-inner">
<div class="track">
<!--Beginning of responsive slider-->
<?php $custom_query = new WP_Query(array(
'posts_per_page' => 12,
'category_name' => 'featured-posts',
));
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<div class="card-container">
<a href="<?php the_permalink(); ?>" class="card">
<div class="img">
<img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="">
</div>
<div class="info">
<h5><?php the_title(); ?></h5>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div>
</div>
<div class="nav">
<button class="prev">
<i class="fas fa-angle-left"></i>
</button>
<button class="next">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
}
?>
But this immediately throws an error.
I haven't checked if your code works. But the provided code without syntax errors would be:
<?php
if (!is_front_page()) {
?>
<div class="slider-container">
<h4 class="slider-header">
<span class="slider-header_text">Trending</span>
</h4>
<div class="slider">
<div class="carousel-container">
<div class="carousel-inner">
<div class="track">
<!--Beginning of responsive slider-->
<?php $custom_query = new WP_Query(array(
'posts_per_page' => 12,
'category_name' => 'featured-posts',
));
while ($custom_query->have_posts()) : $custom_query->the_post(); ?>
<div class="card-container">
<a href="<?php the_permalink(); ?>" class="card">
<div class="img">
<img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="">
</div>
<div class="info">
<h5><?php the_title(); ?></h5>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query
?>
</div>
</div>
<div class="nav">
<button class="prev">
<i class="fas fa-angle-left"></i>
</button>
<button class="next">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
<?php } ?>

Bootstrap carousel for dynamic content in Wordpress

So I've created a bootstrap carousel in WordPress and it works fine. My only problem is that when I click on the image it doesn't take me to the specific article. How Can I solve this? Here is my Code:
<div class="container slider-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slider = get_posts(array('post_type' => 'post', 'posts_per_page' => 3)); ?>
<?php $count = 0; ?>
<?php foreach($slider as $slide): ?>
<div class="item <?php echo ($count == 0) ? 'active' : ''; ?>">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive"/>
</a>
</div>
<?php $count++; ?>
<?php endforeach; ?>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Change <?php the_permalink(); ?> to <?php echo get_permalink($slide->ID); ?>.
Why:
the_permalink() gets the current permalink for the current post in the loop. You are not in the loop, you are simply querying posts. By changing to get_permalink() and passing an ID into the function, you are getting the specific permalink for this slide.
See get_permalink() here.
here is my purposition, i used it on my websites, hope to help you !
`<?php
$args = array(
'post_type' => 'slide',
'posts_per_page' => -1,
'order' => 'ASC',
);
$slide = new WP_Query($args);?>
<?php if ($slide->have_posts()): ?>
<div id="slider">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel" data-interval=10000>
<div class="">
<ol class="carousel-indicators">
<?php $i = 0;while ($slide->have_posts()): $publicity->the_post();?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>" class="<?php if ($i === 0): ?>active<?php endif;?>"></li>
<?php $i++; endwhile;?>
</ol>
<div class="carousel-inner">
<?php $i = 0;while ($slide->have_posts()): $slide->the_post();?
<div class="carousel-item <?php if (0 == $i) {echo ' active';}?>" style="background:url('<?php the_post_thumbnail_url('full');?>') center center no-repeat; background-size: cover; min-height: 100vh;">
<div class="carousel-caption d-none d-md-block">
<div class="row align-items-center ">
<div class="col-lg-4 title">
<span><?php the_title();?></span>
<h2><?php the_content();?></h2>
</div>
</div>
</div>
</div>
<?php $i++;endwhile;?>
</div>
</div>
</div>
</div>
</div>
<?php wp_reset_postdata();endif;?>
`

wordpress PHP to show 3 slide per page with bootstrap carousel

hello i tried to show 3 slide per page with bootstrap carousel but when I use wordpress php query it showed just 1 slide per page :( and for show another slide i should click on next... please see this http://bootsnipp.com/snippets/featured/responsive-moving-box-carousel
I tried to code this by php query .
my php code :
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<?php
$counter=0;
?>
<div class="item <?php if($counter==0){echo 'active';} ?>">
<ul class="thumbnails">
<?php
$my_query = new WP_Query('showposts=3&cat=1');
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li class="col-sm-4">
<div class="shakhes">
<?php the_post_thumbnail('shakhes') ?>
<div class="caption"><a href="<?php the_permalink(); ?>">
<h4><div class="livicon" data-name="chevron-left" data-size="30" data-color="#555" data-hovercolor="#555" ></div><?php the_title(); ?></h4></a>
<p><?php the_content_rss('', TRUE, '', 20); ?></p>
<div class="moreshakhes"> مشاهده ادامه مطلب</div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php $counter++; ?>
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->
You have written a wrong sctipt and used many depricated wordpress functions. the_content_rss function is deprecated and use the_content_feed and to show posts you have to use 'posts_per_page' instead showposts . I have rewritten your script with proper functions. Copy it from below and paste it to your template.I have checked the script and its working. Let me know if something wrong happen with you..
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<?php
$counter=0;
?>
<div class="item <?php if($counter==0){echo 'active';} ?>">
<ul class="thumbnails">
<?php
$my_query = new WP_Query(array(
'posts_per_page' => 5,
'cat' => '1',
)
);
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li class="col-sm-4">
<div class="shakhes">
<?php the_post_thumbnail('shakhes') ?>
<div class="caption"><a href="<?php the_permalink(); ?>">
<h4><div class="livicon" data-name="chevron-left" data-size="30" data-color="#555" data-hovercolor="#555" ></div><?php the_title(); ?></h4></a>
<p><?php the_content_feed('', TRUE, '', 20); ?></p>
<div class="moreshakhes"> مشاهده ادامه مطلب</div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php $counter++; ?>
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->
This is the solution I came up with:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
<div class="carousel-inner">
<?php $args = array(
'post_type' => 'product',
'posts_per_page' => 8,
);
$query = new WP_Query( $args );
$i = 1;
$next_item = true;
while($query->have_posts()) : $query->the_post();
if ($i == 1) {
echo '<div class="item carousel-item active">';
} elseif ($next_item == true) {
echo '<div class="item carousel-item">';
}
?>
<div class="col-sm-3">
<div class="thumb-wrapper">
<div class="img-box">
<?php the_post_thumbnail();?>
<h4><?php the_title();?></h4>
</div>
<div class="thumb-content">
<?php the_excerpt();?>
Read More
</div>
</div>
</div>
<?php
$next_item = false;
if ($i % 4 == 0) {
echo '</div>';
$next_item = true;
}
$i++;
endwhile
?>
</div>
<a class="carousel-control-prev pull-left" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control-next pull-right" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>

Wordpress Bootstrap tabs not showing post limit

I've set my loop to display 5 posts for each tab (category). But it's not doing that, even when there are 5 or more posts in a category. It won't do more than 4. I'm not sure why. Following is my code (I'm using ACF to choose which categories to display from the backend). Any help would be appreciated (note also that I'm formatting the first item in each tab differently):
<!-- Nav Tabs -->
<ul class="nav nav-pills">
<?php if (have_rows('home_categories')) {
$i = 0;
while (have_rows('home_categories')) {
the_row();
$term = get_sub_field('categories'); ?>
<li class="<?php if ($i == 0) { echo ' active'; }?>">
<?php echo $term->name; ?>
</li>
<?php $i++;
}
} ?>
</ul>
<!-- Tab Content -->
<div class="tab-content clearfix">
<?php $home_categories = get_field("home_categories");
foreach($home_categories as $key => $home_cat) {
$term_id = $home_cat['categories']->term_id;
$term_name = $home_cat['categories']->name;
?>
<div class="tab-pane fade<?php if ($key == 0) { echo ' in active'; }?>" id="tab-pane-<?php echo $key; ?>">
<div class="posts-box row">
<div class="box-content">
<ul>
<?php $args = array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => $term->taxonomy,
'terms' => array($term_id)
)
),
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'ASC',
);
$query = new WP_Query( $args );
$count = 0;
foreach($query->posts as $post) {
$count++;
if ($count == 1) {
?>
<div class="col-xs-12 col-sm-6 col-md-6">
<li class="first-news clearfix">
<a href="<?php echo get_permalink($post->ID); ?>" title="<?php echo get_the_title($post->ID); ?>" data-toggle="tooltip" rel="bookmark">
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div class="post-thumbnail" style="background-image: url(<?php echo $feat_image; ?>); height: 200px; background-size: cover; background-position: center center;">
<span class="fa overlay-icon"></span>
</div>
</a>
<a title="<?php the_title($post->ID) ?>" href="<?php echo get_permalink($post->ID); ?>" rel="bookmark">
<h3 class="post-box-title"><?php echo get_the_title($post->ID); ?></h3>
</a>
<p class="post-meta">
<span class="darwin-date">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date($post->ID); ?>
</span>
<span class="post-comments">
<i class="fa fa-comments"></i>
<a href="<?php echo get_comments_link( $post->ID ); ?>">
<?php comments_number( '0' , '1' , '%' ); ?>
</a>
</span>
</p>
<div class="entry">
<p><?php echo wp_trim_words($post->post_content, 20, '...'); ?></p>
<div class="more-posts">
<a class="more-link" title="<?php echo get_the_title($post->ID); ?>" href="<?php the_permalink($post->ID); ?>" data-toggle="tooltip">Read More »</a>
</div>
</div>
</li>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="container-fluid">
<?php } else { ?>
<li class="other-news row">
<a href="<?php echo get_permalink($post->ID); ?>" title="<?php echo get_the_title($post->ID); ?>" data-toggle="tooltip" rel="bookmark">
<div class="col-md-3" style="background-image: url(<?php echo $feat_image; ?>); height: 100px; background-size: cover; background-position: center center;">
<span class="fa overlay-icon"></span>
</div>
</a>
<div class="news-info col-md-9">
<h4 class="post-box-title">
<a title="<?php the_title($post-ID) ?>" href="<?php the_permalink($post->ID); ?>"><?php echo get_the_title($post->ID); ?></a>
</h4>
<p class="post-meta">
<span class="darwin-date">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date($post->ID); ?>
</span>
<span class="post-cats">
<i class="fa fa-folder"></i>
<?php printf('%1$s', get_the_category_list(', ' ) ); ?>
</span>
<span class="post-comments">
<i class="fa fa-comments"></i>
<a href="<?php echo get_comments_link( $post->ID ); ?>">
<?php comments_number( '0' , '1' , '%' ); ?>
</a>
</span>
<span class="post-views">
<i class="fa fa-eye"></i>
<?php //echo getPostViews(get_the_ID()); ?>
</span>
</p>
</div>
</li>
<?php $count++; }
} ?>
</div>
</div>
</ul>
</div>
</div>
</div>
<?php } ?>
</div>
Thanks in advance.

Integrating Bootstrap carousel in WordPress without plugin

I have integarted bootstrap carousel into my wordpress. The slides will be taken from the posts which will be tagged as "featured" so only 5 recently enter "featured" posts will be shown.
Below is my code:
<div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs">
<ol class="carousel-indicators">
<li data-target="#carousel-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-captions" data-slide-to="2" class=""></li>
<li data-target="#carousel-captions" data-slide-to="3" class=""></li>
<li data-target="#carousel-captions" data-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<?php $the_query = new WP_Query( 'tag=featured&orderby=date&posts_per_page=5' ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item">
<a href="<?php the_permalink() ?>">
<img src="<?php the_field('header_banner', $post_id); ?>" alt="">
<div class="carousel-caption">
<h3><?php the_field('year', $post_id); ?></h3><span class="name">Make<br><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span><hr>
<p><?php the_field('mileage', $post_id); ?> Miles | <?php the_field('exterior_color', $post_id); ?> Color<br><br><?php echo homepage_carousel_excerpt(15); ?></p><span class="btn btn-default">Details →</span>
</div></a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>
<a class="left carousel-control" href="#carousel-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
The problem is It doesn't slide because the "active" class is not working statically.
HOw do I fix this?
Thanks
To avoid having to query twice, you can set a variable set to 1 outside your loop. In the loop, you add the "active" class when it's equal to 1, then you increment it.
<?php
// Previous code here...
$i = 1;
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item<?php if ($i == 1) echo 'active'; ?>">
</div>
<?php
$i++;
endwhile;
wp_reset_postdata();
?>
This is the solution I came up with:
<?php
$args = array(
'post_type' => 'slides',
'oderby' => 'menu_order',
'posts_per_page' => -1
);
$slides = new WP_Query( $args );
if( $slides->have_posts() ): ?>
<div class="row">
<div class="col-xs-12">
<!--Twitter bootstrap Photo carrousel-->
<div id="myCarousel" class="carousel slide center-block" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while( $slides->have_posts() ) : $slides->the_post(); $index++ ?>
<?php if ( $index == 1 ): ?>
<div class="item active">
<?php else: ?>
<div class="item">
<?php endif; ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
</div>
<?php endwhile; ?>
<?php endif; ?>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!-- carrousel ends here -->
I learnt this by watching the following video: Integrating the Bootstrap Carousel into the WordPress theme by user Ezer Sanbe. All credits to him.
The youtube video or the channel for this user are no longer available, sorry
Hope this helps
Limit the first query to 1 post. In that first loop, set the carousel item class to active. Reset the query and run a second loop, offset by one, and negate the active class, like so:
<div class="carousel-inner">
<?php
$the_query = new WP_Query(array(
'post_type' =>'post',
'posts_per_page' => 1
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item active">
First Slide
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php
$the_query = new WP_Query(array(
'post_type' =>'post',
'offset' => 1
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item">
Remaining Slides
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
Bootstrap 3 with custom post type (here named "diapositives"):
<!-- Define the loop -->
<?php $diapositivesloop = new WP_Query( array( 'post_type' => 'diapositives', 'posts_per_page' => -1 ) ); ?>
<?php $i=1; ?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while ( $diapositivesloop->have_posts() ) : $diapositivesloop->the_post(); ?>
<?php the_content(); ?>
<div class="item <?php if ($i == 1) echo 'active'; ?>">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="...">
<div class="carousel-caption">
<h3><?php the_title(); ?></h3>
</div>
</div>
<!-- End of the loop -->
<?php $i++; ?>
<?php endwhile; wp_reset_query(); ?>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Integrating Bootstrap carousel in WordPress without plugin
<!-- Carousel items -->
<div class="carousel-inner">
<?php $slider = new WP_Query(array(
'post_type' => 'slider',
'posts_per_page' => 1,
)); ?>
<?php
if ( have_posts() ) {
$x=0;
while ( $slider->have_posts() ) {
$x++;
$slider->the_post(); ?>
<div class="<?php if($x==1){echo 'active'} ?> item">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</div>
<?php } // end while
} // end if
?>
</div>
<!-- Carousel nav -->
<ol class="carousel-indicators">
<?php for($i=0; $i<$x; $i++; ) { ?>
<li data-target="#carousel" data-slide-to="<?php echo $i; ?>" class="<?php if($i==0){ echo 'active' }?>"></li>
<?php } ?>
</ol>
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
<div id="carousel-1" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$slider = new WP_Query(array(
'post_type' => 'slider',
'posts_per_page' => 7,
));
?>
<?php
if ( have_posts() ) {
$x=0;
while ( $slider->have_posts() ) {
$x++;
$slider->the_post(); ?>
<!-- Begin Slide 1 -->
<div class="item <?php if($x==1){ echo 'active'; }?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('slider-img'); ?>
<?php endif; ?>
<div class="carousel-caption">
<h3 class="carousel-title hidden-xs"><?php the_title(); ?></h3>
<p class="carousel-body"><?php the_content(); ?></p>
</div>
</div>
<!-- End Slide 1 -->
<?php } // end while
wp_reset_postdata();
} // end if
?>
</div>
<!-- Indicators -->
<ol class="carousel-indicators visible-lg">
<?php
for($i=0; $i<$x; $i++){ ?>
<li data-target="#carousel-1" data-slide-to="<?php echo $i; ?>" class="<?php if( $i==0 ){echo 'active'; }?>"></li>
<?php }
?>
</ol>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

Categories