I'm trying to wrap every 2 post in a div "row-fluid" Right now my HTML looks like the following...
<div class="row-fluid">
<div class="odd-post span6"></div>
<div class="even-post span6"></div>
<div class="odd-post span6"></div>
<div class="even-post span6"></div>
</div>
I'd like it to look like this...
<div class="row-fluid">
<div class="odd-post span6"></div>
<div class="even-post span6"></div>
</div>
<div class="row-fluid">
<div class="odd-post span6"></div>
<div class="even-post span6"></div>
</div>
This is the php that I'm using to generate this but I think because I'm counting outside of my loop its not rendering the way I'd like it too.
<?php
$count = 0;
if(have_posts()) : while(have_posts()) : the_post();
$open = !($count%2) ? '<div class="row-fluid">' : '';
$close = !($count%2) && $count ? '</div>' : '';
echo $close.$open;
?>
<!--Custom Post Type Boilerplate-->
<?php
$args = array( 'post_type' => 'mysite_team', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div ';
$even_odd = (++$j % 2 == 0) ? 'featured-image-wrapper-even-post span6' : 'featured-image-wrapper-odd-post span6'; post_class( $even_odd );
echo '>';
echo '<h1>';
echo '<a href="';
the_permalink();
echo '">';
the_title();
echo '</a></h1>';
echo '<div class="featured-image alignleft">';
echo '<a href="';
the_permalink();
echo '">';
the_post_thumbnail('team-thumbnail-size');
echo '</a>';
echo '</div>';
echo '<div class="entry-content">';
the_excerpt();
echo '<p><a href="';
the_permalink();
echo '"><i>Read More';
echo '</i></a></p>';
echo '</div>';
echo '</div>';
endwhile;
?>
<?php
$count++;
endwhile;
else :
?>
<?php endif; ?>
<?php echo $count ? '</div>' : ''; ?>
Any help would be appreciated as I'm starting to see circle and get confused.
Thank you!
I would avoid the extra div container, sorry. You can solve this with pure CSS.
.row-fluid:nth-child(odd) {
// Some code
}
.row-fluid:nth-child(even) {
// Some code
}
.span6 {
width:50%;
display:inline-cell;
float: left;
}
Related
I want to display a simple front page with 2 categories,
But when I enter 2 same code, the result is empty,
But one code, the result appears
I look like:
Title: chicken category
Content
Title: cow category
Content
I tried with a simple php code:
<h2 class="home1">10 Best Chicken</h2>
<div class="1"><?php query_posts('cat=9' . '&showposts=3'.'&paged='.$paged); ?></div>
<h2 class="home1">10 Best Cow</h2>
<div class="1"><?php query_posts('cat=10' . '&showposts=3'.'&paged='.$paged); ?></div>
How the best solution?
Don't use query_posts , use WP_Query instead
<?php get_header(); ?>
<?php if((is_home())&& ($paged < 1)) { ?>
<?php get_template_part( 'home-featured' ); ?>
<?php } ?>
<div class="wisata-konten">
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if((is_home())&& ($paged > 1)) { ?>
<h1><?php bloginfo('name'); ?> - <?php if ( get_query_var('paged') ) { echo 'Halaman '. get_query_var('paged'); } ?></h1>
<?php } ?>
<div class="row"><div class="boxer2">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-md-4"><?php get_template_part( 'thumb' ); ?></div>
<?php endwhile; ?></div></div>
<?php fastestwp_pagenavi(); ?>
<?php else : ?>
<h2>Not Found</h2>Sorry, but you are looking for something that isn't here.
<?php endif; ?>
<h2 class="home1">Lombok Open Trip</h2>
<?php $args = array( 'cat' => 9 , 'posts_per_page' => 3 , 'paged' => $paged );
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
} else {
// no posts found
}
?><h2 class="home1">Lombok Promo</h2><?php
$args2 = array( 'cat' => 10 , 'posts_per_page' => 3 , 'paged' => $paged );
$the_query2 = new WP_Query( $args2 );
// The Loop
if ( $the_query2->have_posts() ) {
echo '<ul>';
while ( $the_query2->have_posts() ) {
$the_query2->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
} else {
// no posts found
} ?>
<div class="wisata-testimoni">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="testimoni" class="carousel slide">
<div class="carousel-inner">
<?php fastestwp_comments(); ?>
</div>
</div>
<div class="tombol"><a class= "medium beli blue pull-right" href="<?php echo home_url() ; ?>/testimoni" >Lihat Semua Testimoni <span class="glyphicon glyphicon-thumbs-up"></span></a></div>
</div>
</div>
</div>
</div>
I want to add every 3 posts in my index.php file in a row div but I would like to exclude the first post so that I can style the first post differently.
I currently have the loop working for every 3 posts but I would like to exclude the first post and style the first post differently to make it a featured post
below is my code
<div class="content post-main__content clearfix" id="post-<?php the_ID(); ?>" >
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
$open = !($count%3) ? '<div class="post-main__row clearfix">' : ''; //Create open wrapper if count is divisible by 3
$close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
echo $close.$open;
?>
<div class="post-main__cell">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-top">
<?php the_post_thumbnail(array(330, 167,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-bottom">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php posted_on(); ?></p>
</div>
</a>
</div>
<?php endfor; else : ?>
<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>
There is a great answer here for creating a loop that separates out the first post from the rest: https://wordpress.stackexchange.com/questions/101096/how-to-show-one-post-different-from-the-rest
Then I'd use a grid framework or some simple css to style the remaining containers, personally I love getskeleton.com but this part is up to you using the blog loop template.
I worked it like this
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 12, 'paged' => $paged );
query_posts($args); ?>
<?php if (have_posts()) : ?>
<?php $postcount = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $postcount++; ?>
<?php if ($postcount == 1 && $paged == 1) : // if this is the first post & first page ?>
<div class="post-main__row clearfix">
<div class="post-main__cell post-main__cell-large">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-left clearfix">
<?php the_post_thumbnail(array(691, 317,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-right">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php the_time('l, F jS, Y') ?></p>
</div>
</a>
</div>
</div>
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
$open = !($count%3) ? '<div class="post-main__row clearfix">' : ''; //Create open wrapper if count is divisible by 3
$close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
echo $close.$open;
?>
<div class="post-main__cell">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-top">
<?php the_post_thumbnail(array(330, 167,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-bottom">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php the_time('l, F jS, Y') ?></p>
</div>
</a>
</div>
<?php endfor; else : ?>
<?php endif; ?>
<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>
<?php endif; ?>
<?php endwhile; ?>
I have this code:
<div class="col-md-4 col-sm-4 col-xs-12 mob">
<?php
$args = array('tag_slug__and' => array('testtag'));
$loop = new WP_Query( $args );
while ($loop->have_posts() ) : $loop->the_post();
?>
<a style="color:#333; text-decoration:none;" href="<?php echo get_permalink(); ?>">
<?php
if(has_post_thumbnail()) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' );
echo '<img src="' . $image_src[0] . '" width="100%" />';
}
?>
<h4><?php the_title(); ?></h4>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</a>
Which gets a post which has the tag 'testtag'.
Instead of copying this code, and using 'testtag1', 'testtag2'
How can I just grab ALL the posts which have the tag 'testtag' and just keep adding them into 4 columns?
Any links/help
Nevermind, simple fix!!
<div class="row" style="margin-top:20px;">
<?php
$args = array('tag_slug__and' => array('testtag'));
$loop = new WP_Query( $args );
while ($loop->have_posts() ) : $loop->the_post();
?>
<div class="col-md-4 col-sm-4 col-xs-12 mob">
<a style="color:#333; text-decoration:none;" href="<?php echo get_permalink(); ?>">
<?php
if(has_post_thumbnail()) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' );
echo '<img src="' . $image_src[0] . '" width="100%" />';
}
?>
<h4><?php the_title(); ?></h4>
<?php $trimexcerpt = get_the_excerpt();
$shortexcerpt = wp_trim_words( $trimexcerpt, $num_words = 10, $more = '… <br/> Read More ...' );
echo '<a style="color:#333; text-decoration:none;" href="' . get_permalink() . '"><p>' . $shortexcerpt . '</p></a>';
?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</a>
</div>
This is my modified Wordpress loop w/ PHP If and Else Condition code.
<?php if (have_posts()) : ?>
<?php
$i = 1;
while (have_posts()) {
the_post();
if ($i <= 1) {
echo '<div class="firstp">';
echo '<a href="'; the_permalink(); echo '"'; echo 'alt="'; the_title(); echo '"'; echo 'title="'; the_title(); echo '">';
the_post_thumbnail('article-oneimg', array( 'id' => "article-oneimg"));
echo '</a>';
echo '<div class="thedate1">';
the_date();
echo '</div>';
echo '<h1><a href="'; the_permalink(); echo '"'; echo 'alt="'; the_title(); echo '"'; echo 'title="'; the_title(); echo '">';;
the_title();
echo '</a></h1>';
echo '<p>';
the_excerpt();
echo '</p>';
echo '</div>';
} elseif ($i <= 10) {
echo '<div class="HOLDER-OF-secondp">';
include "secondp.php";
echo '</div>';
} else {
// There should be a bunch of HTML mixed in here too
the_title();
}
$i++;
}
?>
<?php else : ?>
<h2>No Posts Found</h2>
<?php endif; ?>
secondp.php contains this code:
<div class="secondp">
<a href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('article-twoimg', array( 'id' => "article-twoimg")); ?>
</a>
<div class="thedate2">
<?php the_date(); ?>
</div>
<h1>
<?php the_title(); ?>
</h1>
</div>
What I'm trying to do here is just to add a holder/container of the secondp.php since it has several posts. But every time I use an echo '<div class="HOLDER-OF-secondp">'; before & after the include "second.php"; this happens (see image below taken using Firebug.)
What's wrong with the HTML structure inside the PHP IF condition? I trying to achieve is to put a container that holds all the divs class secondp.
In simple HTML, it's something like this:
<div class="holderofsecondp">
<div class="secondp">
a href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('article-twoimg', array( 'id' => "article-twoimg")); ?>
</a>
<div class="thedate2">
<?php the_date(); ?>
</div>
<h1>
<?php the_title(); ?>
</h1>
</div>
</div>
Try this code:-
<?php global $wp_query;?>
<?php if (have_posts()) : ?>
<?php
$i = 1;
$start_hoder = true
$total_posts = $wp_query->found_posts;
while (have_posts())
{
the_post();
if ($i <= 1) {
echo '<div class="firstp">';
echo '<a href="'; the_permalink(); echo '"'; echo 'alt="'; the_title(); echo '"'; echo 'title="'; the_title(); echo '">';
the_post_thumbnail('article-oneimg', array( 'id' => "article-oneimg"));
echo '</a>';
echo '<div class="thedate1">';
the_date();
echo '</div>';
echo '<h1><a href="'; the_permalink(); echo '"'; echo 'alt="'; the_title(); echo '"'; echo 'title="'; the_title(); echo '">';;
the_title();
echo '</a></h1>';
echo '<p>';
the_excerpt();
echo '</p>';
echo '</div>';
} elseif ($i <= 10) {
if($start_hoder)
{
echo '<div class="HOLDER-OF-secondp">';
$start_hoder = false;
}
include "secondp.php";
if($total_posts == $i && $start_hoder == false)
{
echo '</div>';
}
} else {
// There should be a bunch of HTML mixed in here too
the_title();
}
$i++;
}
?>
<?php else : ?>
<h2>No Posts Found</h2>
<?php endif; ?>
May be this will help you to get your expected output.
Looks like you have a loop, an inside your loop you are repeatedly echoing the holder. You want to rearrange your code to not have the holder inside the loop.
<div class="holderofsecondp">
<?php while (have_posts()) { ?>
<div class="secondp"></div>
<div class="secondp"></div>
<div class="secondp"></div>
<div class="secondp"></div>
<div class="secondp"></div>
<div class="secondp"></div>
<div class="secondp"></div>
<?php } ?>
</div>
<div class="holderofsecondp"> this will be always out of the loop
or in your code Do this
<?php if($i==0) {?> <div class="HOLDER-OF-secondp"><?php } ?>
and add the div out of loop but its not good idea . Let me know if you need more help .
Here is, index.php file from my template.
<?php get_header(); ?>
<div id="content">
<div id="content_inside">
<?php
wp_reset_query();
$get_blog_id = '-' . get_category_id('blog');
if(get_category_id('blog') != '') {
$args = array(
'post_type' => 'post',
'cat' => $get_blog_id,
'posts_per_page' => 6,
'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1)
);
} else {
$args = array(
'post_type' => 'post',
'posts_per_page' => 6,
'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1)
);
}
query_posts($args);
$x = 0;
while (have_posts()) : the_post(); ?>
<?php if($x % 2 == 0) { ?>
<div class="post_box">
<?php } else { ?>
<div class="post_box post_box_right">
<?php } ?>
<?php if ($x == 0) { ?>
<h1><?php the_title(); ?></h1>
<?php } elseif ($x == 1 || $x == 2 || $x == 3) { ?>
<h2><?php the_title(); ?></h2>
<?php } elseif ($x == 4 || $x == 5) { ?>
<h3><?php the_title(); ?></h3>
<?php } else { ?>
<h3><?php the_title(); ?></h3>
<?php } ?>
<div class="post_meta"><?php the_author(); ?> / <?php the_time('d m , Y') ?> - <?php the_time('H:i'); ?> / <?php comments_popup_link('Yorum Yok', '1 Yorum', '% Yorum'); ?></div>
<div class="img_link">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('featured-home'); ?>
<?php
//$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'featured-home' );$url = $thumb['0'];
//$titleGet = get_the_title($post->ID);
//echo '<img src="'.CDN.'/assets/images/_load.png" alt="'.$titleGet.'" data-modafesto="'.$url.'" width="301" height="398" />';
?>
</a>
</div>
<div class="post_cat">
<?php
$category = get_the_category();
echo ''.$category[0]->cat_name.'';
?> konu başlığı ile yayınlandı.
</div>
</div><!--//post_box-->
<?php if($x % 2 == 1) { ?>
<div class="clear"></div>
<?php } ?>
<?php $x++; ?>
<?php endwhile; ?>
<div class="clear"></div>
</div><!--//content_inside-->
<div class="clear"></div>
<div class="load_more_cont">
<div style="margin:0px auto;"><div class="load_more_text"><?php next_posts_link('DİĞER YAZILARI YÜKLE') ?></div></div>
</div><!--//load_more_cont-->
<?php wp_reset_query(); ?>
</div><!--//content-->
<script type="text/javascript">$(".load_more_cont a").live("click",function(a){a.preventDefault();$(".load_more_text a").html("Yazılar Yükleniyor...");$.ajax({type:"GET",url:$(this).attr("href")+"#content",dataType:"html",success:function(b){result=$(b).find("#content_inside .post_box");nextlink=$(b).find(".load_more_cont a").attr("href");$("#content_inside").append(result);$(".load_more_text a").html("Daha fazla yazı yükle");if(nextlink!=undefined){$(".load_more_cont a").attr("href",nextlink)}else{$(".load_more_cont").remove();$("#content_inside").append('<div class="clear"></div>')}}})});</script>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
I have tried to use, lazy load script for my images. Because it is a great choice for SEO Engines. That lines,
<div class="img_link">
<a href="<?php the_permalink(); ?>">
<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'featured-home' );$url = $thumb['0'];
$titleGet = get_the_title($post->ID);
echo '<img src="'.CDN.'/assets/images/_load.png" alt="'.$titleGet.'" data-modafesto="'.$url.'" width="301" height="398" />';
?>
</a>
</div>
Also, here is my preloader script http://j.mp/12QkkTW .
When you load the page, first posts comes corectly with lazyload / preload but if you click load more posts button, when you get more posts the preloader doesnt work.
Can anyone help me ? Thank you.
try to add
$("XXXXXXX img").lazyload();
in ajax success callback funcion, after append html,
XXXXX is append html DOM, eq: class name or id