Looping through posts displaying 4 at a time - php

I am trying to make a slider cycle through the custom posts in Wordpress, displaying 4 at a time.
I would like it to cycle through the posts and just loop back to the first one when it has reached the last post.
My code is:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$args = array(
'posts_per_page' => '4',
'post_type' => 'dogs',
);
$myDogs = new WP_Query( $args ); ?>
<?php while ( $myDogs->have_posts() ) : $myDogs->the_post();?>
<div id="sl-cont" class="col-sm-12 col-md-3 col-lg-3">
<div class="well">
<?php the_post_thumbnail('slider-size'); ?>
<div class="dog-caption">
<p><span class="title"><?php the_title(); ?></span><br/>
<?php the_excerpt(); ?><br/>
Read more >> </p>
</div>
</div><!--end of well-->
</div><!--end of container-->
<?php endwhile;
wp_reset_postdata();?>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<?php
$args = array(
'posts_per_page' => '4',
'post_type' => 'dogs',
'offset' => 1
);
$myDogs = new WP_Query( $args ); ?>
<?php while ( $myDogs->have_posts() ) : $myDogs->the_post();?>
<div id="sl-cont" class="col-sm-12 col-md-3 col-lg-3">
<div class="well">
<?php the_post_thumbnail('slider-size'); ?>
<div class="dog-caption">
<p><span class="title"><?php the_title(); ?></span><br/>
<?php the_excerpt(); ?><br/>
Read more >> </p>
</div>
</div><!--end of well-->
</div><!--end of container-->
<?php endwhile;
wp_reset_postdata();?>
</div>
<!--/row-->
</div>
<!--/item-->
</div> <!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="<?php bloginfo('template_directory'); ?>/img/left-paw.png"> </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="<?php bloginfo('template_directory'); ?>/img/right-paw.png"></a>
`
Can anyone help?

Related

Is it possible to redirect the user to the first page of pagination if the pagination is empty In wordpress

I am trying to redirect the user to the first page of the pagination if the pagination is empty.
I have three bootstrap tabs (Both, Blog, News). The blog tab contains 5 posts. The news tab contains more than 12 posts. I am displaying 6 posts per page. The issue here is that if I am on the second page of News tab and click the Blog tab, the second page of the blog tab is opening (which does not exist).
For better Understanding Here is my code.
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
Section A
</li>
<li class="nav-item">
Section B
</li>
<li class="nav-item">
Section C
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="sectionA" class="tab-pane fade show active">
<?php
if(1 != $paged) {
}
?>
<section class="vendor-section-2 mt-5">
<div class="container">
<div class="row">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query(
array(
'posts_per_page' => 6,
'post_type' => 'post',
'paged' => $paged
)
);
$page_amount = $the_query->max_num_pages;
?>
<div class="container pagination-count">
<div class="row">
<div class="col-6">
<p>Page <span><?php echo $paged ?></span> of <span><?php echo $page_amount ?></span> </p>
</div>
</div>
</div>
<?php
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post();
$post_id = get_the_ID();
?>
<div class="col-md-4 mt-5">
<div class="card">
<img src="<?php the_post_thumbnail_url() ?>" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title"><?php the_title() ?></h2>
<p class="card-text"><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" class="read-more" >
<svg xmlns="http://www.w3.org/2000/svg" width="24.111" height="23.646" viewBox="0 0 24.111 23.646" style="margin-right: 10px; margin-top: -5px;">
<path
id="Path_84"
data-name="Path 84"
d="M9.544.241a3.061,3.061,0,0,1,3.348.642c1.4,1.427,4.322,1.638,5.638,2.976,1.49,1.518,1.358,4.151,2.856,5.584a7.9,7.9,0,0,1,2.163,8.913,7.942,7.942,0,0,1-3.789,4.323c-6.319,2.6-14.617-.268-18.3-5.889-1.8-2.745-2.12-6.848.122-9.133C3.947,5.245,5.608,1.887,9.544.241Z"
fill="#f3943f"
/>
</svg>
Read More
</a>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;?>
<div class="next-prev-btn">
<!-- then the pagination links -->
<?php next_posts_link( 'Next →', $the_query ->max_num_pages); ?>
<?php previous_posts_link( 'Previous ← ' ); wp_reset_query();?>
</div>
</div>
</div>
</section>
</div>
<div id="sectionB" class="tab-pane fade">
<section class="vendor-section-2 mt-5">
<div class="container">
<div class="row">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query(
array(
'posts_per_page' => 6,
'post_type' => 'post',
'category_name' => 'blog',
'paged' => $paged
)
);
$page_amount = $the_query->max_num_pages;
?>
<div class="container pagination-count">
<div class="row">
<div class="col-6">
<p>Page <span><?php echo $paged ?></span> of <span><?php echo $page_amount ?></span> </p>
</div>
</div>
</div>
<?php
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post();
$post_id = get_the_ID();
?>
<div class="col-md-4 mt-5">
<div class="card">
<img src="<?php the_post_thumbnail_url() ?>" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title"><?php the_title() ?></h2>
<p class="card-text"><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" class="read-more" >
<svg xmlns="http://www.w3.org/2000/svg" width="24.111" height="23.646" viewBox="0 0 24.111 23.646" style="margin-right: 10px; margin-top: -5px;">
<path
id="Path_84"
data-name="Path 84"
d="M9.544.241a3.061,3.061,0,0,1,3.348.642c1.4,1.427,4.322,1.638,5.638,2.976,1.49,1.518,1.358,4.151,2.856,5.584a7.9,7.9,0,0,1,2.163,8.913,7.942,7.942,0,0,1-3.789,4.323c-6.319,2.6-14.617-.268-18.3-5.889-1.8-2.745-2.12-6.848.122-9.133C3.947,5.245,5.608,1.887,9.544.241Z"
fill="#f3943f"
/>
</svg>
Read More
</a>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;?>
<div class="next-prev-btn">
<!-- then the pagination links -->
<?php next_posts_link( 'Next →', $the_query ->max_num_pages); ?>
<?php previous_posts_link( 'Previous ← ' ); wp_reset_query();?>
</div>
</div>
</div>
</section>
</div>
<div id="sectionC" class="tab-pane fade">
<section class="vendor-section-2 mt-5">
<div class="container">
<div class="row">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query(
array(
'posts_per_page' => 6,
'post_type' => 'post',
'category_name' => 'news',
'paged' => $paged
)
);
$page_amount = $the_query->max_num_pages;
?>
<div class="container pagination-count">
<div class="row">
<div class="col-6">
<p>Page <span><?php echo $paged ?></span> of <span><?php echo $page_amount ?></span> </p>
</div>
</div>
</div>
<?php
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post();
$post_id = get_the_ID();
?>
<div class="col-md-4 mt-5">
<div class="card">
<img src="<?php the_post_thumbnail_url() ?>" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title"><?php the_title() ?></h2>
<p class="card-text"><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" class="read-more" >
<svg xmlns="http://www.w3.org/2000/svg" width="24.111" height="23.646" viewBox="0 0 24.111 23.646" style="margin-right: 10px; margin-top: -5px;">
<path
id="Path_84"
data-name="Path 84"
d="M9.544.241a3.061,3.061,0,0,1,3.348.642c1.4,1.427,4.322,1.638,5.638,2.976,1.49,1.518,1.358,4.151,2.856,5.584a7.9,7.9,0,0,1,2.163,8.913,7.942,7.942,0,0,1-3.789,4.323c-6.319,2.6-14.617-.268-18.3-5.889-1.8-2.745-2.12-6.848.122-9.133C3.947,5.245,5.608,1.887,9.544.241Z"
fill="#f3943f"
/>
</svg>
Read More
</a>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;?>
<div class="next-prev-btn">
<!-- then the pagination links -->
<?php next_posts_link( 'Next →', $the_query ->max_num_pages); ?>
<?php previous_posts_link( 'Previous ← ' ); wp_reset_query();?>
</div>
</div>
</div>
</section>
</div>
</div>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>

Wordpress - Custom loop query for displaying custom post type

I'm messing around with my code. My goal is to display 4 custom post type on the homepage in the HTML layout I've created. Here's my code. Actually I can get the href but I can't loop the code not even achieve my scope.
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<div class="project-name"> <?php // WP_Query arguments
$args = array(
'name' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4',
);
// The Query
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
?>
Project Name
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Assuming the post type you want is case-studies you should name the key post_type and not name. You also have to place the column inside the loop and close it afterwards. You also missed a </div> tag.
<?php $query = new WP_Query( [
'post_type' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4',
] ); ?>
<?php if ( $query->have_posts() ) : ?>
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<div class="project-name">
<h2><?php the_title(); ?></h2>
</div>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
You should put your code in the looping area. What i can see, you missed the endwhile also.
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<?php // WP_Query arguments
$args = array(
'name' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4'
);
// The Query
$query = new WP_Query($args);
while ($query->have_posts()):
$query->the_post(); ?>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php
get_the_permalink();
?>" title="<?php
get_the_title();
?>">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php
the_post_thumbnail_url();
?>');">
<div class="project-name">
Project Name
</div>
</div>
</a>
</div>
<?php
endwhile;
?>
</div>
</div>
</div><!--.roundedframe-->
Try this and let me know. It may help you. Before that you should learn about wp_query
https://codex.wordpress.org/Class_Reference/WP_Query

Loop through WP_Query twice for a carousel

I am trying to build an image slider / carousel using Bootstrap. The images should be shown from the Wordpress post categories 'Aktuell' and 'Referenz' which I have created. The code below works perfectly for me when I want to show 1 image from the category 'Aktuell' and 3 images from the category 'Referenz'.
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs ">
<div class="carousel-inner">
<?php
$the_query = new WP_Query(array(
'category_name' => 'Aktuell',
'posts_per_page' => 1,
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item active">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('full'); ?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item active -->
<?php
endwhile;
wp_reset_postdata();
?>
<?php
$the_query = new WP_Query(array(
'category_name' => 'Referenz',
'posts_per_page' => 3,
'orderby' => 'rand'
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('slider');?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
What I want to do is to show 3 images from each category. So when I use 'posts_per_page' => 3, on line #6, the slide function will not work anymore when I click on the left or right arrows to slide. Instead the images are getting displayed below each other.
how can I get this fixed?
I could find a way to make it work like this:
function the_carousel_item($post, $post_per_page, $offset = 0, $orderby = 'rand', $active = NULL) {
$the_query = new WP_Query(array(
'category_name' => $post,
'posts_per_page' => $post_per_page,
'orderby' => $orderby,
'offset' => $offset
));
$active_css_class = (isset($active)) ? $active : '';
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item <?= $active_css_class ?>">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('slider');?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
}
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs ">
<div class="carousel-inner">
<?php
// Display the starter image from the post 'Aktuell'
the_carousel_item('Aktuell', 1, 0, 'ID', 'active');
// Display posts from 'Aktuell'
the_carousel_item('Aktuell', 3, 1, 'ID');
// Display posts from 'Referenz'
the_carousel_item('Referenz', 3);
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
<div class="container inner-cont container-contact-field">
<div class="row mobile contact-field">
<div class="col-xs-8 col-xs-offset-2">
<?php dynamic_sidebar('footer_1'); ?>
<?php dynamic_sidebar('footer_2'); ?>
</div>
</div>
</div>
You want showing 1 image above (Aktuell) and 3 image slider below (Referenz), or 1 above 1 slider, or what?
If 3 image below, your slider will not work because you already set 'posts_per_page' => 3

Wordpress - WP_Query, pulling in multiple post

Somewhat new to Wordpress and PHP and trying to work though this issue. I have a page (http://www.moderateindividual.com.php53-13.dfw1-1.websitetestlink.com/) and twards the bottom you can see a section with 6 images, I need those to be pulled in from a custom post type with a custom taxonomy. What I have now its just pulling in one post over and over, how would I make this pull in the 6 latest post in that category?
Here is my code I have so far
<?php
//Define your custom post type name in the arguments
$args = array(
'post_type' => 'news',
'tax_query' => array(
array(
'taxonomy' => 'news_category',
'field' => 'id',
'terms' => '47',
),
),
);
//Define the loop based on arguments
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="st_views">
<div class="tab-1 st_view">
<div class="st_view_inner">
<div class="row cat-title">
<p><span>As To Them Shall Seem Most Likely…</span> / Nullam quis dolor interdum erat dapibus aliquam. View all</p>
</div>
<div class="row top-stories">
<div class="small-12 medium-8 large-8 columns main-news img-wrap"> <?php the_post_thumbnail('home-featured-thumb'); ?>
<div class="story-title">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>" />Read More</a></p>
</div>
</div>
<!--End Large-8 Columns-->
<div class="large-4 small-12 medium-4 columns">
<div class="row news-top img-wrap"> <a href="<?php the_permalink(); ?>" /><?php the_post_thumbnail('home-thumb'); ?></a>
<div class="story-title-sub">
<a href="<?php the_permalink(); ?>" /><h2><?php the_title(); ?></h2></a>
</div>
</div>
<div class="row news-bottom img-wrap"> <a href="<?php the_permalink(); ?>" /><?php the_post_thumbnail('home-thumb'); ?></a>
<div class="story-title-sub">
<a href="<?php the_permalink(); ?>" /><h2><?php the_title(); ?></h2>
</div>
</div>
</div>
<!--End Large-4 Columns-->
</div>
<div class="row bottom-stories">
<div class="large-4 medium-4 small-12 columns img-wrap"> <a href="<?php the_permalink(); ?>" /><?php the_post_thumbnail('home-thumb'); ?></a>
<div class="story-title-sub">
<a href="<?php the_permalink(); ?>" /><h2><?php the_title(); ?></h2>
</div>
</div>
<!--End Large-4 Columns-->
<div class="large-4 medium-4 small-12 columns img-wrap"> <a href="<?php the_permalink(); ?>" /><?php the_post_thumbnail('home-thumb'); ?></a>
<div class="story-title-sub">
<a href="<?php the_permalink(); ?>" /><h2><?php the_title(); ?></h2></a>
</div>
</div>
<!--End Large-4 Columns-->
<div class="large-4 medium-4 small-12 columns img-wrap"> <a href="<?php the_permalink(); ?>" /><?php the_post_thumbnail('home-thumb'); ?></a>
<div class="story-title-sub">
<a href="<?php the_permalink(); ?>" /><h2><?php the_title(); ?></h2></a>
</div>
</div>
<!--End Large-4 Columns-->
</div>
<!--End Row-->
</div>
<!--End st view inner-->
</div>
<?php endwhile;?>
<!--End tab 1 st view-->
The code above was me just searching the google for something that might work.
Any help or advice would be great.
you just have to make 2 loops and use the offset parameter
<div class="st_views">
<div class="tab-1 st_view">
<div class="st_view_inner">
<?php
//Define your custom post type name in the arguments
$args = array(
'post_type' => 'news',
'tax_query' => array(
array(
'taxonomy' => 'news_category',
'field' => 'id',
'terms' => '47',
),
),
'posts_per_page' => 3
);
//Define the loop based on arguments
$loop = new WP_Query( $args ); if ( $loop->have_posts() ):?>
<div class="row cat-title">
<p><span>As To Them Shall Seem Most Likely…</span> / Nullam quis dolor interdum erat dapibus aliquam. View all</p>
</div>
<div class="row top-stories">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if( $loop->current_post == 0 ){?>
<div class="small-12 medium-8 large-8 columns main-news img-wrap"> <?php the_post_thumbnail('home-featured-thumb'); ?>
<div class="story-title">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?>Read More</p>
</div>
</div>
<!--End Large-8 Columns-->
<?php } elseif( $loop->current_post == 1 ){?>
<div class="large-4 small-12 medium-4 columns">
<div class="row news-top img-wrap"> <?php the_post_thumbnail('home-thumb'); ?>
<div class="story-title-sub">
<h2><?php the_title(); ?></h2>
</div>
</div>
<?php } elseif( $loop->current_post == 2 ){?>
<div class="row news-bottom img-wrap"> <?php the_post_thumbnail('home-thumb'); ?>
<div class="story-title-sub">
<h2><?php the_title(); ?></h2>
</div>
</div>
</div>
<!--End Large-4 Columns-->
<?php }?>
<?php endwhile;?>
</div>
<?php endif; //End Top Stories?>
<?php
//Define your custom post type name in the arguments
$args2 = array(
'post_type' => 'news',
'tax_query' => array(
array(
'taxonomy' => 'news_category',
'field' => 'id',
'terms' => '47',
),
),
'posts_per_page' => 3,
'offset' => -3
);
//Define the loop based on arguments
$loop2 = new WP_Query( $args2 ); if ( $loop2->have_posts() ):?>
<div class="row bottom-stories">
<?php while ( $loop2->have_posts() ) : $loop2->the_post(); ?>
<div class="large-4 medium-4 small-12 columns img-wrap"> <?php the_post_thumbnail('home-thumb'); ?>
<div class="story-title-sub">
<h2><?php the_title(); ?></h2>
</div>
</div>
<!--End Large-4 Columns-->
<?php endwhile; ?>
</div>
<!--End Bottom Row-->
<?php endif;?>
</div>
<!--End tab 1 st view inner-->
</div>
<!--End tab 1 st view-->
</div>
<!--End st view-->

Wordpress Loop in custom pages template for blog list is not working

I have created a Blog list through wordpress custom page template and assigned the same by creating a blog page.
But I am wondering the loop is correct but its not displaying any result.
http://projects.dev2d.com/msleximus/blog/
What to do. My Code ....
<?php
/*
Template Name: Blog
*/
get_header(); ?>
<!-- #primary -->
<div role="main" class="main">
<section class="page-top">
<div class="container">
<div class="row">
<div class="span12">
<ul class="breadcrumb">
<li>Home <span class="divider">/</span></li>
<li class="active">
<?php wp_title(); ?>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<h2> Blog </h2>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="span9">
<?php
if ( is_page() ) {
$category = get_post_meta( $posts[0]->ID, 'category', true );
$cat = get_cat_ID( $category );
}
if ( $cat ) :
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$post_per_page = 4; // -1 shows all posts
$do_not_show_stickies = 1; // 0 to show stickies
$args=array (
'category__in' => array( $cat ),
'post_type'=> 'post',
'orderby' => 'date',
'order' => 'DESC',
'paged' => $paged,
'posts_per_page' => $post_per_page,
'ignore_sticky_posts' => $do_not_show_stickies
);
$temp = $wp_query; // assign original query to temp variable for later use
global $wp_query;
$wp_query = null;
$wp_query = new WP_Query( $args );
if ( $wp_query->have_posts() ) :
while ( $wp_query->have_posts() ) : $wp_query->the_post();
?>
<div class="blog-posts">
<article <?php post_class() ?> id="post-<?php the_ID(); ?>class="post post-medium-image">
<div class="row">
<div class="span4">
<div class="post-image">
<div class="flexslider flexslider-center-mobile flexslider-simple" data-plugin-options='{"controlNav":false, "animation":"slide", "slideshow": false, "maxVisibleItems": 1}'>
<ul class="slides">
<li> <img class="img-rounded" src="<?php the_post_thumbnail('medium'); ?>" alt="featured image"></li>
</ul>
</div>
</div>
</div>
<div class="span5">
<div class="post-content">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a></h2>
<?php the_content( 'read more »' ); ?>
</div>
</div>
</div>
<div class="row">
<div class="span9">
<div class="post-meta"> <span><i class="icon-calendar"></i>
<?php the_time( 'F jS, Y' ) ?>
</span> <span><i class="icon-user"></i> By <a href="#">
<?php the_author() ?>
</a> </span> <span><i class="icon-tag"></i>
<?php the_tags( 'Tags: ', ', ', '<br />' ); ?>
,</span> <span><i class="icon-comments"></i>
<?php comments_popup_link( 'No Comments »', '1 Comment »', '% Comments »' ); ?>
Read more... </div>
</div>
</div>
</article>
<?php endwhile; ?>
<div class="pagination pagination-large pull-right">
<div class="alignleft">
<?php next_posts_link( '« Older Entries' ) ?>
</div>
<div class="alignright">
<?php previous_posts_link( 'Newer Entries »' ) ?>
</div>
</div>
</div>
</div>
<?php endif; // if ( $wp_query->have_posts() ) ?>
<?php $wp_query = $temp; //reset back to original query ?>
<div class="span3">
<aside class="sidebar">
<?php get_search_form(); ?>
<?php get_sidebar(); ?>
<div class="tabs">
<ul class="nav nav-tabs">
<li class="active"><i class="icon-star"></i> Popular</li>
<li>Recent</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="popularPosts">
<?php fanciedmedia_popular_posts(5); ?>
</div>
<div class="tab-pane" id="recentPosts">
</div>
</div>
</div>
<hr />
</aside>
</div>
<?php else : ?>
<div class="row">
<div class="span12">
<div class="post-content">
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
</div>
</div>
</div>
<?php endif; // if ( $cat ) ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Use this one and do let me know ..
<div class="container">
<div class="row">
<div class="span9">
<div class="blog-posts">
<?php query_posts('category_name = Category&showposts=10'); ?>
<?php while (have_posts()) : the_post() ?>
<article <?php post_class() ?> id="post-<?php the_ID(); ?>class="post post-medium-image">
<div class="row">
<div class="span4">
<div class="post-image">
<div class="flexslider flexslider-center-mobile flexslider-simple" data-plugin-options='{"controlNav":false, "animation":"slide", "slideshow": false, "maxVisibleItems": 1}'>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('medium');
} ?>
</div>
</div>
</div>
<div class="span5">
<div class="post-content">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a></h2>
<?php the_excerpt(); ?>
Read more... </div>
</div>
</div>
<div class="row">
<div class="span9">
<div class="post-meta"> <span><i class="icon-calendar"></i>
<?php the_time( 'F jS, Y' ) ?>
</span> <span><i class="icon-user"></i> By <a href="#">
<?php the_author() ?>
</a> </span> <span><i class="icon-tag"></i>
<?php the_tags( 'Tags: ', ', ', '<br />' ); ?>
,</span> <span><i class="icon-comments"></i>
<?php comments_popup_link( 'No Comments »', '1 Comment »', '% Comments »' ); ?>
</div>
</div>
</div>
</article>
<?php endwhile; ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div class="pagination pagination-large pull-right">
<div class="alignleft">
<div class="nav-next alignright">
<?php previous_posts_link( 'Newer posts' ); ?>
</div>
</div>
<div class="alignright">
<div class="nav-previous alignleft">
<?php next_posts_link( 'Older posts' ); ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>

Categories