We Keep Coding

Hide Show Content Javascript WordPress posts

So I'm trying to make an list op posts on Wordpress, with the content hidden until you click on it, when you click on a other post, it will hide the open one, and show the new one. I came up with this script:
var activePlayer = null
function setActivePlayer(newActivePlayer) {
if (activePlayer) {
activePlayer.classList.remove(“EpisodeShow”);
activePlayer.classList.add(“EpisodeSHide”);
}
activePlayer = newActivePlayer;
if (newActivePlayer) {
newActivePlayer.classList.remove(“EpisodeSHide”);
newActivePlayer.classList.add(“EpisodeShow”);
}
}
Which is in the WordPress post loop like this
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="all-episodes">
<div onclick="{ setActivePlayer(event.element)};" class="row" id="episode-<?php echo get_the_ID();?>"><p class="episode-item">
<?php the_title(); ?> -
<?php echo get_the_date('d/m/Y'); ?> -
<?php echo strip_tags (get_the_term_list( get_the_ID(), 'shows', "",", " ));?> -
<?php echo strip_tags (get_the_term_list( get_the_ID(), 'genres', "",", " ));?>
</p>
</div>
</header><!-- .entry-header -->
<div class="episode-content EpisodeHide" id=" episode-content-<?php echo get_the_ID();?>">
<?php
the_content(
sprintf(
wp_kses(
/* translators: %s: Post title. Only visible to screen readers. */
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ),
array(
'span' => array(
'class' => array(),
),
)
),
get_the_title()
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
</footer><!-- .entry-footer -->
</article>
Which get the styles from a loaded stylesheet which is as simple as this:
.EpisodeHide {
display: none;
}
.EpisodeShow {
display: block;
}
Now I receive this error:
Uncaught ReferenceError: setActivePlayer is not defined
at HTMLDivElement.onclick ((index):103)
the line changes to the line where the posts onclick is on
<div onclick="{setActivePlayer(event.element)};" class="row" id="episode-6"><p class="episode-item">
Any suggestions?
It would help me a lot!!!
Thanks in advance

I figured it out!
For the people who want to know how:
Javascript
var activePlayer = null
function setActivePlayer(newActivePlayerID) {
var newActivePlayer = document.getElementById(newActivePlayerID);
if (activePlayer) {
activePlayer.classList.remove('EpisodeShow');
activePlayer.classList.add('EpisodeHide');
}
activePlayer = newActivePlayer;
if (newActivePlayer) {
newActivePlayer.classList.remove('EpisodeHide');
newActivePlayer.classList.add('EpisodeShow');
}
}
Post Loop Code
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="all-episodes">
<div onclick="{ setActivePlayer('episode-content-<?php echo get_the_ID();?>')};" class="row" id="episode-<?php echo get_the_ID();?>"><p class="episode-item">
<?php the_title(); ?> -
<?php echo get_the_date('d/m/Y'); ?> -
<?php echo strip_tags (get_the_term_list( get_the_ID(), 'shows', "",", " ));?> -
<?php echo strip_tags (get_the_term_list( get_the_ID(), 'genres', "",", " ));?>
</p>
</div>
</header><!-- .entry-header -->
<div class="episode-content EpisodeHide" id="episode-content-<?php echo get_the_ID();?>">
<?php
the_content(
sprintf(
wp_kses(
/* translators: %s: Post title. Only visible to screen readers. */
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ),
array(
'span' => array(
'class' => array(),
),
)
),
get_the_title()
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
</footer><!-- .entry-footer -->
</article>
The Style sheet is the same!
Works like a charm :)

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>

A load more button that will load more posts

I've been trying to add a load more button to my front page for a few months now. For my front page I have a query that shows my latest posts, 15 per page. I want a simple load more button that will start after the first 15 posts and appears after every 15 posts. I would think this is pretty simple to do, but I just can not figure out for the life of me how to set it up. If anyone could help I would be extremely appreciative.
front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 15,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) { ?>
<?php
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();

I'm not going to go into a huge amount of depth but you're going to need a button something like this at the bottom of your post
<div id="load-more">Load More< /div>
You'll then need some javascript / jQuery to watch for when that button is pressed
$('#load-more').on('click', function() {
console.debug("Load More button pressed");
});
From there you're going to need to make a little php script to get the next 15 posts. You will then need to call this from the javascript. I don't write WP code very often but it might look a little something like this
$lastPostId = $_GET['lastid']; // this will need to be passed from the javascript at a later point.
$posts = [];
$the_query = new WP_Query([
'posts_per_page' => 15,
'paged' => get_query_var('paged', $lastPostId)
]);
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$posts[] = ""// See comment bellow
}
}
$response = ["posts" => $posts];
echo json_encode($response);
From here you'll need to figure out how you want to pass your post's data back to the javascript. You have 2 options here. You can render the html view inside of the response or parse the data into a json like format and return that back to your javascript.
From here we're going to need to handle the response from your php script.
Note: it's up to you to figure out how you're going to handle getting the last id part. Logically you can just add a data-id to each post container and then use jquery to get the last-child's data-id
$('#load-more').on('click', function() {
var lastId = 15;
// Now we make the query and handle it
$.get("myabovephpscript.php", {lastid: lastId}, function( data ) {
// for this example I'm going to to assume you've prebuilt the
// html so we're going to append it to the page.
for( let i = 0; i < data.posts.length; i ++ ) {
$( '#postsContainer' ).append( data.posts[i].postData );
}
});
});
and we're done. All you have to do is fill in the blanks and tidy it all up. Small disclaimer. I've not tested this at all. I've just written these types of systems to many times.

