why comments isn't appear on my theme although I confirmed showing comments! can anyone help please
these are screenshots
https://1drv.ms/u/s!AjjUt5PVIDDuklSRItYU-MAfSzP7?e=2tUhsi
https://1drv.ms/u/s!AjjUt5PVIDDuklV3poojMWiK6lAG?e=3nnult
this is my single post page
<?php get_header(); ?>
<div class="container">
<div class="row">
<?php
if(have_posts()){
while(have_posts()){
the_post(); ?>
<div class="post p-3 m-3 bg-light">
<?php edit_post_link('<span class="float-right">Edit <i class="fa fa-edit"></i></span>'); ?>
<h3>
<a href="<?php the_permalink() ?>">
<?php the_title() ?>
</a>
</h3>
<small class="post-author text-secondary mx-2"><i class='fa fa-user mx-1'></i><?php the_author_posts_link(); ?></small>
<small class="post-date text-secondary mx-2"><i class="fa fa-calendar mx-1"></i><?php the_time('F j, Y') ?></small>
<small class="post-comments text-secondary mx-2"><i class="fa fa-comments mx-1"></i><?php comments_popup_link('no comments', 'one comment', '% comments', 'comment-url', 'commenting is disabled'); ?></small>
<?php the_post_thumbnail('', ['class' => 'img-fluid img-thumbnail d-block']); ?>
<?php the_content(); ?>
<hr>
<span class='post-tags'>
<i class='fa fa-tags'></i>
<?php the_category(', ') ?>
</span>
<span class='d-block'>
<?php
if(has_tag()){
the_tags();
} else{
echo 'Tags: no Tags';
}
?>
</span>
</div>
<?php
}
}
echo '<div class="clearfix"></div>';
echo'<div class="post-pagination py-3 my-2 mx-auto">';
echo '<span class="mx-3">';
previous_post_link();
echo '</span>';
echo '<span class="mx-3">';
next_post_link();
echo '</span>';
echo '</div>';
?>
</div>
<?php
echo '<hr>';
comments_template('/comments.php',true);
?>
</div>
I am using Bootstrap Accordion with ACF and have a repeater in a repeater section. I get all the data and it is displayed as it should be but when I click on the title to open the body the class changes to "collapse show" and the accordion opens for a fraction of a second only to close again immediately. Does any one have any ideas? Here's the code:
<div id="accordion">
<div class="card">
<?php
if( have_rows('instructions_android')):
$i = 1;
while ( have_rows('instructions_android')) : the_row();
?>
<div class="card-header" id="heading<?php echo $i; ?>">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse<?php echo $i; ?>" aria-expanded="false" aria-controls="collapse<?php echo $i; ?>">
<span class="instr-title"><?php echo get_sub_field('etape_installation_no'); ?> : </span><span class="instr-title"><?php echo get_sub_field('titre_du_step'); ?></span>
</button>
</h5>
</div>
<div id="collapse<?php echo $i; ?>" class="collapse" aria-labelledby="heading<?php echo $i; ?>" data-parent="#accordion">
<?php
$i++;?>
<div class="card-body">
<ul>
<?php
$j = 1;
if( have_rows('descr_step')):
while ( have_rows('descr_step')) : the_row();
?>
<li><?php echo get_sub_field('description'); ?></li>
<?php
$j++;
endwhile; ?>
</ul>
<?php endif; ?>
</div><!--card body-->
</div>
</div><!--card-->
<?php endwhile;
endif;?>
</div>
I'm trying to present a clean easy to use client back end field submission in the WP Admin dashboard that can sort repeater field data into appropriate tabbed content. here is the setup.
Field setup
Backend
Frontend
The code I tried;
<div class="tab-pane fade" id="tab-1-3">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">English</li>
<li role="presentation">Spanish</li>
</ul>
<div class="tab-content lang-tab-content">
<div role="tabpanel" class="tab-pane active" id="english">
<?php
$count=0;
if( have_rows('article') ):
while ( have_rows('article') ) : the_row();
?>
<?php if (the_sub_field('language') == 'English') { ?>
<strong>Published Date:</strong> <?php the_sub_field('publised_date');?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading<?php echo $count ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $count ?>" aria-expanded="false" aria-controls="collapse<?php echo $count ?>">
<?php the_sub_field('article_title');?>
</a>
</h4>
</div>
<div id="collapse<?php echo $count ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $count ?>">
<div class="panel-body">
<?php the_sub_field('article_body');?>
</div>
</div>
</div>
</div>
<?php } ?>
<?php
$count++;
endwhile;
else :
endif;
?>
</div>
<div role="tabpanel" class="tab-pane" id="spanish">Spanish</div>
</div>
</div><!-- tab-pane -->
please show the loop code. Without any information about your code this is pretty hard to answer.
I would simply loop through all the repeater rows and set a class to hide the elements based on the prefered language. Then toggle the class with javascript on button click.
UPDATE
<?php
$count=0; $english =''; $spanish ='';
if( have_rows('article') ):
while ( have_rows('article') ) : the_row();
$count++;
if (the_sub_field('language') == 'English'){
$english .= '<strong>Published Date: '.get_sub_field('publised_date').'</strong>';
$english .= '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default">';
/** PANEL HEADING **/
$english .= '<div class="panel-heading" role="tab" id="heading'.$count.'">';
$english .= '<h4 class="panel-title">';
$english .= '<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'.$count.'" aria-expanded="false" aria-controls="collapse'.$count.'">';
$english .= get_sub_field('article_title');
$english .= '</a></h4></div>';
/** END PANEL HEADING **/
/** COLLAPSE START **/
$english .= '<div id="collapse'.$count.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading'.$count.'"><div class="panel-body">'.get_sub_field('article_body').'</div></div>';
/** COLLAPS END **/
$english .= '</div></div>';
}
else{
$spanish .= '<strong>Published Date: '.get_sub_field('publised_date').'</strong>';
$spanish .= '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default">';
/** PANEL HEADING **/
$spanish .= '<div class="panel-heading" role="tab" id="heading'.$count.'">';
$spanish .= '<h4 class="panel-title">';
$spanish .= '<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'.$count.'" aria-expanded="false" aria-controls="collapse'.$count.'">';
$spanish .= get_sub_field('article_title');
$spanish .= '</a></h4></div>';
/** END PANEL HEADING **/
/** COLLAPSE START **/
$spanish .= '<div id="collapse'.$count.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading'.$count.'"><div class="panel-body">'.get_sub_field('article_body').'</div></div>';
/** COLLAPS END **/
$spanish .= '</div></div>';
}
endwhile;
endif;
?>
<div class="tab-content lang-tab-content">
<div role="tabpanel" class="tab-pane active" id="english">
<?php echo $english; ?>
</div>
<div role="tabpanel" class="tab-pane" id="spanish">
<?php echo $spanish; ?>
</div>
</div>
Solved.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">English</li>
<li role="presentation">spanish</li>
</ul>
</div>
<div class="tab-content lang-tab-content">
<div role="tabpanel" class="tab-pane active" id="english">
<?php $ons=0; if(get_field('own_news')): ?>
<?php while(has_sub_field('own_news')): ?>
<?php if( get_sub_field('language') == 'English' ): ?>
<strong>Published Date:</strong> <?php the_sub_field('publised_date');?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading<?php echo $ons ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $ons ?>" aria-expanded="false" aria-controls="collapse<?php echo $ons ?>"><?php the_sub_field('article_title');?></a>
</h4>
</div>
<div id="collapse<?php echo $ons ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $ons ?>">
<div class="panel-body">
<?php the_sub_field('article_body');?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php $ons++; endwhile; ?>
<?php endif; ?>
</div>
<div role="tabpanel" class="tab-pane" id="spanish">
<?php $ons=200; if(get_field('own_news')): ?>
<?php while(has_sub_field('own_news')): ?>
<?php if( get_sub_field('language') == 'Spanish' ): ?>
<strong>Published Date:</strong> <?php the_sub_field('publised_date');?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading<?php echo $ons ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $ons ?>" aria-expanded="false" aria-controls="collapse<?php echo $ons ?>"><?php the_sub_field('article_title');?></a>
</h4>
</div>
<div id="collapse<?php echo $ons ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $ons ?>">
<div class="panel-body">
<?php the_sub_field('article_body');?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php $ons++; endwhile; ?>
<?php endif; ?>
</div>
</div>
I'm creating a loop in WordPress for a fancybox gallery. This means that each group of images needs to have the same rel identifier (for example rel="gallery1"). But since this is a nested loop, in other words, it's part of another loop, I need the next group of images in the loop to have a rel identifier different from the ones before/after (ex. rel="gallery2", rel="gallery3", etc.).
I've tried putting next the the word gallery, but it just loops and gives every object another number instead of keeping the same number for each item in the grouping.
I'm not sure if what I'm explaining is making sense. Here's a basic idea of what I'm trying to have.
{gallery of images 1}
<a href="image" rel="gallery1">
<img src="path">
</a>
<a href="image" rel="gallery1">
<img src="path">
</a>
<a href="image" rel=gallery1">
<img src="path">
</a>
{gallery of images2 }
<a href="image" rel="gallery2">
<img src="path">
</a>
<a href="image rel="gallery2">
<img src="path">
</a>
etc., etc.
The page itself is displaying a gallery of post thumbnails (featured images) from a custom post type. Clicking on a gallery item (representing one item in the custom post type) opens a Bootstrap modal window. In that modal window is a group of images related to that original gallery item (post type item). Clicking on one of those images opens a fancybox, but should only cycle through the images for that gallery item. Crazy enough?
The rest of the page is working perfectly. Just having trouble with this rel numbering thing.
I had hesitated posting all the code because it's so long, but if it's helpful, here you go:
// Define the query
$args = array(
'post_type' => 'pixieportfolio',
'post_status' => 'publish',
'orderby' => 'menu_order',
'meta_query' => array(
array(
'key' => 'featured_portfolio_item',
'value' => '1',
'compare' => '=',
)
),
'meta_key' => '_thumbnail_id',
'posts_per_page' => 999
);
$query = new WP_Query( $args );
$count = 0;
// Carousel // ?>
<div id="featuredCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php while($query->have_posts()): $query->the_post(); ?>
<li <?php if($count == 0){ echo 'class="active"';} ?> data-target="#featuredCarousel" data-slide-to="<?php echo $count++; ?>"></li>
<?php endwhile; ?>
</ol>
<div class="carousel-inner" role="listbox">
<?php $count = 0;
while ($query->have_posts()) : $query->the_post();
$count++;
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'pp-home-portfolio' );
$url = $thumb['0'];
$values = get_field('tech_choices');
$terms = get_the_terms($post->ID, 'post_tag');
$custom = get_post_custom($post->ID);
$caption = get_field('caption', '');
$client = get_field('client', '');
$project_url = get_field('project_url', '');
$date = get_field('date', ''); ?>
<!-- Wrapper for slides -->
<div class="item <?php if ($count == 1) { echo 'active';} ?>" data-slide-number="<?php echo $count++; ?>" id="<? the_ID(); ?>">
<div class="item-image" style="background-image: url(<?=$url?>);" title="<?php the_title() ?>" data-toggle="modal" data-target="#myModal<?php echo $count; ?>"></div>
<div class="project-details">
<div class="project-detail-border shadow-effect"></div>
<div class="project-detail">
<div class="top-detail">
<h4><?php the_title(); ?></h4>
<div class="short-description">
<?php $content = get_the_content();
echo wp_trim_words( $content , '20' );
?>
</div>
</div>
<table class="table project">
<tr>
<td valign="middle" class="fifty">
<?php $terms_as_text = strip_tags( get_the_term_list( $wp_query->post->ID, 'pixie-portfolio-categories', '', ', ', '' ) );
echo $terms_as_text;?>
</td>
<td valign="middle" class="fifty">
<?php if( $values ) {
if(in_array('WordPress', $values )){ ?>
<i class="fa fa-wordpress fa-2x" data-toggle="tooltip" title="Wordpress"></i>
<?php } if(in_array('HTML-5', $values )){ ?>
<i class="fa fa-html5 fa-2x" data-toggle="tooltip" title="HTML-5"></i>
<?php } if(in_array('CSS-3', $values )){ ?>
<i class="fa fa-css3 fa-2x" data-toggle="tooltip" title="CSS-3"></i>
<?php } if(in_array('Sportswear', $values )){ ?>
<i class="fa fa-bicycle fa-2x" data-toggle="tooltip" title="Sportswear"></i>
<?php } if(in_array('Adobe', $values )){ ?>
<i class="fa fa-paint-brush fa-2x" data-toggle="tooltip" title="Adobe"></i>
<?php } if(in_array('Code', $values )){ ?>
<i class="fa fa-code fa-2x" data-toggle="tooltip" title="Code"></i>
<?php } if(in_array('Ecommerce', $values )) { ?>
<i class="fa fa-database fa-2x" data-toggle="tooltip" title="MySQL"></i>
<?php }
} else {} ?>
</td>
</tr>
<tr>
<td colspan="2" class="more-info" data-toggle="modal" data-target="#myModal<?php echo $count; ?>">
<div class="view-project">View Project</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal<?php echo $count; ?>" class="modal fade" role="dialog" aria-labelledby="myModal<?php echo $count; ?>Label">
<div class="modal-dialog modal-lg" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title"><?php the_title() ?></h2>
<span>
<?php if( $terms ): ?>
<ul>
<?php foreach( $terms as $term ): ?>
<li><?php echo $term->name; ?></li>
<?php $icon = get_field('creative_icon', $term->taxonomy . '_' . $term->term_id); echo $icon; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</span>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div>
<p class="post-meta gallery-list">
<?php if( $client ): ?>
<span class="pixie-date">
<span class="title">Client:</span> <?=$client?>
</span>
<?php endif;
if ( $date ): ?>
<span class="post-cats">
<span class="title">Date:</span> <?=$date?>
</span>
<?php endif;
if ( $values ) { ?>
<span class="post-comments">
<?php $values = get_field('tech_choices'); ?>
<span class="title">Tech used in this project:</span>
<?php if(in_array('WordPress', $values )){ ?>
<i class="fa fa-wordpress fa-2x" data-toggle="tooltip" data-placement="bottom" title="WordPress"></i>
<? }
if(in_array('HTML-5', $values )){ ?>
<i class="fa fa-html5 fa-2x" data-toggle="tooltip" data-placement="bottom" title="HTML5"></i>
<? }
if(in_array('CSS-3', $values )){ ?>
<i class="fa fa-css3 fa-2x" data-toggle="tooltip" data-placement="bottom" title="CSS3"></i>
<? }
if(in_array('Sportswear', $values )){ ?>
<i class="fa fa-bicycle fa-2x" data-toggle="tooltip" data-placement="bottom" title="Sportswear"></i>
<? }
if(in_array('Adobe', $values )){ ?>
<i class="fa fa-paint-brush fa-2x" data-toggle="tooltip" data-placement="bottom" title="Illustrator and/or Photoshop"></i>
<? }
if(in_array('Code', $values )){ ?>
<i class="fa fa-code fa-2x" data-toggle="tooltip" data-placement="bottom" title="PHP, JQuery, etc."></i>
<? }
if(in_array('Ecommerce', $values )){ ?>
<i class="fa fa-shopping-cart fa-2x" data-toggle="tooltip" data-placement="bottom" title="ECommerce"></i>
<? }
if(in_array('MySQL', $values )){ ?>
<i class="fa fa-database fa-2x" data-toggle="tooltip" data-placement="bottom" title="MySQL"></i>
<? } ?>
</span>
<?php } ?>
</p>
</div>
<?php echo the_content(); ?>
<blockquote class="testimonial">
QUOTE GOES HERE
</blockquote>
</div>
<div class="col-md-4">
<div class="gallery">
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'darwin-modal-main' );
$url = $thumb['0'];
$thumb2 = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$url2 = $thumb2['0'];
$c = 0; ?>
<a href="<?=$url2?>" class="group" id="port_gal" rel="group<?php echo $c; ?>">
<img src="<?=$url?>" width="300" height="300">
</a>
<?php $images = get_field('gallery_images');
if( $images ) {
foreach( $images as $image ) {
?>
<a href="<?php echo $image['sizes']['large'] ?>" class="group" id="port_gal" rel="group<?php echo $c; ?>">
<img src="<?php echo $image['sizes']['darwin-modal-thumb'] ?>" alt="<?php $image['alt'] ?>" />
</a>
<?php }
} ?>
</div>
<div class="website-button">
<?php if ( $project_url ): ?>
<a class="btn btn-default" href="<?=$project_url?>" target="_blank" role="button">Visit Website</a>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php wp_reset_query(); ?>
</div>
Can you help me to find the right code for pagination with this loop?
Here is my loop:
<?php query_posts('showposts=1&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
...
<?php endwhile; else: ?>
...
<?php endif; ?>
<?php rewind_posts(); ?>
<?php query_posts('showposts=2&offset=1&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
...
<?php endwhile; else: ?>
...
<?php endif; ?>
<?php rewind_posts(); ?>
<?php query_posts('showposts=6&offset=3&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
...
<?php endwhile; else: ?>
...
<?php endif; ?>
EDIT
This was my old loop, how can I convert it to the new one? Unfortunately I don't know how php works..
<?php
if (is_front_page() ) {
get_header( 'front' );
} else {
get_header();
}
?>
<section id="content" class="container">
<div class="row">
<div class="col-md-7 col-sm-7">
<?php query_posts('showposts=1&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="thumbnail thumbnail-principale expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<div class="destacado"><h3>Destacado</h3></div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<?php comments_template(); ?><!-- da sistemare -->
</header>
</article>
</div>
<?php endwhile; else: ?>
<p>Sorry, there are no posts to display</p>
<?php endif; ?>
<?php rewind_posts(); ?>
<?php query_posts('showposts=2&offset=1&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-md-5 col-sm-5">
<article class="thumbnail thumbnail-destra expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<header class="testo-articolo-destra expand-image">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
</header>
<div class="badge1"></div>
</article>
</div>
<?php endwhile; else: ?>
<p>Sorry, there are no posts to display</p>
<?php endif; ?>
</div><!-- /.row -->
<div class="row">
<?php rewind_posts(); ?>
<?php query_posts('showposts=6&offset=3&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-md-4 col-sm-4">
<article class="thumbnail distanza expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive ingrandire-img')); ?>
</div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('Ningún comentario', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Lee más', 'katartika' ); ?></a></p>
</header>
</article>
</div>
<?php endwhile; else: ?>
<p>Sorry, there are no posts to display</p>
<?php endif; ?>
</div><!-- /row -->
<div style="text-align:center;">
<?php posts_nav_link(‘|’, ‘Prossimo’, ‘Precedente’); ?>
</div>
</section>
</div><!-- /sezione -->
<?php get_footer(); ?>
As I have stated last night, you can do this in one query, and without a custom query.
I would like to enforce the fact that you should never use query_posts. query_posts breaks paginations, rerun queries slowing your page performance and breaks the main query object which is needed by many plugins or custom functions. It is truely an evil way to run custom queries which should be avoided at all costs. If you ever need to run custom queries, use WP_Query for paginated queries and get_posts for non paginated queries.
You should also never replace the main query with a custom one on the home page and any archive type page, this breaks page functionalities. Custom queries should only be run for secondary posts like sliders, featured content, related and popular posts and on page templates and static front pages to display custom posts. If you ever need to alter the main query on the homepage or and archive page, use pre_get_posts
Now, to solve your issue, you need one loop from the main query and a counter, in this case we will use the build in main query counter $wp_query->current_post (one note, this counter starts at 0, so post one in the loop will be 0, post two will be 1, etc).
From what I read from your code, the first code needs to be different from post two and three, and these are different from the next six
Lets put that into code
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
/*
* Display different outlay for post one
*/
if ( $wp_query->current_post === 0 ) {
// Do what needs to be done for post one
} elseif ( $wp_query->current_post >= 1 && $wp_query->current post <= 2 ) {
/*
* Do something for posts 2 and 3
*/
} elseif ( $wp_query->current_post >= 3 ) {
/*
* Do something for the rest of the posts
*/
}
}
}
EDIT
You can convert your code to
<?php
if (is_front_page() ) {
get_header( 'front' );
} else {
get_header();
}
?>
<section id="content" class="container">
<div class="row">
<div class="col-md-7 col-sm-7">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if ( $wp_query->current_post === 0 ) { ?>
<article class="thumbnail thumbnail-principale expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<div class="destacado"><h3>Destacado</h3></div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<?php comments_template(); ?><!-- da sistemare -->
</header>
</article>
</div>
<?php
} elseif ( $wp_query->current_post >= 1 && $wp_query->current post <= 2 ) { ?>
<div class="col-md-5 col-sm-5">
<article class="thumbnail thumbnail-destra expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<header class="testo-articolo-destra expand-image">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
</header>
<div class="badge1"></div>
</article>
</div>
<?php
} elseif ( $wp_query->current_post >= 3 ) { ?>
<div class="col-md-4 col-sm-4">
<article class="thumbnail distanza expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive ingrandire-img')); ?>
</div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('Ningún comentario', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Lee más', 'katartika' ); ?></a></p>
</header>
</article>
</div>
<?php }
endwhile;
endif; ?>
</div><!-- /row -->
<div style="text-align:center;">
<?php posts_nav_link(‘|’, ‘Prossimo’, ‘Precedente’); ?>
</div>
</section>
</div><!-- /sezione -->
<?php get_footer(); ?>
I don't know if it is the right way, but I got it:
<?php
if (is_front_page() ) {
get_header( 'front' );
} else {
get_header();
}
?>
<section id="content" class="container">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if (!is_paged() && $wp_query->current_post === 0 ) { ?>
<div class="col-md-7 col-sm-7">
<article class="thumbnail thumbnail-principale expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<div class="destacado"><h3>Destacado</h3></div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<?php comments_template(); ?><!-- da sistemare -->
</header>
</article>
</div>
<?php
} elseif (!is_paged() && $wp_query->current_post >= 1 && $wp_query->current_post <= 2 ) { ?>
<div class="col-md-5 col-sm-5">
<article class="thumbnail thumbnail-destra expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<header class="testo-articolo-destra expand-image">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
</header>
<div class="badge1"></div>
</article>
</div>
<?php
} elseif ( $wp_query->current_post >= 3 ) { ?>
<div class="col-md-4 col-sm-4">
<article class="thumbnail distanza expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive ingrandire-img')); ?>
</div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('Ningún comentario', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Lee más', 'katartika' ); ?></a></p>
</header>
</article>
</div>
<?php
//new request for all the rest of post from page 2 onwards
} elseif ( is_paged() ) { ?>
<div class="col-md-4 col-sm-4">
<article class="thumbnail distanza expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive ingrandire-img')); ?>
</div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('Ningún comentario', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Lee más', 'katartika' ); ?></a></p>
</header>
</article>
</div>
<?php }
endwhile;
endif; ?>
</div><!-- /row -->
<div style="text-align:center;">
<?php posts_nav_link('|', 'Prossimo', 'Precedente'); ?>
</div>
</section>
</div><!-- /sezione -->
<?php get_footer(); ?>