Show post description outside while loop - javascript

I've a list of team members (custom post type) that I'm calling using WP_Query class. This part is working, however I'm trying to show the description (the_content()) of a team member outside the while loop when clicked on their name. This container (#team-info) is outside the while loop as you can see in the code. Page would ideally scroll to the description container after clicking on the name.
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="team-info"></div>
</div>
</div>
<div class="container mt-15">
<div class="row">
<div class="col-md-12">
<?php
// The Query
$the_query = new WP_Query( array (
'post_type' => 'my_team_sp',
) );
if( $the_query->have_posts() ): $i = 0;
while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; ?>
<div class="col-md-4 <?php echo $i ;?>">
<h4><?php the_title() ;?></h4>
</div>
<?php endwhile;
else :
endif;
/* Restore original Post Data */
wp_reset_postdata();
?>
</div>
</div>

You can Try this with jQuery. See the below Code.
<div class="container mt-15">
<div class="row">
<div class="col-md-12">
<?php
// The Query
$the_query = new WP_Query( array (
'post_type' => 'my_team_sp',
) );
if( $the_query->have_posts() ): $i = 0;
while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; ?>
<div class="col-md-4 <?php echo $i ;?>">
<h4><?php the_title() ;?></h4>
<div style="display: none;"><?php the_content(); ?></div>
</div>
<?php endwhile;
else :
endif;
/* Restore original Post Data */
wp_reset_postdata();
?>
</div>
</div>
jQuery
Add this code in your Js file.
jQuery(document).ready(function($){
$( '.team-name' ).on('click', function(){
var teamInfo = $(this).next().html();
$( '#team-info' ).html( teamInfo );
});
});

Related

Wordpress How to add infinite on scroll pagination for post which are displayed on homepage

