Random Testimonial in Between each Blog Post on home.php - Wordpress - php

I have the normal WP loop for showing blog posts on home.php. Im trying to get a random div to populate after each blog post. So it will be:
BLOG POST -> RANDOM DIV -> BLOG POST -> RANDOM DIV
and so on...I've tried to create "testimonials" post type and randomize them with WP_Query, but it still will only pull one PER PAGE. I need multiple to display, but differently below each post. I am also using ACF, so I created testimonial custom field blocks, but I still cant them to randomize display multiple items.
PHP (within loop):
<a class="row blogRoll"href="<?php the_permalink(); ?>">
<div class="blogImg col-sm-3">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-md-9 blogBlack">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</div><!-- .entry-content -->
</a>
<div class="testimonial">
<?php the_field('testimonial_content1', 'option');
the_field('testimonial_author1','option'); ?>
</div>
<div class="testimonial">
<?php the_field('testimonial_content2', 'option');
the_field('testimonial_author2', 'option'); ?>
</div>
<div class="testimonial">
<?php the_field('testimonial_content3', 'option');
the_field('testimonial_author3', 'option'); ?>
</div>
</div>
JS:
var elems = $(".testimonial");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
Obviously, the loop is causing me the headache, because it will pull most recent posts and I just need to pull and not DUPLICATE the testimonial divs below a blog post. Any ideas will be appreciated.

Instead of shuffling and outputing the result straight away, you could shuffled an array (pool of testimonials) and then apply the first value to a first .testimonial class for example, and a second value from the shuffled array to the second .testimonial class, ... etc.
That article might be of some help, Randomly iterate through array without pulling duplicate values. You could replace numbers by testimonials... Regards.

Related

ACF get next sub_field data to current row

I'm using slick slider with ACF fields (Wordpress). I am trying to get the next and previous post title to the current slide (.slick-current).
I have three active slides with the class .slick-active, the middle one having also the class .slick-current(in addition to .slick-active)
<?php if (have_rows('videofeed','option')): ?>
<div class="slider-popular">
<?php while (have_rows('videofeed2','option')) : the_row(); ?>
<div class="slider-go-wrap">
<h2 class="video-title"> <?php the_sub_field('video_title'); ?> </h2><!-- the video title -->
<div class="video-controls">
<div class="prev-title-popular">
<span class="lightspan controltitles prev-videotitle">PREVIOUS TITLE HERE</span> <!-- previous ACF row sub_field "video_title" here -->
</div>
<div class="next-title-popular">
<span class="lightspan controltitles next-videotitle">NEXT TITLE HERE</span><!-- next ACF row sub_field "video_title" here -->
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php endif; ?>
Not being a very server side person, how would I integrate the following php loop into my ACF field repeater with the next and previous field data in the current slide? Is there an simpler way to do this than the php loop?
$rows = get_field('videofeed');
if($rows)
{
foreach($rows as $index => $row)
{
// from there, you can get prev / next data using loop index ($rows[$index-1] / $rows[$index+1]
}
}
Any advice from here would be great.
Issue solved with the following jQuery code, works for each slide:
$('.slider-go-wrap').each(function() {
currentSlide = $(this);
nextSlide = currentSlide.next();
prevSlide = currentSlide.prev();
nextSlideData = nextSlide.find('.video-title').html();
prevSlideData = prevSlide.find('.video-title').html();
currentSlide.find('.next-videotitle').html(nextSlideData);
currentSlide.find('.prev-videotitle').html(prevSlideData);
});

Wordpress image caption doesn't display correctly

I have a Wordpress page, in which my images appears on left and my text appears on right. The images fall down under the text when the page is loaded on mobile screen. I have a PHP code to achieve all of that, basically it switchs image and text places, and attributes left or right to each.
But since this is in place, I have trouble adding images' captions. When I want to add images' captions in my Wordpress admin, the caption doesn't come under the image but it comes up my text article (so, on the right part of the page). I guess my PHP code attributes automaticaly this place to every text.
I need the images' captions to be under my images, and I guess this has a lot to do with that PHP code you can see below. But I don't know how to fix that.
Here is my PHP:
<?php if (have_posts()): ?>
<div class="container">
<?php while(have_posts()): the_post(); ?>
<div class="row">
<div id="content_post">
<div class="col-lg-push-5 col-lg-6 col-md-push-6 col-md-6 col-sm-12 col-xs-12 ">
<?php
//get content from back office , filter imgs except featured img to place them later in <div id='img_content_right'>
$content2 = get_the_content();
$removed_imgs = array();
$content2 = preg_replace_callback('#(?!<img.+?id="featured_img".*?\/>)(<img.+? />)#',function($r) {
global $removed_imgs;
$removed_imgs[] = $r[1];
return '';
},$content2);
//add filter to the_content to strip images except img_menu et featured_img
add_filter('the_content', 'strip_images',2);
function strip_images($content){
$content=preg_replace('/(?!<img.+?id="img_menu".*?\/>)(?!<img.+?id="featured_img".*?\/>)<img.+?\/>/','',$content);
return $content;
}
the_content();
?>
</div>
</div>
<div class="col-lg-pull-6 col-lg-5 col-md-pull-6 col-md-6">
<div id='img_content_right'>
<?php
//append the images stripped from content
foreach($removed_imgs as $img){
echo $img; } ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
To appropriately handle the caption you need to get the attachment post object and then look at the post_excerpt.
There's a function in WordPress get_attached_media, which will list all of the images within a posts content. This be easier to iterate over then using regex to find the images.

