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 I can create a responsive image carousel and slides custom post type content in WordPress

I want to create a responsive image carousel and slides custom post type content like featured image, title, etc.
I had created custom post type as banner in the following way:
function create_banners_post_type() {
$labels = array(
'name' => __( 'Banners' ),
'singular_name' => __( 'banner' ),
'add_new' => __( 'New banner' ),
'add_new_item' => __( 'Add New banner' ),
'edit_item' => __( 'Edit banner' ),
'new_item' => __( 'New banner' ),
'view_item' => __( 'View banner' ),
'search_items' => __( 'Search banners' ),
'not_found' => __( 'No banners Found' ),
'not_found_in_trash' => __( 'No banners found in Trash' ),
);
$args = array(
'labels' => $labels,
'has_archive' => true,
'public' => true,
'hierarchical' => false,
'supports' => array(
'title',
'editor',
'excerpt',
'custom-fields',
'thumbnail',
'page-attributes'
),
'taxonomies' => array( 'post_tag', 'category'),
);
register_post_type( 'banner', $args );
}
add_action( 'init', 'create_banners_post_type' );
and to display the output on the front page:
// function to show home page banner using a query of banner post type
function home_page_banner() {?>
<?php
$query = new WP_Query( array(
'post_type' => 'banner',
));
if ( $query->have_posts() ) { ?>
<ul>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<li>
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
</li>
<?php
endwhile;?>
</ul>
</div>
<?php
}
wp_reset_postdata();
}
in front page I had inserted this code:
<header id="showcase" class="grid">
<?php
if ( is_front_page() ) {
home_page_banner();
}
?>
</header>
which is creating a ul list and in ul list, each post is coming in li, following is inspect element screenshot:

Try this code
// function to show home page banner using a query of banner post type
function home_page_banner() {?>
<div class="carousel" data-transition="slide">
<?php
$query = new WP_Query( array(
'post_type' => 'banner',
));
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
<?php
endwhile;?>
</div>
<?php
}
wp_reset_postdata();
}

I've never used Owl Carousel before, but any time I have to do a carousel I go to either Slick or Flickity - has basically everything you could ever need.
Flickity JS Carousel
The below is an example of how to include your post content inside of a carousel.
Create the initial query:
<?php
// the query
$recent_posts = new WP_Query( array(
'category_name' => 'posts',
'posts_per_page' => 3,
));
?>
Create your slider
<div class="posts-slider"> <? // this is your wrapper div ?>
<?php if ( $recent_posts->have_posts() ) : ?>
<?php while ( $recent_posts->have_posts() ) : $recent_posts->the_post(); ?>
<div class="recent-post-slide">
<div class="recent-post-content">
<div class="row">
<div class="col-12">
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
Add some jQuery to make Flickity work:
<script>
jQuery(document).ready(function() {
var slider = jQuery('.posts-slider'); // The class name of the wrapper div
slider.flickity({
cellAlign: 'left',
contain: true
});
});
</script>

Auto scroll on woocommerce

i work on a project with woo.
On the mobile version of the site, the cart is a popup window.
When the customer adds many different products he must scroll down to see the buttons "view cart" "pay".
I try to add an autoscroll js code. When someone opens the cart it must scroll down automatically and stops at buttons "view cart" "pay".
I found some codes for "autoscroll to div" but none of them worked for me.
One simple js code i play with is this
$('#start').click(function() {
$('html,body').animate({
scrollTop: $('#bodycontainer').position().top
}, 1000 );});
but nothing happened.
Any help?
Thanks

You are trying to scroll the wrong thing, if it is the container that has the scroll. Replace it with this:
$('#start').click(function() {
$('#bodycontainer').animate({
scrollTop: 10000
}, 1000 );});
Now if you aren't using a container, then you may wish to add one.

I totally confused
My code for mini-cart is this
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $woocommerce;
?>
<?php do_action( 'woocommerce_before_mini_cart' ); ?>
<div class="cart_list <?php echo esc_attr( $args['list_class'] ); ?>">
<?php if ( ! WC()->cart->is_empty() ) : ?>
<?php
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );
if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
$product_name = apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key );
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
$product_price = apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key );
$product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
?>
<div class="media widget-product">
<div class="media-left">
<a href="<?php echo esc_url( $product_permalink ); ?>" class="image pull-left">
<?php echo trim($thumbnail); ?>
</a>
</div>
<div class="cart-main-content media-body">
<h3 class="name">
<a href="<?php echo esc_url( $product_permalink ); ?>">
<?php echo trim($product_name); ?>
</a>
</h3>
<p class="cart-item">
<?php echo wc_get_formatted_cart_item_data( $cart_item ); ?>
<?php echo apply_filters( 'woocommerce_widget_cart_item_quantity', '<span class="quantity">' . sprintf( '%s × %s', $cart_item['quantity'], $product_price ) . '</span>', $cart_item, $cart_item_key ); ?>
</p>
<?php
echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
'×',
esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
__( 'Remove this item', 'opal_drop' ),
esc_attr( $product_id ),
esc_attr( $cart_item_key ),
esc_attr( $_product->get_sku() )
), $cart_item_key );
?>
</div>
</div>
<?php
}
}
?>
<?php else : ?>
<div class="empty"><?php esc_html_e( 'No products in the cart.', 'opal_drop' ); ?></div>
<?php endif; ?>
</div><!-- end product list -->
<?php if ( ! WC()->cart->is_empty() ) : ?>
<p class="total"><strong><?php esc_html_e( 'Subtotal', 'opal_drop' ); ?>:</strong> <?php echo WC()->cart->get_cart_subtotal(); ?></p>
<?php do_action( 'woocommerce_widget_shopping_cart_before_buttons' ); ?>
<p class="buttons clearfix">
<?php esc_html_e( 'View Cart', 'opal_drop' ); ?>
<?php esc_html_e( 'Checkout', 'opal_drop' ); ?>
</p>
<?php endif; ?>
<?php do_action( 'woocommerce_after_mini_cart' ); ?>
and i try this
jQuery(document).ready(function($){
if ( $(window).width() < 768 || window.Touch) {
$('html, body').animate({
scrollTop: $("#cart-main-content .media-body").offset().top
}, 2000);
}
});
With no luck. Now i practise with jquery

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