Below is the code from home.php template which displays posts. Not sure how can I add ajax on scroll pagination. Once page is loaded 5-6 posts must be displayed and when user scrolls down, then loader icon must come and must show other remaining post.
I have created a page in wordpress and i have selected template as home.
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Home
*
* #package Genesis Sample
* #author StudioPress
* #license GPL-2.0-or-later
* #link https://www.studiopress.com/
*/
get_header();
get_template_part( 'content-archive' );
?>
<div class="body-container">
<div class="blogs-banner">
<?php
$image = get_field('image');
if (!empty($image)) : ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-main" />
<?php endif; ?>
</div>
<div class="about-container">
<div class="blog-list">
<div class="row-same-height">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
wp_reset_query();
$post_ids = (array) get_query_var('post_ids');
$args = array(
'post_type' => array('post'),
'post_status' => 'publish',
'posts_per_page' => 1500,
'paged' => $paged,
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post(); ?>
<a href="" class="link-post">
<div class="col-same-height">
<div class="content">
<div class="TopArticleCard-Container">
<div class="img-container">
<?php
$thumbnail = get_post_meta(get_the_id(), 'large_img', true);
if ( $thumbnail ) { ?>
<img src="<?php echo $thumbnail; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" loading="lazy"/>
<?php } else if ( has_post_thumbnail() ) {
the_post_thumbnail('large', ['title' => get_the_title()], ['alt' => get_the_title()]); ?>
<?php
} else { ?>
<img src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/09/default.jpg" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" loading="lazy"/>
<?php } ?>
</div>
<div class="article-description">
<div class="article-tag">
<?php $cat = get_the_category(); echo $cat[0]->cat_name; ?>
</div>
<div class="content">
<div class="article-title">
<?php the_title(); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
</div>
</div>
<?php get_footer();

My accordion toggle signs '+', '-' not changing i thin removeClass('current-bod') not working

This is my html code i am using ACF-
When i clicking others panel then it works but when i click same panel (open and close) then toggle sign only show '-' its not convert into '+' sign.
<section class="section-padding" id="currentOpening" style="background-color:#f2f2f2;">
<div class="container">
<div class="row">
<?php
if( have_rows('current_openings') ): ?>
<div class="current-opening">
<h2 class="section-heading">Current Openings</h2>
<div class="accordion-carrier">
<?php
while( have_rows('current_openings') ): the_row();
$profile = get_sub_field('opening_profile');
?>
<div class="openingTab"><a class="openingsToggle" href="javascript:void(0);"><?php the_sub_field('opening_profile'); ?> </a>
<?php
if( have_rows('openings') ): ?>
<div class="inner-carrier">
<?php
while( have_rows('openings') ): the_row();?>
<?php /*<h5><?php the_sub_field('opening_title'); ?></h5> */?>
<div class="inner-carrierrr">
<?php the_sub_field('opening_jd'); ?> Apply Now
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
</section>
and this js code-
<script>
jQuery('.openingsToggle').click(function(e) {
e.preventDefault();
jQuery('div.openingTab > a.openingsToggle.current-bod').removeClass('current-bod');
jQuery(this).addClass('current-bod');
var $this = jQuery(this);
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('.openingTab .inner-carrier').removeClass('show');
$this.parent().parent().find('.openingTab .inner-carrier').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
</script>

Simplify my javascript click add/toggle/remove class

I am working on a section on my website where I need to toggle, add, and remove a class.
I have something that works really good but I was wondering if there is a simple solution to make my code better, organized, and much more readable than how it is now.
I have 4 buttons:
.info-button-left-1
.info-button-left-2
.info-button-right-1
.info-button-right-2
These buttons trigger a class to ad to the following divs:
.product-information-block-left-1
.product-information-block-left-2
.product-information-block-right-1
.product-information-block-right-2
And this is my code:
<?php
// Create id attribute allowing for custom "anchor" value.
$id = 'info-product-block-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'info-product-block';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
?>
<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> container-fluid">
<div class="row">
<div class="container">
<div class="row product-heading">
<div class="col">
<h2><?php echo the_field('product_heading'); ?></h2>
<?php echo the_field('product_content'); ?>
</div>
</div>
<div class="row product-information">
<div class="col-left-product">
<div class="left">
<div class="product-name"><?php echo the_field('product_name_left'); ?></div>
<div class="product-year"><?php echo the_field('product_year_left'); ?></div>
<div class="product-button">
<?php
$link = get_field('product_link_left');
if( $link ):
$link_url = $link['url'];
$link_title = $link['title'];
$link_target = $link['target'] ? $link['target'] : '_self';
?>
<a class="buy-button" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>
</div>
</div>
<div class="right">
<div class="product-image">
<div class="info-button-left-1"></div>
<div class="info-button-left-2"></div>
<?php
$image = get_field('product_image_left');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="product-information-block-left-1">
<?php echo the_field('product_content_left'); ?>
</div>
<div class="product-information-block-left-2">
<?php echo the_field('product_content_left'); ?>
</div>
</div>
</div>
<div class="col-right-product">
<div class="right">
<div class="product-image">
<div class="info-button-right-1"></div>
<div class="info-button-right-2"></div>
<?php
$image_right = get_field('product_image_right');
if( !empty( $image_right ) ): ?>
<img src="<?php echo esc_url($image_right['url']); ?>" alt="<?php echo esc_attr($image_right['alt']); ?>" />
<?php endif; ?>
</div>
<div class="product-information-block-right-1">
<?php echo the_field('product_content_left'); ?>
</div>
<div class="product-information-block-right-2">
<?php echo the_field('product_content_left'); ?>
</div>
</div>
<div class="left">
<div class="product-name"><?php echo the_field('product_name_right'); ?></div>
<div class="product-year"><?php echo the_field('product_year_right'); ?></div>
<div class="product-button">
<?php
$link_right = get_field('product_link_right');
if( $link_right ):
$link_right_url = $link_right['url'];
$link_right_title = $link_right['title'];
$link_right_target = $link_right['target'] ? $link_right['target'] : '_self';
?>
<a class="buy-button" href="<?php echo esc_url( $link_right_url ); ?>" target="<?php echo esc_attr( $link_right_target ); ?>"><?php echo esc_html( $link_right_title ); ?></a>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(".col-left-product .info-button-left-1").click(function() {
$(".product-information-block-left-1").toggleClass("active");
$(".product-information-block-left-2").removeClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-right-2").removeClass("active");
});
$(".col-left-product .info-button-left-2").click(function() {
$(".product-information-block-left-2").toggleClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-right-2").removeClass("active");
});
$(".col-right-product .info-button-right-1").click(function() {
$(".product-information-block-right-1").toggleClass("active");
$(".product-information-block-right-2").removeClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-left-2").removeClass("active");
});
$(".col-right-product .info-button-right-2").click(function() {
$(".product-information-block-right-2").toggleClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-left-2").removeClass("active");
});
</script>
</section>
I am learning more and more every day. but I do think that there is a better way to do this.
Is there anyone who can give me an answer or a path to follow?
Thank you in advance.
To make the JS more generic you can use common class names on the elements. Then you can relate them to each other by using DOM traversal methods, such as closest() and find() to target the required element by matching indexes. Something like this:
let $productInfoBlocks = $('.product-information-block');
$('.info-button').on('click', e => {
let $el = $(e.target);
let $targetInfoBlock = $el.closest('.col').find('.product-information-block').eq($el.index()).toggleClass('active');
$productInfoBlocks.not($targetInfoBlock).removeClass('active');
});
.active { color: #C00; }
<!-- Note: I reduced the HTML to the relevant elements only -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row product-information">
<div class="col col-left-product">
<div class="right">
<div class="product-image">
<div class="info-button">info-button-left-1</div>
<div class="info-button">info-button-left-2</div>
</div>
<div class="product-information-block">product-information-block-left-1</div>
<div class="product-information-block">product-information-block-left-2</div>
</div>
</div>
<div class="col col-right-product">
<div class="right">
<div class="product-image">
<div class="info-button">info-button-right-1</div>
<div class="info-button">info-button-right-2</div>
</div>
<div class="product-information-block">product-information-block-right-1</div>
<div class="product-information-block">product-information-block-right-2</div>
</div>
</div>
</div>
In similar case I used data attribute in combination with a general class name:
The general syntax for buttons:
<div class="info-button" data-place="left" data-targetId="1"></div>
The general code for target divs:
<div class="product-information-block" data-place="right" data-targetId="1">
<?php echo the_field('product_content_left'); ?>
</div>
The general code to handle all occurances:
$(".col-right-product .info-button").click(function() {
var place=$(this).data("place");
var targetId=$(this).data("targetId");
$(".product-information-block").removeClass("active");
$(".product-information-block[data-place='"+ place +"'][data-targetId='"+ targetId +"']").addClass("active");
});

How to show all tags from posts before loop?

I have a structure like this in my wordpress search.php:
<div class="tags">
<!-- show all tags from posts in here -->
</div>
<div class="posts">
<!-- Wordpress Query loop here -->
<!-- get_the_tags() for each posts -->
<!-- End loop -->
</div>
I'm able to show inside the loop the list of tags for all the posts. But I need to show them on the div with the class "tags" that is outside the loop.
I know that if I want to show them after the loop is easy, I just have to use a global php variable and show them afterwards. But the only way I think I can add those tags before the loop is inserting them on the HTML DOM with javascript.
Is there any other method to do this more easily?.
Full code as requested:
<?php
global $global_tags;
?>
<div class="col-left">
<div class="tags">
<div class="placeholder-tags"></div>
</div>
</div>
<div class="col-right">
<div class="profile-wrapper">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="profile">
<a href="<?php echo get_permalink(); ?>">
<?php $current_profile = get_field("profile_personal")[0]; ?>
<div class="profile-image">
<img alt="" src="<?php echo $current_profile["profile_image"]['sizes']['thumbnail']; ?>"/><br>
</div>
<div class="profile-name">
<?php echo $current_profile["profile_name"] . ' ' . $current_profile["profile_surname"]; ?>
</div>
<div class="profile-country">
<?php echo $current_profile["profile_country"]; ?><br>
</div>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php if ( has_category("bolaber",$post->ID) ) { ?>
<div class="worked-with-us">
●
</div>
<?php } ?>
</a>
</div>
<?php endwhile; ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'default Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
I came up with a not very elegant or efficient solution, but it works perfectly, I added another loop on the tags placeholder with the same query loop parameters, but without showing anything but the tags.
<?php
global $global_tags;
?>
<div class="col-left">
<div class="tags">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php endwhile; ?>
<pre>
<?php
if ( $global_tags ) {
$global_tags = array_unique($global_tags);
foreach ($global_tags as $value) {
echo '</br>#'. $value .'';
}
}
?>
</pre>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
</div>
</div>
<div class="col-right">
<div class="profile-wrapper">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="profile">
<a href="<?php echo get_permalink(); ?>">
<?php $current_profile = get_field("profile_personal")[0]; ?>
<div class="profile-image">
<img alt="" src="<?php echo $current_profile["profile_image"]['sizes']['thumbnail']; ?>"/><br>
</div>
<div class="profile-name">
<?php echo $current_profile["profile_name"] . ' ' . $current_profile["profile_surname"]; ?>
</div>
<div class="profile-country">
<?php echo $current_profile["profile_country"]; ?><br>
</div>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php if ( has_category("bolaber",$post->ID) ) { ?>
<div class="worked-with-us">
●
</div>
<?php } ?>
</a>
</div>
<?php endwhile; ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'default Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Loading more posts on WP site using AJAX

I have site on WP. And I'm trying to load posts with AJAX. The difference from other such problems is that I have no pagination, the post section is very simple: two posts near and button below. On click on this button to two posts append previous two posts. I tried to write the solution by myself, but I have little expirience in PHP and maybe in it is the problem.
Post structure:
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 news-item">
<div class="news-date">
<?php the_time($format = 'j F Y'); ?>
</div>
<div>
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="more-link">Read more>
</div>
JS
$(function () {
var posts = 2;
var posts_offset = 0;
$("#load-post").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/wp-content/themes/1cka/load-posts.php",
dataType: 'html',
data: {
posts_offset: posts_offset
},
success: function (data) {
$('.news').append(data);
posts_offset += 2;
}
});
})
});
PHP
<?php require_once("header.php"); ?>
<?php
if (isset($_GET['posts_offset']))
{
$posts_offset = $_GET['posts_offset'];
}
global $post;
// записываем $post во временную переменную $tmp_post
$tmp_post = $post;
$args = array( 'posts_per_page' => 2, 'offset'=> $posts_offset );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
echo '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 news-item">
<div class="news-date">
<?php the_time($format = 'j F Y'); ?>
</div>
<div>
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
</div>
</div>'
<?php endwhile; ?>
<?php endif; ?>
<?php endforeach;
$post = $tmp_post;
?>
Sorry I don't have an immediate solution but have you seen https://github.com/WP-API/WP-API ? It implements a rest api for most of your wordpress content, you would be able to fetch any additional posts with a simple ajax call

Categories