We Keep Coding

How to show specific content relating to link clicked on

I am currently working on a site where my client wants a list of icons and when you click on an icon a panel slides in with the information relating to that icon. Here is a link to the section - https://vibrantpropertyservices-u8uj.temp-dns.com/wp/services/#services.
I have the sliding panel working but I can't seem to get the relevant content to show, it just shows the first icon's info. Here is my code:
<?php
$services_query = new WP_Query( array(
'post_type' => 'servicespage',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'menu_order'
)
);
?>
<?php if ( $services_query->have_posts() ) : ?>
<?php while ( $services_query->have_posts() ) : $services_query->the_post(); ?>
<?php $current_id = get_the_ID(); ?>
<div class="icon" onclick="openNav()" data-src="content-<?php echo $current_id ?>">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
<h3><?php the_title(); ?></h3>
</div>
<div id="slide" class="overlay">
×
<div id="content-<?php echo $current_id ?>">
<div class="test">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>
</div>
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("slide").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("slide").style.width = "0%";
}
I know I'm calling the id of "slide" but I don't know how to target <div id="content-<?php echo $current_id ?>"> for each individual link?
Many thanks

remove onclick function for both open
<div class="icon" data-src="content-<?php echo $current_id ?>">
and for close also
×
add below Jquery instead of functions
jQuery(document).on("click",".services-wrap .icon",function(){
jQuery(this).closest('div.overlay').css('width:100%');
});
jQuery(document).on("click",".overlay .closebtn",function(){
jQuery(this).closest('div.overlay').css('width:0%');
});

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

Wordpress get posts by week with Ajax

I am displaying Events(custom post type) by week based on a custom field of 'event_date'. I have the initial load working. What it does it gets the start and end of the current week and returns the events that fall within that period of time. What I need to be able to do is click a next or previous button and update the events based on that week(events should be updated via Ajax).
Here is my jQuery click function. It just hits the 'get-events.php' page and appends the data to a div.
$('.next-week').click(function(e) {
e.preventDefault();
$.ajax({
url: "http://gwsb-website/wp-content/themes/gwsb/get-events.php",
cache: false
}).done(function( html ) {
$('.events-listing').html( html );
});
});
Here is the php in 'get-events.php'
<!-- language: lang-php -->
<?php
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');
// Variables
$day = date('w');
$weekStart = date('Ymd', strtotime('monday this week'));
$weekEnd = date('Ymd', strtotime('sunday this week'));
$currentHeader = '';
query_posts(array(
'post_type' => 'event',
'posts_per_page' => -1,
'meta_key' => 'event_date',
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'event_date',
'value' => array( $weekStart, $weekEnd ),
'type' => 'numeric',
'compare' => 'BETWEEN'
)
)
));
?>
<?php while( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php
$tempDate = get_post_meta( get_the_ID(), 'event_date', true );
if ( $tempDate != $currentHeader ) : $currentHeader = $tempDate; ?>
<h3 class="event-date-header"><?php $date = DateTime::createFromFormat('Ymd', $currentHeader); echo $date->format('l, F d, Y'); ?></h3>
<?php endif; ?>
<div class="event<?php echo the_subcategory_class(); ?>">
<h4><?php the_title(); ?></h4>
<p><?php $content = get_the_content(); echo wp_trim_words( $content , '20' ); ?></p>
<div class="event-meta">
<?php if (get_field('start_time')) : ?>
<span><?php the_field('start_time'); ?></span>
<?php endif; ?>
<?php if (get_field('end_time')) : ?>
<span> - </span><span><?php the_field('end_time'); ?></span>
<?php endif; ?>
<?php if (get_field('location')) : ?>
<span class="dot">•</span><span><?php the_field('location'); ?></span>
<?php endif; ?>
</div><!-- .event-meta -->
</div><!-- .event -->
<?php endwhile; ?>
<?php wp_reset_query(); ?>

Wordpress loop within loop error

On my parent page, i have a custom page template calling another template:
if( have_posts() ): while( have_posts() ): the_post(); ?>
<div class="wrapper">
<?php get_template_part( 'template', 'page-section' ); ?>
<?php endwhile; endif; wp_reset_postdata(); ?>
Inside template-page-section.php, I have the following:
<?php
/*
Template Name: Page Section
*/
$args = array(
'post_parent' => 9,
'post_type' => 'page',
'orderby' => 'menu_order',
'posts_per_page' => -1,
'order' => 'ASC'
);
$wpq = new WP_Query( $args ); ?>
<?php while ( $wpq->have_posts() ) : $wpq->the_post(); ?>
<?php if ( $post->ID == 101 ) {
include( 'template-slider.php' );
} ?>
<div class="page-section">
<h1><?php the_title(); ?></h1>
<?php /* The loop */ ?>
<?php the_content(); ?>
</div>
<?php endwhile; wp_reset_postdata();?>
Within the template-slider.php, is the following:
<div id="slider-container">
<ul id="slider">
<? $query = get_pages(
array(
'post_type' => 'slides',
'orderby' => 'menu_order',
'posts_per_page' => -1
));
foreach( $query as $post ) {
setup_postdata( $post ); ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail', $thumbsize[0] ); ?>
<li>
<img src="<?php echo $image[0]; ?>">
</li>
<?php } wp_reset_postdata(); ?>
</ul>
</div>
The issue is that once wordpress hits the loop within the slider-template, the information that it echos for the post content is not a child post of the parent, but the parents content.
Can anyone tell me what I'm doing wrong? I cant figure it out!

This is just an untested guess, but try the following:
template-page-section.php
$wpq = get_posts( $args );
if( $wpq ) {
foreach( $wpq as $p )
{
if ( $p->ID == 101 ) {
include( 'template-slider.php' );
}
?>
<div class="page-section">
<h1><?php echo $p->post_title; ?></h1>
<?php echo $p->post_content; ?>
</div>
<?php
}
}
template-slider.php
<div id="slider-container">
<ul id="slider">
<?php
$query_pages = get_pages(
array(
'post_type' => 'slides',
'orderby' => 'menu_order',
'posts_per_page' => -1
));
if( $query_pages )
{
foreach( $query_pages as $pg ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $pg->ID ), 'single-post-thumbnail', $thumbsize[0] ); ?>
<li>
<img src="<?php echo $image[0]; ?>">
</li><?php
}
} ?>
</ul>
</div>
Reference: When should you use WP_Query vs query_posts() vs get_posts()?