php detects types of content in Wordpress post

I would like that my php detects seperatly images (media) and text, from a same wordpress post, in regard to display them in different columns. I am using Bootstrap, and I would like different display of each (text and image) according to the screen size.
Here is a code I have that displays all of the content of my post (image and text) at once, it works perfectly :
<div class="container">
<?php if (have_posts()): ?>
<div class="container">
<?php while(have_posts()): the_post(); ?>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
I would like the same way of loading content but instead of having just
<?php the_content(); ?>
I would like something like this to place text and image (of same post) in different div class:
<?php the_image(); ?>
AND
<?php the_text(); ?>
I know this is wrong code but I am trying to be clear in my explanation. I need that my client does not touch any of code, also shortcode in Wordpress post. Any input or advice would be very appreciated!
Many thanks!
Thank you for your answer! Lars Beck, you solved my problem!
Here is the code I was looking for:
<?php
//get content from back office , filter imgs except featured img to place them later in <div id='img_content_right'>
$content2 = get_the_content();
$removed_imgs = array();
$content2 = preg_replace_callback('#(?!<img.+?id="featured_img".*?\/>)(<img.+? />)#',function($r) {
global $removed_imgs;
$removed_imgs[] = $r[1];
return '';
},$content2);
//add filter to the_content to strip images except img_menu et featured_img
add_filter('the_content', 'strip_images',2);
function strip_images($content){
$content=preg_replace('/(?!<img.+?id="img_menu".*?\/>)(?!<img.+?id="featured_img".*?\/>)<img.+?\/>/','',$content);
return $content;
}
the_content();
?>
<div id='img_content_right'>
<?php
//append the images stripped from content
foreach($removed_imgs as $img){
echo $img;
}
?>
</div>
There is no way, to separate out images from the content section if they have just been included as part of the content.
Wordpress has featured image functionality built in for you. so you can use the_post_thumbnail() to echo out the image. Maybe this question can help you Wordpress featured image code
If this isn't enough for you and you need more flexibility you might want to look at advanced custom fields plugin - https://www.advancedcustomfields.com/ it makes it easy for you to add your own fields of any type you want.

Displaying last 3 blog posts on wordpress custom theme

I have a custom theme I am working on in wordpress, and I want to display the last 3 blog posts made onto my home page. I also want to style certain information regarding each post differently, like have the month and year be a certain font, and the day be much bolder and different font as well, along with displaying like a sentence or less of the article, followed by a "..." and "read more" type of thing.
How do I pull data from the blog? I know there are certain wordpress functions that can get me this data but I haven't been able to quite figure out how to do it, I'm not really well versed in the wordpress php functions. Right now I just have it hard coded but it's annoying to have to retype everything when I make a new post. I know you can set to show however many blog posts on the settings->reading but I want to be able to fully customize how it looks.
Let me know any suggestions on how I should go about doing this!
<div class="bottom">
<div class="wrap-2">
<h2>Blog</h2>
<div class="content-div">
<div class="bottom_box">
<div class="btm-img"><h4>April <span>25</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 1</p>
<p class="highlight3">lksj sldkf jsl lsdkfj sdklf sd</p>
Read More >
</div>
</div>
<div class="bottom_box">
<div class="btm-img"><h4>April <span>24</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 2</p>
<p class="highlight3">lsdkjf lsdk fjsl dkkddk lsdkfjpaskldfj;</p>
Read More >
</div>
</div>
<div class="bottom_box">
<div class="btm-img"><h4>April <span>23</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 3</p>
<p class="highlight3">lksdjf slkdfjsldkfj;as dfklsd;j fsld;kfj</p>
Read More >
</div>
</div>
</div>
</div>
</div>
Try the snippet below. Use your custom HTML block (the one with botom_box class) instead of this used below.
<?php $posts = get_posts("numberposts=3"); ?>
<?php if($posts) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<!-- your HTML block goes here --->
<div class="post">
<h3><a href="<?php echo get_permalink($post->ID); ?>" ><?php echo $post->post_title; ?></a></h3>
<?php the_excerpt(); ?>" rel="bookmark">read more</a>
</div>
<!-- end of the HTML block -->
<?php endforeach; ?>
<?php endif; ?>

Link Genres in Advanced Custom Fields

I am using Advanced Custom Fields. I want to link the values (eg. thriller, suspense, etc.) of Genre custom field so that when the user clicks on one of the values they will get a filtered list of posts. For eg. when they click Thriller they will get all the posts in the Thriller category.
My code so far for the ACF is as follows:
<!-- Entry Content Start -->
<article <?php post_class('entry clearfix fitvids'); ?>>
<div class="inner-post">
<div class="cover">
<div class="post-image">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
<div class="custom-fields">
<?php the_meta(); ?>
<div class="ad">
<img src="http://lorempixel.com/160/600" alt="">
</div>
</div>
</div>
<div class="the-content">
<?php the_content(); // This is your main post content output ?>
</div>
</div><!-- /inner-post -->
</article><!-- /entry -->
Is there a solution to this?
You should create a page with custom page template. In this template you should pull posts based on the custom field passed via $_GET parameter. For example: $movies = get_posts(array('meta_key'=>'your_custom_key', 'meta_value'=>$_GET['genre'])); Then you should generate appropriate links to access this page, which should link to our custom page including genre in our $_GET variable. For example the page's slug is movies. Then our links will have the following structure: /movies/?genre=custom_field_value.

Categories