I have an accordion style div with 3 boxes. When clicking it is opening and closing the content into view. I have an absolute positioned div with a background image behind that I need changed on each click. When I first load the page I am able to get it to work as you click each element. However, once you click any of those div boxes again it sticks to the same background image and won't cycle through. I have tried using .next(), .closest() but not working.
<?php
$args = array(
'post_type' => 'services',
's' => '-demand' // will exclude all post with the title name "Demand" present
);
$services = new WP_Query($args);
;?>
<?php if($services->have_posts()) : ?>
<section class="section__wrapper" id="services__set">
<div class="services__accordion" id="class-accordions">
<div class="services__container">
<?php $i = 1;
while($services->have_posts()): $services->the_post();
global $post;
$post_slug = $post->post_name; ?>
<div class="services__col" id="<?php echo $post_slug;?>">
<span class="h2 services__title"><?php the_title();?></span>
<div class="services__content">
<?php $barreDesc = get_field('class_description'); if($barreDesc): ?><p><?php echo $barreDesc; ?></p><?php endif; ?>
<div class="services__btn">
<a class="btn white-btn" href="<?php echo site_url(); ?>/locations/">Find A Studio</a>
</div>
</div>
</div>
<div class="services_bg" style="background-image:url(<?php the_field('service_feature_image');?>);"></div>
<?php $i++; endwhile;wp_reset_postdata();?>
</div>
</div>
</section>
<script>
jQuery(document).ready(function($) {
$('.services__content').css('height', '0');
$('.services__col').first().addClass("active-reveal");
$('.services_bg').first().addClass("active");
$('.services__col').click(
function() { //When you click on a button...
var isActive = $(this).hasClass('active-reveal');
if( isActive ){ //If it already has an active class...
$(this).removeClass('active-reveal'); //...it loses the active class....
}
else{ //If it does NOT already have an active class...
$('.services__col').removeClass('active-reveal'); //all buttons lose the active class...
$(this).addClass('active-reveal'); //...except this one.
}
if ($('.services__col').attr("class") == "active-reveal") {
$(this).next('.services_bg').removeClass('active');
} else {
$(this).next('.services_bg').addClass('active');
}
});
});
</script>
<?php endif;?>
Updated code with answer
<?php
$args = array(
'post_type' => 'services',
's' => '-demand' // will exclude all post with the title name "Demand" present
);
$services = new WP_Query($args);
;?>
<?php if($services->have_posts()) : ?>
<section id="services__set">
<div class="services__accordion" id="class-accordions">
<div class="services__container">
<?php $i = 1;
while($services->have_posts()): $services->the_post();
global $post;
$post_slug = $post->post_name; ?>
<div class="services__col" id="<?php echo $post_slug;?>">
<span class="h2 services__title"><?php the_title();?></span>
<div class="services__content">
<?php $barreDesc = get_field('class_description'); if($barreDesc): ?><p><?php echo $barreDesc; ?></p><?php endif; ?>
<div class="services__btn">
<a class="btn white-btn" href="<?php echo site_url(); ?>/locations/">Find A Studio</a>
</div>
</div>
</div>
<div class="services_bg" style="background-image:url(<?php the_field('service_feature_image');?>);"></div>
<?php $i++; endwhile;wp_reset_postdata();?>
</div>
</div>
</section>
<script>
jQuery(document).ready(function($) {
$('.services__content').css('height', '0');
$('.services__col').first().addClass("active-reveal");
$('.services_bg').first().addClass("active");
$('.services__col').click(
function() { //When you click on a button...
var isActive = $(this).hasClass('active-reveal');
if( isActive ){ //If it already has an active class...
$(this).removeClass('active-reveal'); //...it loses the active class....
}
else{ //If it does NOT already have an active class...
$('.services__col').removeClass('active-reveal'); //all buttons lose the active class...
$(this).addClass('active-reveal'); //...except this one.
}
if ($('.services__col').attr("class") == "active-reveal") {
$(this).next('.services_bg').removeClass('active');
} else {
$('.services_bg').removeClass('active');
$(this).next('.services_bg').addClass('active');
}
});
});
</script>
<?php endif;?>
Note: I am not promoting the products listed on the screenshot as it is not functional yet.
I am making a Woocomerence+Worpress site theme to my customer and i code it with pinegrow editor.
I have tree owls carousel slider in main page and its front-page.
Carousel 1 purpose = Show customer latest product, what are added. Left to right
Carousel 2 purpose = Show customer most highest rated product. Left to right
Carousel 3 purpose = Show customer products that are on sale. Left to right
Problem = my php.code works but don't go to right cards in slider, Do I need own codes for each card?, or is there better way to do it? and how I can change code to make Carousel 2 and 3 work like it
description.
<div class="card-body">
<?php
$args = array(
'post_type' => 'product',
'stock' => 1,
'posts_per_page' => 3,
'orderby' =>'date',
'order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div class="span3">
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="My Image Placeholder" width="65px" height="115px" />'; ?><h4><?php the_title(); ?></h4><span class="price"><?php echo $product->get_price_html(); ?></span></a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
Arvosteluja: <?php echo $product->get_review_count(); ?>
</div>
<!-- /span3 -->
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
I have integrated the Isotope grid .js library (https://isotope.metafizzy.co/index.html) with my Wordpress posts to display a nice grid: see screenshot below:
However, on initial load (and when I do a cache reload) the grid items seem to overlap. See below Screenshot:
I've enqueued the js library using a CDN, I can tell thats working. I have the below code. Firstly the loop to bring in the posts and then the bit of Javascript that initialises it.
<div class="container blog-card-container">
<div class="grid">
<?php
$my_query = new WP_Query('cat=[14]&posts_per_page=10');
?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
<div class="grid-sizer"></div>
<!-- Conditional a Link =========================================== -->
<?php
if(get_field('quote') == ''){
$yourTag = "<a href='".get_the_permalink()."'>" ;
} else {
$yourTag = "";
}
?>
<div> <?php echo $yourTag; ?> </div>
<div class="grid-item">
<div class="client-header-logo-card" style="background-color: <?php the_field('client_brand_colour'); ?>;">
<?php
$image = get_field('client_logo');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
<div class="clients-card-block">
<h2><?php the_title(); ?></h2>
<?php if( get_field('quote') ): ?><p class="client-quote"><span style="color:<?php the_field('client_brand_colour'); ?>; font-weight:bold;">“ </span><?php the_field('quote'); ?><span style="color:<?php the_field('client_brand_colour'); ?>;font-weight:bold;"> ”</span></p><?php endif; ?>
<?php if( get_field('quote_name') ): ?><p class="client-name" style="color:<?php the_field('client_brand_colour'); ?>;"><?php the_field('quote_name'); ?></p><?php endif; ?>
<?php if( get_field('quote_position') ): ?><p class="client-position" style="color:<?php the_field('client_brand_colour'); ?>;"><?php the_field('quote_position'); ?></p><?php endif; ?>
<?php if( get_field('button_text') ): ?>
<a class="btn btn-sm btn-client-archive" href="<?php the_permalink(); ?>" style="background-color:<?php the_field('client_brand_colour'); ?>;" role="button"><?php the_field('button_text'); ?></a>
<?php endif; ?>
<?php if( get_field('video_url') ): ?>
<div class="embed-container">
<?php the_field('video_url'); ?>
</div>
<?php endif; ?>
</div>
</div>
</a>
<?php endwhile; ?>
</div>
</div>
<script type="text/javascript">
// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer',
gutter: 20
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
</script>
I included this little bit of javascript after the init which is supposed to fx the issue, but I find them still overlapping:
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
My site is here by the way: http://webserver-meetandengage-com.m11e.net its around halfway down the homepage.
Do you think this is because I've included the javascript on the same page? Should I include it in it's own .js file? I tried this initially but I couldn't get it to work properly...
Seems you didn't include imagesLoaded plugin on the page. Please make sure that the plugin is added properly. Hope that'll resolve the overlapping issue. And you should add this <div class="grid-sizer"></div> outside the loop.
I'm trying to use slick slider as the Previous and Next buttons on a WordPress single CPT page.
So the slider would call all the posts of a specific CPT and show the featured image of the current post and on either side it would show the featured image of the previous and next posts.
As you navigate through the slide the corresponding content would appear.
The problem is that as you slide through you'll get the correct images and content, but the URL stays the same. Also you can't link to a specific post because it'll just go to the beginning of the slide.
Right now, this is what my single-CPT.php looks like
<?php
get_header();
rewind_posts();
if (have_posts()) {
while ( have_posts() ) : the_post();
$post_id = get_the_ID();
?>
// BEGIN SLIDER (WHERE FEATURED IMAGES ARE THE SLIDES)//
<section class="slider center">
<?php
$index = 0;
$carousel_args = array(
'post_type' => 'CPT',
'posts_per_page' => -1,
);
$carousel_query = new WP_Query( $carousel_args );
if ( $carousel_query->have_posts() ) {
while ( $carousel_query->have_posts() ) {
$carousel_query->the_post();
$title = get_the_title();
$link = get_permalink();
if ( has_post_thumbnail() ) {
$post_thumbnail_id = get_post_thumbnail_id();
$post_thumbnail_image = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
$post_thumb = $post_thumbnail_image[0];
} else {
$post_thumb = '';
}
$content = get_the_content();
$excerpt = get_the_excerpt();
// output//
?>
<div class="wow slide-in slide">
<div class="active">
<a href="<?php echo $link; ?>">
<img src="<?php echo $post_thumb; ?>" />
</a>
</div>
</div>
<?php $index++;
}
}
wp_reset_postdata();
endwhile;
?>
</section>
//END SLIDER - BEGIN CONTENT//
<div id="archive-post">
<div class="row">
<div class="columns small-12 medium-10 medium-offset-1 large-offset-0 large-8">
<article id="post-<?php the_ID(); ?>" role="article">
<div class="post-title">
<div class="row">
<div class="columns">
<h3><?php the_title(); ?></h3>
</div>
</div>
</div>
<div class="post-content">
<div class="row">
<div class="columns">
<?php the_content(); ?>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
Basically I need the URL to update along with the slide without refreshing the page. Is there any way to accomplish this?
Okay, so with a ton of help from a friend, I found a way to do this with the magic of AJAX and HTML5 Apis
Basically what you have to do is use the HTML5 Api to manipulate the browser's history, and use AJAX to load the desired content without refreshing. Here's what it ended up looking like:
The single post template stayed pretty much the same except I changed the slide query output a little from
<a href="<?php echo $link; ?>">
to
<a href="<?php echo $link; ?>" class="js-switchSlide" data-ajaxurl="<?php echo admin_url('admin-ajax.php'); ?>" data-title="<?php echo get_the_title(); ?>" data-id="<?php echo get_the_ID(); ?>">
I added the js-switchSlide class to be able to call it in my JS and AJAX functions later.
I added a couple of data attributes (data-ajaxurl,data-title, and data-id) that I will use in the ajax function.
The content section has been changed too, notice the new classes and id's
<div id="archive-post">
<div class="row">
<div class="columns small-12 medium-10 medium-offset-1 large-offset-0 large-8">
<article id="post-<?php the_ID(); ?>" <?php post_class( array('post-page', 'js-slideContainer') ); ?> role="article">
<input type="hidden" id="currentSlide" value="<?php the_ID(); ?>">
<div class="post-title">
<div class="row">
<div class="columns">
<h3 class="js-slideTitle"><?php the_title(); ?></h3>
</div>
</div>
</div>
<div class="post-content">
<div class="row">
<div class="columns js-slideContent">
<?php the_content(); ?>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
Here is the JS:
$(document).ready(function() {
This is used later to see whether the actual slide or the button was clicked
`var clickedSlide = true;`
Initiate the slide
$navslider = $('.slider').slick({
centerMode: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
focusOnSelect: true,
Here I make the slide responsive
`responsive: [
{
breakpoint: 1068,
settings: {
initialSlide: 0,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 768,
settings: {
initialSlide: 0,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 480,
settings: {
initialSlide: 0,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
}
},]
});`
Here is my Ajax call
`function slidesAjaxCall(slideID, slideTitle, slideHref, ajaxurl) {`
This part just makes the loading of the content a little smoother by fading it in and out.
`$( '.js-slideContainer' ).animate({
opacity: 0
}, 320);`
This is where I manipulate the browser history
`history.pushState(null, slideTitle, slideHref);
document.title = slideTitle;`
Here is where I place the values from the data attributes using POST method. Type is just the custom post type and action is the name of the Ajax function.
$.ajax({
url : ajaxurl,
method: 'POST',
data: {
id: slideID,
type : 'CPT',
action: 'hc_load_slide'
},
Self explanatory
`error : function( response ){
console.log('error');
},`
If successful:
`success : function( response ){
if( response === 0 ){
console.log('no slide found');
$( '.js-slideContainer' ).animate({
opacity: 1
}, 320);
} else {`
The post data is collected in the Ajax function in JSON format so it has to be parsed and inserted into the html
`var data = JSON.parse(response);
$( '.js-slideTitle' ).text(data.title);
$( '.js-slideContent' ).html(data.content);`
Make it behave nicely
`setTimeout(function(){
$( '.js-slideContainer' ).animate({
opacity: 1
}, 320);
}, 100);
}
}
});
}`
.js-switchSlide is the class in the a tag so I prevent it from going refreshing the page when clicked.
`$('.js-switcSlide').click(function(e){
e.preventDefault();`
This says that the slide was clicked, this will keep it from calling the ajax function twice
`clickedSlide = true;`
Collect all the values from the data attributes:
`var babyID = e.currentTarget.dataset.id;
var babyTitle = e.currentTarget.dataset.title;
var babyHref = e.currentTarget.href;
var ajaxurl = e.currentTarget.dataset.ajaxurl;`
Call the function
`babiesAjaxCall(babyID, babyTitle, babyHref, ajaxurl);
});`
Okay this next part loads the appropriate slide and content using the permalink. Remember, one of the issues was that I could get the slide to work fine, but when I navigated to a specific post the slide would start from the beginning.
`var currentSlideID = $( '#currentSlide' ).val();
var $slide = $(".slider [data-id='" + currentSlide + "']");
var slideIndex = $slide.parents('.slide').data("slick-index");
$babyslider.slick("goTo", slideIndex);
/* Trigger Ajax call if Chevron is clicked and not Slide */
$slider.on('afterChange', function(event, slick, currentSlide, nextSlide){
// Stop if clieckedSlide === true;
if (clickedSlide) {
clickedSlide = false;
return;
}
var slideIndex = $('[data-slick-index="' + currentSlide + '"]').find('.js-switchSlide');
var slideID = slideIndex.data('id');
var slideTitle = slideIndex.data('title');
var slideHref = slideIndex.attr('href');
var ajaxurl = slideIndex.data('ajaxurl');
babiesAjaxCall(babyID, babyTitle, babyHref, ajaxurl);
});
});`
Meanwhile, the Ajax function looks like this
`add_action( 'wp_ajax_nopriv_hc_load_slide', 'hc_load_slide' );
add_action( 'wp_ajax_hc_load_slide', 'hc_load_slide' );
function hc_load_baby() {
$id = $_POST["id"];
$type = $_POST["type"];
// echo $id . ' - ' . $type;
$args = array(
'post_type' => $type,
'p' => $id,
);
$slide = new WP_Query( $args );
if ( $slide->have_posts() ) :
while ( $slide ->have_posts() ) : $slide->the_post();
$title = get_the_title();
$content = apply_filters('the_content', get_the_content() );
endwhile;
endif;
echo json_encode([ 'title' => $title, 'content' => $content ]);
die();
}`
I know it's a long answer, but I hope that makes sense. It accomplishes exactly what I wanted. Thanks alecaddd for the lessons.
I've been trying to make this feature work for many days now and it's driving me nuts!
I have a single page theme in WP and in one of them there is a div on the left with a list of the posts in the site and on the right, a div that should display the content of the clicked post.
I found this question and followed up the linked tutorial and was partially successful.
I managed to bring the content dinamically, and all I want is being displayed but it seems the order of the tasks are wrong. Heres how it's acting:
I click on the link.
the current content goes away.
the loading span appears correctely.
the SAME content fades in.
after 1 second or so the current content is replaced with the new content and the address bar does not change at all.
Here's the code I have:
atracoes.js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.controle nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href)){
var aCarregar = hash+'.html #atr-conteudo';
$('#atr-conteudo').load(aCarregar)
}
});
$('.controle nav li a').click(function() {
var aCarregar = $(this).attr('href')+' #atr-conteudo';
$('#atr-conteudo').hide('fast',carregarConteudo);
$('#carregando').remove();
$('#atracoes').append('<span id="carregando">Carregando...</span>');
$('#carregando').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando());
}
function esconderCarregando () {
$('#carregando').fadeOut('normal');
}
return false;
});
});
index.php (the dynamic content part)
<div class="main" id="atracoes">
<div class="controle">
<nav>
<?php
$args = array( 'posts_per_page' => 20);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li>
<?php the_title(); ?>
</li>
<?php endforeach;
wp_reset_postdata();?>
</nav>
</div>
<div id="atr-conteudo">
<?php the_post_thumbnail(); ?>
<div id="atr-texto">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
</div>
</div>
single.php (the part I'm plucking with ajax)
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<div id="atr-texto">
<!-- post title -->
<h1>
<?php the_title(); ?>
</h1>
<!-- /post title -->
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</article>
You're calling the functions before you pass them to jQuery to execute, instead of allowing jQuery to execute them:
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando);
}
(Notice they no longer have () after the function names)