This is driving me crazy.
Need some help with this, please.
This is basically a bootstrap carousel inside a modal.
I figure some things out, everything's working, but now i need help to control the "data-slide-to" to define which slide opens on the modal window.
Here's what i have so far:
query_posts( array ( 'category_name' => 'video', 'posts_per_page' => -1 ) );
// The Loop
while ( have_posts() ) : the_post();?>
<div class="span6">
<?php the_post_thumbnail(); ?>
<div id="modalVideo-<? the_ID();?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="myCarousel-<? the_ID();?>" class="carousel slide">
<div class="carousel-inner">
<?php
$the_query = new WP_Query(array(
'category_name' =>'video',
'posts_per_page' => 1
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item active">
<?php the_content();?>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php
$the_query = new WP_Query(array(
'category_name' =>'video',
'offset' => 1
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item">
<?php the_content();?>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<a class="carousel-control left" href="#myCarousel-<? the_ID();?>" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel-<? the_ID();?>" data-slide="next">›</a>
</div>
<button class="btn" data-dismiss="modal" aria-hidden="true">X</button>
</div>
</div>
<?php endwhile;
// Reset Query
wp_reset_query();
?>
Any help would be much appreciated.
Thanks
Related
Normally in wordpress permalink will open to a single page. but this time the goal is to open the custom post type permalink in modal window. I have lots of custom post type, and I only like to apply the modal in the doctor custom post type .
how could I achieve this? here is my code:
<div class="slider-wrapper">
<div class="center-doc">
<!--start connect to db-->
<?php $args = array(
'post_type' => 'doctor',
'posts_per_page' => -1,
'orderby' => 'post_date',
'order' => 'DESC',
'post_status' => 'publish',
);
$posts = get_posts( $args );
foreach ( $posts as $post ): setup_postdata( $post );
?>
<!--end connect to db-->
<div class="slider-box">
<a href="<?php the_permalink(); ?>"> <!-- PERMALINK TO OPEN MODAL-->
<div class="feature-img"> <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail(); ?>
<?php else : ?> <img src="<?php echo get_template_directory_uri(); ?>/img/default-img.png" alt="<?php the_title(); ?>">
<?php endif; ?><!--/pro pic-->
</div>
<h6><?php the_title(); ?></h6>
<div class="content"><?php the_excerpt(); ?></div>
</a>
</div>
<!-- MODAL WINDOW TO OPEN WHEN PERMALINK CLICKED-->
<div id="modal" class="modal-window">
<div>
<i class="fa fa-times-circle" aria-hidden="true"></i>
<div class="detail-wraper">
<div class="detail-info">
<h3><?php the_title(); ?></h3>
<div class="details">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; wp_reset_postdata(); ?>
</div>
I am using Wordpress 5.9.3 version.
I have an issue with my site on Chrome. On firefox everything is ok, but when I open my page with chrome I don't see the first post on page, there is a blank space there when it should be, I can see that this post is in the code when I inspect this page. I'm searching for an answer for few days and don't know why is this happening. Anyone had a problem like that? please help me.
I'm loading my posts with wp query from category, im using also a clip path in css (but I tried to comment in and check page and same issue was there).
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="home-title text-center">Aktualności</h1>
<?php
$query = new WP_Query( array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => 'aktualnosci',
'posts_per_page'=> -1 ) ); ?>
<?php if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); ?>
<div class="post-short">
<div class="row">
<div class="col-md-6 col-sm-12">
<a href="<?php the_permalink(); ?>">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>" class="project_pics">
</a>
</div>
<div class="col-md-6 col-sm-12">
<h3 class="post-short_title text-center"><?php the_title(); ?></h3>
<?php the_date('d.m.Y', '<p class="text-center post-date">', '</p>'); ?>
<div class="excerpt">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
</div>
This is my code for displaying posts.
and page is szkola.webwitch.pl if anyone can check it
Thanks.
The pagination for this wordpress theme I am coding, don't seem to be working, any one with a better ideal? thank you in advance.
Below is my full code, I am kind of confused, had tried using a plugin and calling out the shortcode wp-pagenavi but its not working either, I would appreciate any help.
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged);
$query = new WP_Query($args);
if( $query->have_posts() ) :
while( $query->have_posts() ) : $query->the_post(); ?>
<div class="media">
<div class="media-left">
<div class="hovereffect">
<?php the_post_thumbnail();?>
<div class="overlay">
<h2>Share</h2>
<p class="icon-links">
<a href="#">
<span class="fa fa-twitter"></span>
</a>
<a href="#">
<span class="fa fa-facebook"></span>
</a>
<a href="#">
<span class="fa fa-instagram"></span>
</a>
</p>
</div>
</div>
</div>
<div class="media-body">
<h4 class="media-heading"><?php the_title()?></h4>
<p class="media-author"><b><?php the_author()?></b> - <?php echo get_the_date(); ?></p>
<?php the_content();?>
</div>
</div>
<?php endwhile;?>
<!-- pagination -->
<?php next_posts_link(); ?>
<?php previous_posts_link(); ?>
<?php else : ?>
<!-- No posts found -->
<?php endif; ?>
You have to use $query->max_num_pages in the second parameter of next_posts_link as you can see here
// next_posts_link() usage with max_num_pages
next_posts_link( 'Older Entries', $the_query->max_num_pages );
previous_posts_link( 'Newer Entries' );
I'm currently having some trouble getting only 2 posts to show on the home page.
These are pulling through from an events page elsewhere on the site.
<div class="container">
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; // End of the loop. ?>
<?php $whatson = new WP_Query(array(
'post_type' => 'whats_on'
)); ?>
<?php while($whatson->have_posts()) : $whatson->the_post(); ?>
<div class="col-sm-12 col-md-5">
<div class="thumbnail col-centered" style="width: 485px">
<?php the_post_thumbnail('thumbnail') ?>
<div class="caption">
<h3><?php the_title() ?></h3>
<h4><small></small></h4>
<p><?php the_field('whats_on_description'); ?></p>
</div><!--END caption-->
</div><!--END thumbnail-->
</div>
<?php endwhile; ?>
</div><!--END row-->
Thanks in advance. I'm very new to all of this.
Try this code:
$whatson = new WP_Query(array( 'post_type' => 'whats_on','posts_per_page' => 2 ));
Have you tried adding the 'post_per_page' parameter?
new WP_Query(array(
'post_type' => 'whats_on',
'post_per_page' => 2
));
I have a custom post type "members"
Im using bootstrap 3 to make a carousel displaying them so each item of the carousel has 4 "members" like:
<div class="item active">
<div class="row">
<?
$args = array( 'post_type' => 'equipo', 'posts_per_page' => 4 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$some_meta 'meta', true );
?>
<div class="col-md-3">
<div class="thumbnail">
<h4><? the_title(); ?></h4>
<p class="meta"><? echo $some_meta; ?></p>
</div><!-- thumbnail -->
</div><!-- col md 3 -->
<? endwhile; ?>
</div><!-- row -->
</div><!-- item active -->
So in the second carousel item (that has another 4 members) I want to make a new query to display the next 4 members in the database:
<div class="item"> <!-- NOTE THERE'S NO "ACTIVE" SO ITS THE SECOND ITEM -->
<div class="row">
<?
$args = array( 'post_type' => 'equipo', 'posts_per_page' => 4 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$some_meta 'meta', true );
?>
<div class="col-md-3">
<div class="thumbnail">
<h4><? the_title(); ?></h4>
<p class="meta"><? echo $some_meta; ?></p>
</div><!-- thumbnail -->
</div><!-- col md 3 -->
<? endwhile; ?>
</div><!-- row -->
</div><!-- item active -->
But it displays the same first 4 members.
How can I tell wordpress not to reset the query or something like that?
And my second question: Does anyone know how to order the way that custom posts displays? Maybe with tags or a more elegant solution, making an "order column" in the backend so I cant put a number for ordering?
Thanks
Hope this one is surely helps you.
[1] http://wordpress.org/plugins/wp-pagenavi/
Install this plugin and simply insert new div at last your displaying post code.
<div class="pagination">
<ul><?php wp_pagenavi(); ?></ul>
</div>
Your code will probably look like this:
<div class="item"> <!-- NOTE THERE'S NO "ACTIVE" SO ITS THE SECOND ITEM -->
<div class="row">
<?
$args = array( 'post_type' => 'equipo', 'posts_per_page' => 4 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$some_meta 'meta', true );
?>
<div class="col-md-3">
<div class="thumbnail">
<h4><? the_title(); ?></h4>
<p class="meta"><? echo $some_meta; ?></p>
</div><!-- thumbnail -->
</div><!-- col md 3 -->
<? endwhile; ?>
</div><!-- row -->
</div><!-- item active -->
<div class="pagination">
<ul><?php wp_pagenavi(); ?></ul>
</div>
Thanks.