Looping in Wordpress with Pods Plugin - php

I am trying to create a loop for a group of divs that are being entered in as Pods via Wordpress admin panel.
I have the Pods setup. I could have them setup improperly, but I believe they are setup correctly. I have one Pod and the info is as follows:
Pods Information:
Label: advisors
Name: advisor
Type: Custom Post Type
Storage Type: Meta
Number of Fields: 2
Field 1 Information:
Label: Advisor Name
Name: advisor_name
Field Type: Plain Text
Field 2 Information:
Label: Advisor Title
Name: advisor_title
Field Type: Plain Text
The HTML I am trying to replicate is:
<div class="small-container text-center advisor-list">
<h1 class="text-center">Header Title</h1>
<div class="row gutter-0 padding-30 text-center vpadding-30 ">
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2>Name</h2>
<h4>Title</h4>
</div>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2>Name</h2>
<h4>Title</h4>
</div>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2>Name</h2>
<h4>Title</h4>
</div>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2>Name</h2>
<h4>Title</h4>
</div>
<button id="showPartners" class="bttn bttn-4 bttn-4a vpadding-30">View Our List of Partners</button>
</div>
This is as far as I have gotten with the PHP:
<div class="small-container text-center advisor-list">
<h1 class="text-center">Header Title</h1>
<div class="row gutter-0 padding-30 text-center vpadding-30 ">
<?php
function get_the_pod($pod_name, $pod_fields, $order = 'name'){
$item_no=0;
$pod = new Pod($pod_name);
$pod->findRecords($order);
while ($pod->fetchRecord()){
foreach ($pod_fields as &$field){
$results[$item_no][str_replace(".guid","",$field)] = $pod->get_field($field);
if($field == end($pod_fields)){$item_no++;}
}
}
return $results;
}
?>
<?php $fields = array('name'); ?>
<?php $advisors = get_the_pod('advisors', 'name DESC'); ?>
<?php foreach($advisors as $advisor){ ?>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png">
<h2 ><?php echo $item['advisor_name']; ?></h2>
<h4><?php echo $item['advisor_title']; ?></h4>
</div>
<?php } ?>
<button id="showPartners" class="bttn bttn-4 bttn-4a vpadding-30">View Our List of Partners</button>
</div>
</div>
If anyone has any input, it would be greatly appreciated.
Thanks

You are using Pods 1.X methods. Here is much simpler code using Pods 2.X methods.
You will want to check out the docs pages for pods() and pods::find(), which has the infromation about how to set $param for pods(), for more information.
<?php
$param = array( 'orderby' => 't.name' );
$advisors = pods('advisors', $param );
foreach($advisors as $advisor) {
$advisor_name = $advisor->field( 'advisor_name' );
$advisor_title = $advisor->field( 'advisor_title' );
?>
<div class="box column large-3 vpadding-10 medium-3 text-center">
<img src="/wp-content/uploads/2013/08/icon-star.png" />
<h2><?php echo $advisor_name; ?></h2>
<h4><?php echo $advisor_title; ?></h4>
</div>
<?php } //end foreach
?>

Pods posts within loop using core Wordpress loop type and structure, you can use it with your own data values
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php
$team = new Pod('sliders');
$team->findRecords('slider_number ASC');
$total_members = $team->getTotalRows();
?>
<?php if( $total_members>0 ) : ?>
<?php while ( $team->fetchRecord() ) : ?>
<?php
// set our variables
echo $member_id = $team->get_field('id');
echo $member_name = $team->get_field('post_title');
echo $number = $team->get_field('slider_number');
echo $img = $team->get_field('slide_img._img');
?>
<?php endwhile ?>
<?php endif ?>
</div>
</div>
<?php endwhile; endif; ?>

Related

Dynamically change (or user change) the number of columns in Wordpress

I'm trying to display a custom post type ' products' here:
The issue is, in the close future they will have 7 products which will leave one on a row on its own.
Is there a way I can alter the number of columns dynamically, So if there are 6 and under product it displays the posts I 3 columns, but if there are 7 items, it will display the posts section in 4 columns etc etc...
Or, is there a way I can allow the user to choose how many columns it displays in manually from the backend? I guess using something like Advanced Custom fields.
Ill be using a bootstrap based grid with a layout like this:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
so if either needs to change this structure dynamically based on the number of posts OR based on the number a user selects from a dropdown in the backend, to:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
Can anyone point me in the right direction to achieve this? I'm wondering if I'm overthinking it or indeed under-thinking it!
Thanks so much for looking!
PS - Heres what's I'm trying currently but it's not working...
<div class="container-flex our-products-strip">
<div class="lines-background-overlay" style="background-image: url(<?php bloginfo('stylesheet_directory'); ?>/images/background-stripes2.png);"></div>
<div class="container strip-padding">
<h2>Our Products</h2>
<hr class="hr-blue-more-bottom-space">
<div class="row justify-content-center">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $data = new WP_Query(array( 'post_type' => 'products' ));?>
<?php if(count($data) < 6 ){?>
<div class="col-md-6 col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<a href="<?php the_permalink(); ?>">
<div class="click-overlay"></div>
</a>
<div class="logo">
<?php
$image = get_field('logo_light');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<?php }
else{ ?>
<div class="col-md-3 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<a href="<?php the_permalink(); ?>">
<div class="click-overlay"></div>
</a>
<div class="logo">
<?php
$image = get_field('logo_light');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<?php } ?>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
</div>
</div>
If you are using php then definitely you can put if condition to perform the check
below is the example
<?php if(count($data) <= 6){?>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
<?php }
else{ ?>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<? } >

