I have just created thus BEAUTIFUL loop
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row sectionrow" onclick="void(0)">
<div class="col-sm-4 sectionrecipes" style="background-image:url('<?php echo the_field(background_image_title); ?>');">
<div class="textsmall" >
<?php the_field(titlebreak); ?>
</div>
</div>
<div class="col-sm-8">
<div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">
<div class="textbigrecipes">
<div class="inner">
<?php the_excerpt(); ?>
<button type="button" class="btn btn-default">READ MORE</button>
</div>
</div>
</div>
</div>
</div>
</div>
But I would like to invert the positon of the bootstrap divs on the second post and return to orginal on the third and ....
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row sectionrow" onclick="void(0)">
<div class="col-sm-8">
<div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">
<div class="textbigrecipes">
<div class="inner">
<?php the_excerpt(); ?>
<button type="button" class="btn btn-default">READ MORE</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 sectionrecipes" style="background-image:url('<?php echo the_field(background_image_title); ?>');">
<div class="textsmall" >
<?php the_field(titlebreak); ?>
</div>
</div>
</div>
Is it possible?
1. First declare a variable Outside the loop (like as $i =1),
Then check the condition.
Mode of i
example:
if($i% 2 == 0) {
-----layout First code-----
}else
{
-----layout Second code-----
}
Increment the variable value ($i++)
Related
So I'm converting bootstrap site to Wordpress and post cards don't want to stack horizontally... I know there should be foreach loop which will loop through posts but I don't know how to set it up...
<?php while(have_posts()) {
the_post();
?>
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
while is also a loop. Inside the loop, you can just put the repeated code. As I've understood your code than you need to something like this:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
?>
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
Also, better to move code for one block to another file for example partials/post.php:
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
And update your current file:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
get_template_part( 'partials/post' );
} ?>
</div>
</div>
</section>
I am new to wordpress development, I am learning how to make a theme from scratch. I don't want to use any plugin to achieve this.
How to create first post/ fifth post/ ninth post full width, rest in three columns and so on.
I tried this but first post is not repeating
<?php get_header() ?>
<div class="container-fluid">
<div class="row">
<?php $i = 0; while ( have_posts() ) : the_post(); ?>
<?php if ($i++ == 0) : ?>
<div class="col-sm-12 blog">
<div class="row">
<div class="col-sm-8 p-0">
<?php the_post_thumbnail()?>
</div>
<div class="col-sm-4 align-self-center">
<div><h3><?php the_title()?></h3></div>
<div><?php the_excerpt()?></div>
</div>
</div>
</div>
<?php else: ?>
<div class="col-sm-4 blog py-3">
<?php the_post_thumbnail()?>
<div><h3><?php the_title()?></h3></div>
<div><?php the_excerpt()?></div>
</div>
<?php endif; ?>
<?php endwhile ?>
</div>
</div>
<?php get_footer() ?>
find my screen here
Your text isn't very clear but i'm assuming you want to have 1 big post and 3 tiny posts pattern.
To achieve this you will need to tell your code that the first one or when the post number is divided by 4 and the remainder is 0, the post should be big.
Code:
<?php get_header() ?>
<div class="container-fluid">
<div class="row">
<?php $i = 0; while ( have_posts() ) : the_post(); ?>
<?php if ($i == 0 || $i % 4 == 0) : ?>
<div class="col-sm-12 blog">
<div class="row">
<div class="col-sm-8 p-0">
<?php the_post_thumbnail()?>
</div>
<div class="col-sm-4 align-self-center">
<div><h3><?php the_title()?></h3></div>
<div><?php the_excerpt()?></div>
</div>
</div>
</div>
<?php else: ?>
<div class="col-sm-4 blog py-3">
<?php the_post_thumbnail()?>
<div><h3><?php the_title()?></h3></div>
<div><?php the_excerpt()?></div>
</div>
<?php endif; ?>
<?php $i++;endwhile ?>
</div>
</div>
<?php get_footer() ?>
Hope this help you.
<?php get_header() ?>
<div class="container-fluid">
<div class="row">
<?php $i = 0; while ( have_posts() ) : the_post(); ?>
<?php if ($i % 4 == 0) : ?>
<div class="col-sm-12 blog">
<div class="row">
<div class="col-sm-8 p-0">
<?php the_post_thumbnail()?>
</div>
<div class="col-sm-4 align-self-center">
<div><h3><?php the_title()?></h3></div>
<div><?php the_excerpt()?></div>
</div>
</div>
</div>
<?php else: ?>
<div class="col-sm-4 blog py-3">
<?php the_post_thumbnail()?>
<div><h3><?php the_title()?></h3></div>
<div><?php the_excerpt()?></div>
</div>
<?php endif; ?>
<?php
$i++;
endwhile ?>
</div>
</div>
<?php get_footer() ?>
I am trying to create a Slick JS with ACF repeater, but it doesn't work.
The following code just shows image after image.
Is there something I have forgotten?
By the way, I have already registered the CSS and JavaSscript's on functions.php.
<section>
<div id="slick-hero">
<a id="slick-hero-left" class="slick-hero__arrow-container slick-hero__arrow-container--prev">
<div class="slick-hero__icon-container">
<div class="slick-hero__icon">
<i class="fas fa-angle-left"></i>
</div>
</div>
</a>
<a id="slick-hero-right" class="slick-hero__arrow-container slick-hero__arrow-container--next">
<div class="slick-hero__icon-container">
<div class="slick-hero__icon">
<i class="fas fa-angle-right"></i>
</div>
</div>
</a>
<div class="slick-hero__slider">
<?php if ( have_rows( 'slider_2019_home' ) ) : ?>
<?php while ( have_rows( 'slider_2019_home' ) ) : the_row(); ?>
<div class="slick-hero__slide" style="background-image:url(<?php the_sub_field('slider_home_2019_image'); ?>)">
<div class="container slick-hero__slide__container">
<div class="row">
<div class="col-12">
<div class="slick-hero__slide__content">
<a class="slick-hero__slide__link" href="<?php the_sub_field('slider_home_2019_link'); ?>">
<h4 class="slick-hero__slide__heading">
<?php the_sub_field('slider_home_2019_heading'); ?>
</h4>
<h2 class="slick-hero__slide__title">
<?php the_sub_field('slider_home_2019_sub_title'); ?>
</h2>
<hr class="hero-slider__divider">
<p class="slick-hero__slide__body">
<?php the_sub_field('slider_home_2019_body'); ?>
</p>
<p class="slick-hero__slide__cta-text">
<?php the_sub_field('slider_home_2019_cta_text'); ?>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
</div> <?php // end slick-hero__slider ?>
</div> <?php // end slick-hero ?>
</section>
Are you running
$(document).ready(function(){
$(".slick-hero__slider").slick()
})
anywhere?
I have a custom post type "case_studies" i want posts from this, to arrange in a following way.
<div class="col-sm-3 nopadding">
IMAGE
</div>
<div class="col-sm-3 ">
TEXT
</div>
<div class="col-sm-3 nopadding">
IMAGE
</div>
<div class="col-sm-3 ">
TEXT
</div>
<!--
Column Ends
3rd & 4th posts
-->
<div class="item">
<div class="col-sm-6 nopadding">
IMAGE
</div>
<div class="col-sm-6">
TEXT
</div>
</div>
<div class="item">
<div class="col-sm-6 nopadding">
IMAGE
</div>
<div class="col-sm-6">
TEXT
</div>
</div>
<!--
Column Ends
-->
Then again first & second post type column after that again 4th & 5th post type column same loop goes on. note that each column ends after 2 posts & styles are diffrent. how can i achieve this
in short odd columns must have 2 posts which wrapped with col-sm-3, even columns also have 2 posts each one wrapper with col-sm-6.
Try this code.
<?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );
$Inc = 1;
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if($Inc==1){ ?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else if($Inc==2){ ?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else if($Inc==3){ ?>
<div class="item">
<div class="col-sm-6 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
<?php }else if($Inc==4){ ?>
<div class="item">
<div class="col-sm-6 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
<?php } ?>
<?php
if($Inc==4){
$Inc =1;
}
$Inc++;
endwhile;
endif;
wp_reset_postdata();
?>
Here is showing only last created post when i am clicking on readmore button of post.
remember i have called all posts on another template(our_program.php inplace of index.php) all posts are showing well but on single.php here is only only one recent post showing when i am clicking on read more of any post. my single.php code is below
<?php $args = array( 'post_type' => 'post');
query_posts($args);
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<section class="talent-development" id="telent-development">
<div class="container">
<div class="row">
<div class="section-content-text clearfix">
<div class="col-sm-12">
<h2><?php the_title(); ?></h2>
</div>
<div class="col-sm-5">
<div class="ourProgramImg">
<?php if( has_post_thumbnail()){
the_post_thumbnail();
}
?>
</div>
</div>
<div class="col-sm-7">
<div class="ourProgramContent">
<p>
<?php the_content();?>
</p>
</div>
</div>
</div>
<!--<div class="col-sm-6">
<div class="section-content-img">
<img src="img/sec.jpg" alt="" title="" />
</div>
</div>-->
</div>
</div>
</section>
<?php endwhile; else: ?>
<p> Not post Found </p>
<?php endif; ?>
and post page(permalink) code below
<?php $args = array( 'post_type' => 'post');
query_posts($args);
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<section class="talent-development" id="telent-development">
<div class="container">
<div class="row">
<div class="section-content-text clearfix">
<div class="col-sm-12">
<h2><?php the_title(); ?></h2>
</div>
<div class="col-sm-5">
<div class="ourProgramImg">
<?php if( has_post_thumbnail()){
the_post_thumbnail();
}
?>
</div>
</div>
<div class="col-sm-7">
<div class="ourProgramContent">
<p>
<?php echo substr(get_the_excerpt(), 0, 400); //the_content();?>
</p>
Read More
</div>
</div>
</div>
<!--<div class="col-sm-6">
<div class="section-content-img">
<img src="img/sec.jpg" alt="" title="" />
</div>
</div>-->
</div>
</div>
</section>
<?php endwhile; else: ?>
<p> Not post Found </p>
<?php endif; ?>