Show posts and image in same div

I have featured images shown for different posts of same category in a page in a specific div. I need to show the whole post related to this image in the same page in another div. I know i must use JavaScript in this. But i need some reference which i can use for this. Can anyone help me with this? I am using the following code to show the images
<?php
/*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id = "meet_posts" class = "narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while( $recent->have_posts() ) : $recent->the_post();
$desc_values = get_post_custom_values("description");
?>
<div id="meetteam_featured_image">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
Thanks in advance.

Replace your above code with this following code :
<?php /*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id="meet_posts" class="narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while($recent->have_posts()):$recent->the_post();
$desc_values = get_post_custom_values("description");
?>
<div id="meetteam_featured_image" class="<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div>
<?php endwhile ?>
<div id="image-post-info"></div>
</div>
<?php get_footer(); ?>
Add this following code in functions.php file :
add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
function ajaxified_function() {
$temp = get_post($_POST['post_id']);
echo $temp->post_title.'<br/><br/>'.$temp->post_content;
die();
}
Add this following code in your custom js file :
jQuery(document).ready(function (){
jQuery('#meetteam_featured_image a').on('click',function(event){
event.preventDefault();
var post_id = jQuery(this).parent().attr('class');
jQuery.ajax({
type: "POST",
url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php',
data: 'action=ajaxified_function&post_id='+post_id,
success: function (msg) {
jQuery('#image-post-info').html(msg);
},
error: function () {
alert('Error');
}
});
});
});
Add custom js file by including following code in functions.php file :
function add_custom_scripts() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() .'/js/custom- scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );
Hope this will help....!!!!!

<div id = "meet_posts" class = "narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while( $recent->have_posts() ) : $recent->the_post();
$desc_values = get_post_custom_values("description");
?>
</div><!--close first div-->
<div id="meetteam_featured_image">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div><!--close second div-->
<?php endwhile; ?>