Looping posts of a custom post type in diffrent columns

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();
?>

Style latest post WordPress differently

My current blog page shows all my blog posts in a grid of 3 by 'x'. However at the top I want to display the latest blog post as some sort of a featured post and thus style it a bit different (i.e full width). I tried doing it through css with :first-child but that didn't really work well. So now I'm trying the php approach. I however have no clue how to approach this. Can anyone show me where to start? This is my current code.
<section id="blogs" class="cards-list">
<div class="container cards">
<div class="row center-xs">
<?php
if(get_post_type() == 'post') {
$currentBlog = get_the_ID();
} else {
$currentBlog = '';
}
$loopBlog = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => -1,
'post__not_in' => array($currentBlog)
));
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro = get_field('blog_intro');
$blogImage = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php
endwhile; wp_reset_query();
?>
</div>
</div>
You should be able to use current_post inside the loop and output different markup for the first post:
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro = get_field('blog_intro');
$blogImage = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>
<?php if ($loopBlog->current_post == 0): ?>
<!-- Output some other markup for the first post here -->
<div class="container-fluid">
</div>
<?php else: ?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>

Wordpress getting posts from category in personal layout

I am trying to get the posts from evenementen. I only want 4 posts because my layout is a 2x2 column. This column has a special template for the top and bot. I want to show the 4 evenementen in this column but I don't want to change the layout if there are less.
In the PHP file I loop all the posts in evenementen and want to do add these in the specific columns.
PHP FILE
<?php
$args = array( 'posts_per_page' => 4, 'offset'=> 1, 'category' => 0 );
$myposts = get_posts( $args );
$count = 0;
foreach ( $myposts as $post ) : setup_postdata( $post );
$count++;
if ($count == 1) {
$title1 = the_title();
$date1 = the_date();
$link1 = the_permalink();
}
elseif ($count == 2) {
$title2 = the_title();
$date2 = the_date();
$link2 = the_permalink();
}
elseif ($count == 3) {
$title3 = the_title();
$date3 = the_date();
$link3 = the_permalink();
}
elseif ($count == 4) {
$title4 = the_title();
$date4 = the_date();
$link4 = the_permalink();
}
else {
}
endforeach;
?>
<div class="wrapper">
<div id="bigone">
<div class="wrapper">
<h4 class="push"><?php echo $title1; ?></h4>
<div id="one"> <p class="greytext"><?php echo $date1; ?></p></div>
<div id="two"> <p class="opmaak">Evenementen</p></div>
</div>
</div>
<div id="bigtwo">
<div class="evenementenborder">
<div class="wrapper">
<h4 class="push"><?php echo $title2; ?></h4>
<div id="one"> <p><?php echo $date2; ?></p> </div>
<div id="two"> <p class="opmaak">Evenementen </p></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="evenementenfooter">
<div class="wrapper">
<div id="bigone">
<div class="wrapper">
<h4 class="push"><?php echo $title3; ?></h4>
<div id="one"> <p class="greytext"><?php echo $date3; ?></p></div>
<div id="two"> <p>Evenementen</p></div>
</div>
</div>
<div id="bigtwo">
<div class="evenementenborder">
<div class="wrapper">
<h4 class="push"><?php echo $title4; ?></h4>
<div id="one"> <p class="greytext"><?php echo $date4; ?></p> </div>
<div id="two"> <p>Evenementen </p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is the closest I got so far. But this does not put the text on the proper position and the hyperlink is also in the text.
Webpage
I want to ask you guys: what is the best way to solve this? Or if I made a mistake in the code why it is not on the proper position?
I found out that informatie is directly placed on the page and the echo can't find the information because on that moment it is empty. I don't know how to solve this. Please post if you see what I am doing wrong.
i think its the buffering, Put in the beggining
ob_start();
And in the end of the document
ob_end_flush();
And try again.
Check here for documentation about buffering

Display posts from a Wordpress custom post type category

I have a custom post type set up called TESTIMONIALS and two CPT categories set up which are CLIENT TESTIMONALS & CLINIC TESTIMONIALS
I am trying to display only the posts from the CLIENT TESTIMONALS CPT category.
What would I need to add to the below to achieve this?
<div role="tabpanel" class="tab-pane fade" id="profile">
<?php query_posts('post_type=testimonials'); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
You can use something like this.
<?php
$type = 'testimonials';
$args=array(
'post_type' => $type,
'category'=>'CPT',
'post_status' => 'publish'
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php
endwhile;
}
?>

Categories