I have created a custom-post-type and loaded the titles on my front-page as toggle-buttons. Now I want to make sure, that the content of the toggle-div is always related to the button I clicked. I tried to realize by simply using loading the post content, but I think I need to get the post-id as a variable or something into the loop. I have simply no idea how to make this work. I am a absolute beginner in PHP, hope someone can give me a hint?
Related Website: http:www.mzk.ernst-werbeagentur.de
My Code:
<?php
$query = new WP_Query( array( 'post_type' => 'praxen' ) );
if ( $query->have_posts() ) : ?>
<div class="container-fluid wrapper-slider-head">
<div class="container-fluid slider-head fullscreen" id="img-start">
<img src="http://mzk.ernst-werbeagentur.de/wp-content/uploads/2015/10/background-start.jpg" width='1920' height='1080'>
</div>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="container-fluid slider-head fullscreen" id="img-<?php echo $countimg; ?>" style="display:none;">
<?php echo get_the_post_thumbnail( $post_id, 'full', array( 'class' => 'img-' . $countimg ) ); ?>
</div>
<?php
$countimg++;
endwhile; wp_reset_postdata(); ?>
</div>
<?php endif; ?>
<?php
$query = new WP_Query( array( 'post_type' => 'praxen' ) );
if ( $query->have_posts() ) : ?>
<div class="container links-praxen">
<div class="row">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-sm-4"><div <?php post_class( 'jumbotron p' . $countpost ); ?>><div class="hovertogglecont"><div class="hovertogglecontinside">
<h2><?php the_title(); ?></h2>
<p><?php echo get_post_meta($post->ID, 'toggletitel', true); ?></p>
</div></div></div></div>
<?php
$countpost++; endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
<div class="container-fluid wrapper-praxisinfo" style="display:none;"> <!-- This div should toggle and show the related post-content by clicking on a link from the loop above. -->
<div class="container">
<div class="close-post-content"><i class="fa fa-times" style="cursor:pointer; color:#fff;"></i></div>
<div class="post-content">
<?php
$query = new WP_Query( array( 'post_type' => 'praxen' ) );
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<?php the_content(); ?>
<?php
endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
</div>
</div>
</div>
I want tot show the related post in the third loop.
Cheers and thank you very much,
David
once you load your page content, you cannot re-run php with some parameter after JavaScript button click. You would need to use AJAX call to get post content from some new PHP file for example post-content.php with is as parameter and then place it inside your wrapper-praxisinfo.
What I would suggest instead is to output all posts as you are doing now, and just hide ones that you dont want to see with JavaScript.
<div class="container">
<div class="close-post-content"><i class="fa fa-times" style="cursor:pointer; color:#fff;"></i></div>
<div class="post-content">
<?php
$query = new WP_Query( array( 'post_type' => 'praxen' ) );
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="post-id-<?php the_ID();?>">
<?php the_content(); ?>
</div>
<?php
endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
</div>
</div>
</div>
Here every post is wrapped inside a div with post ID as a class. You just need to hide all posts and on button click show the one that was clicked by ID.
Related
I simply have a single loop that's pulling through a CPT, but I would like to hide the whole container div of the loop, if it has no posts...
I'm trying various iterations of this if statement surrounding the container:
<?php if( have_posts() ): ?>
<?php endif; ?>
But I can't seem to get it to work properly... The full code blog is here:
<?php if( have_posts() ): ?>
<div class="container default-strip-section">
<h2><?php the_field('vacancies_title'); ?></h2>
<div class="row justify-content-center">
<?php
$args = array(
'post_type' => 'vacancies',
'posts_per_page' => 9999
// 'orderby' => 'title',
// 'order' => 'ASC'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="col-md-12">
<a href="<?php the_permalink(); ?>">
<p><?php the_title() ?></p>
</a>
</div>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
<?php endif; ?>
Can anyone point out what I'm doing wrong? I'm sure I'm missing something simple! Thanks for looking!! :)
#rank's answer is nearly correct -- it needs the object instance before the_post() again:
<?php
$args = array(
'post_type' => 'vacancies',
'posts_per_page' => 9999, // If you're wanting to show all posts, use -1 here.
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
?>
<div class="container default-strip-section">
<h2><?php the_field('vacancies_title'); ?></h2>
<div class="row justify-content-center">
<?php
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="col-md-12">
<p><?php the_title(); ?></p>
</div>
<?php
endwhile;
?>
</div>
</div>
<?php
endif;
wp_reset_postdata();
?>
You need to put the html of the container after the if have_posts(), where you check if there are any posts. This way the whole container is not displayed when the if is not true.
But you are using a ACF field of the post where you are showing this list of vacancies. So we save the id into a variable to be able to view the value inside of your custom query called the_query (this is not a self-explanatory / good name). Why not call it vacancies_query to have a more readable code. Putting it together it should look like this:
<?php
$current_post = get_the_ID();
$args = array(
'post_type' => 'vacancies',
'posts_per_page' => 9999
);
$vacancies_query = new WP_Query( $args );
if ( $vacancies_query->have_posts() ) : ?>
<div class="container default-strip-section">
<h2><?php the_field('vacancies_title', $current_post); ?></h2>
<div class="row justify-content-center">
<?php while ( $vacancies_query->have_posts() ) : the_post(); ?>
<div class="col-md-12">
<a href="<?php the_permalink(); ?>">
<p><?php the_title() ?></p>
</a>
</div>
<?php endwhile; ?>
</div> <!-- row -->
</div> <!-- container -->
<?php else :
/* nothing to see here */
endif;
wp_reset_postdata();
?>
<?php $query = new WP_Query(
array( 'post_type' => 'testimonial' ,
'posts_per_page' => -1,
) );
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="testimonials-name"><?php the_title();?></div>
<div class="testimonials-carousel-content"><p><?php the_content() ;?></p></div>
<?php endwhile; wp_reset_postdata(); ?>
<!-- show pagination here -->
<?php else : ?>
<!-- show 404 error here -->
<?php endif; ?>
I have this query but it display all the testimonial's I want it to display one testimonial at a time how to do this please help
I am not able to do this
If you are using bxslider then you need to add the class that bxslider is targeting in to your html. Something like this:
<div class="testimonials-slider">
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="testimonials-name"><?php the_title();?></div>
<div class="testimonials-carousel-content"><p><?php the_content() ;?></p></div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<!-- show pagination here -->
<?php else : ?>
<!-- show 404 error here -->
<?php endif; ?>
You are not initializing the bx slider in a right way, try the following code
<div class="testimonials-slider bxslider">
<?php $query = new WP_Query( array( 'post_type' => 'testimonial' , 'posts_per_page' => -1,) );
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="testimonials-name"><?php the_title();?></div>
<div class="testimonials-carousel-content"><p><?php the_content() ;?></p></div>
<?php endwhile; wp_reset_postdata(); ?>
<!-- show pagination here -->
<?php else : ?>
<!-- show 404 error here -->
<?php endif; ?>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.testimonials-slider').bxSlider({
mode: 'vertical',
slideMargin: 3,
auto:true
});
});
</script>
I'm trying to loop only custom post types using the WP loop, but only shows the ones I give by ID.
This is my "normal" loop right now:
<?php $args = array(
'post_type' => 'referenties', 'posts_per_page' => 5, 'order' => 'DESC',
); ?>
<?php
$number = 0;
query_posts($args);
if(have_posts()):
?>
<!-- /Carousel script -->
<div class="container">
<div class="carousel-loop">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<?php while(have_posts()): the_post(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
<?php endwhile; ?>
</ol>
<div class="controle-buttons">
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-circle-left"></i></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-circle-right"></i></a>
</div>
<!-- Carousel items -->
<div class="carousel-inner">
<?php while(have_posts()): the_post(); ?>
<!-- Carousel nav -->
<div class="item">
<div class="col-sm-2">
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<?php the_post_thumbnail(array(150,150)); // Declare pixel size you need inside the array ?>
</div>
<div class="col-sm-4">
<h4><?php the_title(); ?></h4>
<?php $bedrijf = get_field('naam_bedrijf'); ?>
<?php $feest = get_field('feest'); ?>
<?php $link = get_field('mylink'); ?>
<?php echo '<p>Bedrijfsnaam: ' . $bedrijf . '</p>'; ?>
<?php $post_object = get_field('mylink');
if( $post_object ): $post = $post_object; setup_postdata( $post ); ?>
<p>Feest type: <a style="color:#ff6600" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<?php endif; ?>
</div><?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<div class="col-sm-4 col-sm-offset-1">
<h4>Opmerking</h4>
<p><?php echo custom_field_excerpt_longer(); ?></p>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php echo '<p>' . wp_review_show_total() . '</p>'; ?>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
But I only want to show post ID's: 2706, 2462, 2514, 2511 and 2505.
The loop is shown in a carousel, this works fine. But I just want the ID's to show and not all posts added.
Use something like this:
<?php
$args = array(
'post_type' => 'referenties',
'post__in' => array(2706, 2462, 2514, 2511, 2505),
'order' => 'DESC',
);
$the_query = new WP_Query($args);
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
//post content output goes here
}
// Restore original Post Data
wp_reset_postdata();
} else {
// no posts found
}
The post__in () argument uses array with desired post ids to retrieve.
Don't use query_posts for custom queries. Too much that can go wrong.
Hope this helps :)
So I'm trying to pull only the latest sticky post from WordPress and only 1. I am using 'showpost=1' but for some reason if I have two posts tagged as sticky both show up?
<h2>Breaking News</h2>
<?php
query_posts('posts_per_page=1');
if (have_posts()) {
while (have_posts()) : the_post();
if ( is_sticky() ) : ?>
<div class="small-12 medium-6 large-4 columns">
<div class="img-holder">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail('sticky-hp-thumbnails');
}
?>
<?php if( get_field('sticky_sub_heading') ): ?>
<div class="tag">
<p>
<?php the_field('sticky_sub_heading'); ?>
</p>
</div>
<?php endif; ?>
</div>
</div>
<div class="small-12 medium-6 large-4 columns">
<h3><a href"<?php the_permalink() ?>">
<?php the_title(); ?>
</a></h3>
<?php if( get_field('sticky_date') ): ?>
<p class="sticky-date">
<?php the_field('sticky_date'); ?>
</p>
<?php endif; ?>
<p>
<?php the_field('sticky_summary'); ?>
</p>
Read More </div>
<?php endif;
endwhile;
}
wp_reset_query();
?>
Where am I going wrong in the above code?
Use posts_per_page instead of "showposts"
i.e.
query_posts( 'posts_per_page=1' );
Source:
https://codex.wordpress.org/Function_Reference/query_posts
Updated: Adding WP_QUERY code to fetch latest sticky post:
<?php
$args = array(
'posts_per_page' => 1,
'post__in' => get_option( 'sticky_posts' ),
'ignore_sticky_posts' => 1
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="post">
<h3><?php echo get_the_title(); ?></h3></a>
<p><?php echo get_the_excerpt(); ?></p>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
The easiest solution to solve (workaround) your problem is to remove the while loop. This way you'll print only one.
Of course, this is sub-optimal since other pages may be fetched and unused; you could try using posts_per_page=1 or post_limits=1 to see if solve the issue.
I have created custom post types and added some things through advanced custom fields.
Usually when i don't need to select from each category i would do something like this.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
<?php the_field('name_of_field'); ?>
endwhile; else: ?>
<?php endif; ?>
However now i have to select if it is one of two particular categories and then put category 'tjanster' in left column and 'produkter' in right column within my bootstrap grid.
So it will be 50% 'tjanster', 50% 'produkter'.
I have been searching like crazy for an solution but only found some code for functions.php that didn't work and 5years old posts that didn't work for me.
What am i suposed to to so i can have some similar output like this?
<div class="container">
<div class="row">
<div class="col-sm-6">
<!-- Output of category tjanster. -->
</div>
<div class="col-sm-6">
<!-- Output of category produkter. -->
</div>
</div>
</div>
For each column you need a WP_Query(). See codex for reference: http://codex.wordpress.org/Class_Reference/WP_Query.
<div class="container">
<div class="row">
<div class="col-sm-6">
<?php // tjanster
$args1 = array(
'category_name' => 'tjanster'
);
$query1 = new WP_Query( $args1 );
while ( $query1->have_posts() ) : $query1->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
<div class="col-sm-6">
<?php // produkter
$args2 = array(
'category_name' => 'produkter'
);
$query2 = new WP_Query( $args2 );
while ( $query2->have_posts() ) : $query2->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
</div>
</div>