I'm trying to create a post filter by adding a hidden-class to element that don't have a specific category. I have multiple buttons with a 'data-thema'-attribute, I want to check the attribute value of the clicked button and compare it to the classes of the post elements. When the post has no class that equals the data-thema value, I want to add a hidden-class to that element.
Now when a button is clicked, all posts get the class hidden. This is what I want, but it needs to check if there are any posts with the particular class and then remove the hidden-class again.
This is what I have so far:
jQuery
$('.intro .themaWrapper span').on('click', function() {
var clickedTheme = $(this).attr('data-thema');
$('.posts .post').each(function() {
// $(this).addClass('hidden');
if ($(this).hasClass(clickedTheme)) {
$(this).removeClass('hidden');
} else {
$('.posts .post').addClass('hidden');
}
});
});
PHP
foreach( $themas as $category ) {
if( $category->parent == 0 ) {
echo '<span class="btn blue" data-thema="'. esc_attr( $category->slug ) .'">';
echo $category->name;
echo '</span>';
}
}
while ( $query->have_posts() ) {
$query->the_post();
$f = get_fields();
$classes = '';
$terms = wp_get_post_terms( get_the_ID(), 'thema');
foreach($terms as $t) {
$classes .= $t->slug . ' ';
}
echo "<div class='post ". $classes ."'>";
echo "<h2>".get_the_title()."</h2>";
echo "</div>";
}
You can resume the whole logic to a single chained expression:
$('span').on('click', function() {
$('.posts .post')
// Add the hidden class to all the posts
.addClass('hidden')
.removeClass('red')
// Filter those with the same thema
.filter('.' + $(this).data('thema'))
// Remove the hidden class for the filter results
.removeClass('hidden')
.addClass('red');
});
.posts {
margin-top: 20px;
}
.hidden {
display: none;
}
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-thema="thema-1">Thema 1</span>
<span data-thema="thema-2">Thema 2</span>
<span data-thema="thema-3">Thema 3</span>
<div class="posts">
<div class="post thema-1">Thema 1 div</div>
<div class="post thema-3">Thema 3 div</div>
<div class="post thema-2">Thema 2 div</div>
<div class="post thema-2 thema-1">Thema 1 and Thema 2 div</div>
</div>
Related
I am making a shortcode of a slider that shows my WP featured posts and that has the possibility to open the details of each post through a hidden div. The slider is based on this one from w3schools (from which you can see the code and test online from this address: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
The problem is that the slider is only visible in php once I click the next arrow and from there it works correctly. I don't know why, since in HTML it works fine.
The error apppears: Cannot read property 'style' of undefined in
slides[slideIndex-1].style.display = "block";
My CSS:
#slider {
width: 70%;
margin: auto;
position: relative;
font-size: 15px;
}
.slide {display: none;}
My PHP:
<?php $query = new WP_Query( $args );
ob_start();?>
<div id="slider" class="slider">
<div class="arrows">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a></div>
<?php
while( $query->have_posts() ) :
$query->the_post();
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post-
>ID), '');
$featuredID = get_post_thumbnail_id();?>
<div class="slide fade" id="slide">
<h2 class="zz-sc-jscss"><?php the_title(); ?></h2>
By <?php the_author(); ?> on <?php echo get_the_date( 'l, F d, Y' );
?>
<?php echo the_post_thumbnail();?>
<?php
echo "<div"; echo ' class="n"'; echo "id=".$featuredID.">";
$info = $featuredID;echo "</div>";
?> <div class="open">
<?php echo get_post_field('post_content', $post->ID);?>
<span class="cerrar">X</span></div></div>
<?php endwhile;
wp_reset_postdata();
return ob_get_clean();
}
My JS:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
The problem seems to be in the "slider" div, it does not seem to be closed. Also try moving it after the slide generation loop.
<div id="slider" class="slider"></div> <--missing
<div class="arrows">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I want array 1,3,5,7,9 layout will be reverse from array 0,2,4,6,8,10
for example 1st row layout- image on left and description on righ, the 2nd row layout- image on right and description on left, and continuously.
This is my function.php code
<?php
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
$image = get_field('featured_image', $term);
?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
</div>
</div><?php
} ?>
CSS code:
.row{
display: flex;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 15px;
}
.row .col {
flex: 1;
padding-right: 10px;
padding-left: 10px;
}
And the result still like this
my expectation will be like this:
We just need to change code in function.php as below.
<?php
$i=0;
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
$image = get_field('featured_image', $term);
if($i % 2){ ?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
</div>
</div>
<?php } else {?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
</div>
</div>
<?php }
$i++;
}
?>
Hope now you got all things and let me know still any help need.
I assume you want the array_diff of [0,2,4,6,8,10].
Array_diff returns what is missing in the array, if we use an range() to create the reference array then it would look like:
$yourarray = [0,2,4,6,8,10];
$diff = array_diff(range(min($yourarray), max($yourarray)), $yourarray);
//[1,3,5,7,9]
https://3v4l.org/6QY3r
you need to add following css to achieve your desired output:
when odd .product-cat div found apply order: 1; to image container(.product-cat-image) and order: 2; to detail container(.product-cat-details)
when even .product-cat div found apply order: 2; to image container(.product-cat-image) and order: 1; to detail container(.product-cat-details)
.product-cat:nth-child(odd) .product-cat-image{
-webkit-order: 1;
order: 1;
}
.product-cat:nth-child(odd) .product-cat-details{
-webkit-order: 2;
order: 2;
}
.product-cat:nth-child(even) .product-cat-image{
-webkit-order: 2;
order: 2;
}
.product-cat:nth-child(even) .product-cat-details{
-webkit-order: 1;
order: 1;
}
I'm creating a menu for wordpress, but when I click on the permalink the content stays the same. And my second dropdown does not work eather. The problem is that on my section where the content needs to be it not shows. The content just takes the last message and not the post i select on the menu.
https://i.gyazo.com/1698056c27baa40768659d2edab5e3d9.png
This is how it stays even if i click an other post.
<?php
get_header();
?>
<div class="menu">
<div>
<h1>Documentatie</h1>
</div>
<?php $cats = get_categories();
foreach ($cats as $cat) {
$cat_id= $cat->term_id;
echo "<div class='dropdown'>";
echo "<button onclick='myFunction()' class='dropbtn'>".$cat->name."</button>";
echo "<div id='myDropdown' class='dropdown-content'>";
query_posts("cat=$cat_id&post_per_page=100");
if (have_posts()) : while (have_posts()) : the_post(); ?>
<button class="dropbutton"><h2><?php the_title(); ?></h2></button>
<?php endwhile;
?>
</div>
</div>
<?php
else :
echo "<p>Geen content gevonden</p>";
endif;
wp_reset_postdata();
}
?>
</div>
<div class="content">
<h2><?php the_title(); ?></h2>
<div class="wpcontent"><?php the_content(); ?> </div>
</div>
<?php wp_footer(); ?>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Have a look at my other 2 comments and proposed solution below, this is not a WP issue you're facing, it's JS/jQuery
echo "<div class='dropdown'>";
echo "<button onclick='myFunction(" . $cat->slug . ")' class='dropbtn btn-" . $cat->slug . "'>".$cat->name."</button>";
echo "<div id='myDropdown' class='dropdown-content'>";
And:
function myFunction(cat_slug) {
$('.btn-' + cat_slug).show();
}
Try that, should work :)
I have created one custom form in admin post editor, to send email templates to authors. I'm facing problem during ajax call that isn't redirecting to the page which I need and getting message post updated when selected template and click on send option
<div id="custom-meta-files" class="row">
<div class="col-md-12">
<form>
<div class="form-group">
<label style="" for="reject_email_template">Template Name</label>
<?php
// The Query
$the_query = new WP_Query( array(
'post_type' => 'email-templates',
'posts_per_page' => -1,
));
if ( $the_query->have_posts() ) { ?>
<select style="display: block;width: 100%;margin: 10px 0;" name="_reject_email" class="form-control" id="reject_email_template">
<?php
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<option value="'.get_the_ID().'">' . get_the_title() . '</option>';
} ?>
</select>
<?php
wp_reset_postdata();
} else {
// no posts found
}
?>
</div>
<button type="submit" class="reject-email-btn btn btn-primary" style="border:none; padding: 6px 1rem;color: #fff; background: #0085ba;text-decoration: none;">Send</button>
</form>
<div id="fromPartsTable"></div>
</div>
save posts in custom fields database
add_action('admin_init','event_meta_init');
function event_meta_init(){
foreach (array('post') as $type){
add_meta_box('my_all_meta', 'Reject Email', 'my_meta_setup', $type, 'normal', 'high');
}
add_action('save_post','my_meta_save');}
function my_meta_setup(){
global $post;
// using an underscore, prevents the meta variable
// from showing up in the custom fields section
$meta = get_post_meta($post->ID,'_post',TRUE);
// instead of writing HTML here, lets do an include
include(MY_THEME_FOLDER . '/metafields/events-fields.php');
// create a custom nonce for submit verification later
echo '<input type="hidden" name="my_meta_noncename" value="' . wp_create_nonce(__FILE__) . '" />';
}
function my_meta_save($post_id){
// authentication checks
// make sure data came from our meta box
if (!wp_verify_nonce($_POST['my_meta_noncename'],__FILE__)) return $post_id;
// check user permissions
if ($_POST['post_type'] == 'page'){
if (!current_user_can('edit_page', $post_id)) return $post_id;
}else{
if (!current_user_can('edit_post', $post_id)) return $post_id;
}
$current_data = get_post_meta($post_id, '_post', TRUE);
$new_data = $_POST['_post'];
my_meta_clean($new_data);
if ($current_data){
if (is_null($new_data)) delete_post_meta($post_id,'_post');
else update_post_meta($post_id,'_post',$new_data);
}elseif (!is_null($new_data)){
add_post_meta($post_id,'_post',$new_data,TRUE);
}
return $post_id;
}
function my_meta_clean(&$arr){
if (is_array($arr)) {
foreach ($arr as $i => $v){
if (is_array($arr[$i])){
my_meta_clean($arr[$i]);
if (!count($arr[$i])){
unset($arr[$i]);
}
}else{
if (trim($arr[$i]) == ''){
unset($arr[$i]);
}
}
}
if (!count($arr)){
$arr = NULL;
}
}
}
My ajax script is
jQuery.noConflict();
(function( $ ) {
function rejection_email(){
$.ajax({
url: "/rejection-email/",
data : {eid:$('#reject_email_template').val()},
success: function(data) {
var result = data
$('#fromPartsTable').html(result);
},
error: function() {
alert('Error occured');
}
});
}
$('.reject-email-btn').click(function(e) {
rejection_email();
});
})(jQuery);
I have comments stored in a database with the post id that the comment is on, the comments id, the comments parent id, and when it was created, the content, etc.. Now I've got a query that will select all of the comments for a particular post and loop through each one displaying it. However, how can I 'indent' the comments to show that they are a child of another comment?
My current idea (somewhat pseudo-code) was to do:
get comments
for each comments as comment {
if comment has parent
margin += 16;
style = margin-left: margin
else
margin = 0
<div class="post" style="<?php echo $style; ?>">
...
</div>
}
However, this doesn't seem to be working as some of the replies are not positioned correctly, or sometimes don't even position under the parent comment. Am I doing something wrong here, is there a better way to do this?
Actual Code (it's very ugly):
<?php
$comments = $backend->getCommentsFromPost($post_id);
$level = 0;
$margin = 0;
foreach ($comments as $comment) {
$author = $backend->getUserById($comment['comment_author_id']);
$author_name = $author[0]['user_name'];
$author_id_62 = $backend->to62($author[0]['user_id']);
$when = $backend->getTimePosted($comment['comment_created']);
$comment_karma = 2;
$style = "";
if ($comment['comment_parent'] != NULL) {
$margin = $margin + 60;
$style = "style=\"margin-left: " . $margin . "px;\"";
}
else {
$margin = 0;
}
?>
<div <?php echo $style; ?> class="post">
<div class="row">
<div class="col-md-8">
<div class="comment">
<p class="comment-data">
<?php echo $author_name; ?> | <?php echo $comment_karma; ?> points | <?php echo $when; ?></p>
<?php echo $comment['comment_content']; ?>
<p class="comment-footer">
<a class='cbtn btn-primary' title='upvote' href='#'><span class='fa fa-arrow-up'></span></a>
<a class='cbtn btn-primary' title='downvote' href='#'><span class='fa fa-arrow-down'></span></a>
<?php
if ($backend->isLoggedIn()) {
$user_id = $_SESSION['user_id'];
$comment_id = $backend->to62($comment['comment_id']); ?>
<a class='cbtn btn-primary' title='post reply' href='comment-reply.php?comment=<?php echo $comment_id; ?>'><span class='fa fa-reply'></span></a>
<?php
if ($user_id == $author[0]['user_id'] || $backend->isUserNotPeasant($user_id)) {
?>
<a class='cbtn btn-danger' title='delete comment' href="delete-comment.php?id=<?php echo $comment_id; ?>"><span class='fa fa-trash-o'></span></a>
<?php
}
}
?>
</p>
</div>
</div>
</div>
</div>
<?php } ?>
Cheers
It should be simply:
<style>
.post {margin-left: 0;}
.post div {margin-left: 16px;}
</style>
<div class="post">
POST HERE
<div>
reply
<div>
2nd reply
<div>
4th level
</div>
</div>
</div>
<div>
reply 2
</div>
</div>
<div class="post">
another post
</div>
http://jsfiddle.net/4f2wzwne/
You can prepend the comment with any number of as desired. One per level seems good. Track the level depth of the comment, which you can get from your query, and translate that to number of to prepend with.
First get comments without parent, then loop in them and get child comments. That will fix your problem I think.