Table dropdown menu disappears in Firefox

When you click on the drop-down menu next to "size" or "gender" in Firefox, the menu appears for a split second and then disappears. This happens on all of the individual product pages for this site. It seems to be working fine in other browsers.
I cannot figure out for the life of me why this is occurring.
Any ideas??
Here's the link:
http://chathamivy.com/shop/the-coastal-collection/catch-of-the-day/
This is the PHP for the form:
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">
<?php if ( ! empty( $available_variations ) ) : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php $loop = 0; foreach ( $attributes as $name => $options ) : $loop++; ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title($name); ?>"><?php echo wc_attribute_label( $name ); ?></label></td>
<td class="value"><select id="<?php echo esc_attr( sanitize_title( $name ) ); ?>" name="attribute_<?php echo sanitize_title( $name ); ?>">
<option value=""><?php echo __( 'Choose an option', 'woocommerce' ) ?>…</option>
<?php
if ( is_array( $options ) ) {
if ( isset( $_REQUEST[ 'attribute_' . sanitize_title( $name ) ] ) ) {
$selected_value = $_REQUEST[ 'attribute_' . sanitize_title( $name ) ];
} elseif ( isset( $selected_attributes[ sanitize_title( $name ) ] ) ) {
$selected_value = $selected_attributes[ sanitize_title( $name ) ];
} else {
$selected_value = '';
}
// Get terms if this is a taxonomy - ordered
if ( taxonomy_exists( $name ) ) {
$orderby = wc_attribute_orderby( $name );
switch ( $orderby ) {
case 'name' :
$args = array( 'orderby' => 'name', 'hide_empty' => false, 'menu_order' => false );
break;
case 'id' :
$args = array( 'orderby' => 'id', 'order' => 'ASC', 'menu_order' => false, 'hide_empty' => false );
break;
case 'menu_order' :
$args = array( 'menu_order' => 'ASC', 'hide_empty' => false );
break;
}
$terms = get_terms( $name, $args );
foreach ( $terms as $term ) {
if ( ! in_array( $term->slug, $options ) )
continue;
echo '<option value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . '>' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</option>';
}
} else {
foreach ( $options as $option ) {
echo '<option value="' . esc_attr( sanitize_title( $option ) ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $option ), false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</option>';
}
}
}
?>
</select> <?php
if ( sizeof( $attributes ) == $loop )
echo '<a class="reset_variations" href="#reset">' . __( 'Clear selection', 'woocommerce' ) . '</a>';
?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap" style="display:none;">
<?php do_action( 'woocommerce_before_single_variation' ); ?>
<div class="single_variation"></div>
<div class="variations_button">
<?php woocommerce_quantity_input(); ?>
<button type="submit" class="single_add_to_cart_button button alt"><?php echo $product->single_add_to_cart_text(); ?></button>
</div>
<input type="hidden" name="add-to-cart" value="<?php echo $product->id; ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
<input type="hidden" name="variation_id" value="" />
<?php do_action( 'woocommerce_after_single_variation' ); ?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php else : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php endif; ?>

do you use any other language to generate these dropdown menus?
As it written on your page it works fine for me.
Check this fiddle.
<select id="size" name="attribute_size">
<option value="">Choose an option…</option>
<option class="active" value="extra-small">Extra Small</option>
<option class="active" value="small">Small</option>
<option class="active" value="medium">Medium</option>
<option class="active" value="large">Large</option>
<option class="active" value="extra-large">Extra Large</option>
</select>
<select id="gender" name="attribute_gender">
<option value="">Choose an option…</option>
<option class="active" value="womens">Womens</option>
<option class="active" value="youth">Youth</option>
</select>

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