I'm creating a loop in WordPress for a fancybox gallery. This means that each group of images needs to have the same rel identifier (for example rel="gallery1"). But since this is a nested loop, in other words, it's part of another loop, I need the next group of images in the loop to have a rel identifier different from the ones before/after (ex. rel="gallery2", rel="gallery3", etc.).
I've tried putting next the the word gallery, but it just loops and gives every object another number instead of keeping the same number for each item in the grouping.
I'm not sure if what I'm explaining is making sense. Here's a basic idea of what I'm trying to have.
{gallery of images 1}
<a href="image" rel="gallery1">
<img src="path">
</a>
<a href="image" rel="gallery1">
<img src="path">
</a>
<a href="image" rel=gallery1">
<img src="path">
</a>
{gallery of images2 }
<a href="image" rel="gallery2">
<img src="path">
</a>
<a href="image rel="gallery2">
<img src="path">
</a>
etc., etc.
The page itself is displaying a gallery of post thumbnails (featured images) from a custom post type. Clicking on a gallery item (representing one item in the custom post type) opens a Bootstrap modal window. In that modal window is a group of images related to that original gallery item (post type item). Clicking on one of those images opens a fancybox, but should only cycle through the images for that gallery item. Crazy enough?
The rest of the page is working perfectly. Just having trouble with this rel numbering thing.
I had hesitated posting all the code because it's so long, but if it's helpful, here you go:
// Define the query
$args = array(
'post_type' => 'pixieportfolio',
'post_status' => 'publish',
'orderby' => 'menu_order',
'meta_query' => array(
array(
'key' => 'featured_portfolio_item',
'value' => '1',
'compare' => '=',
)
),
'meta_key' => '_thumbnail_id',
'posts_per_page' => 999
);
$query = new WP_Query( $args );
$count = 0;
// Carousel // ?>
<div id="featuredCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php while($query->have_posts()): $query->the_post(); ?>
<li <?php if($count == 0){ echo 'class="active"';} ?> data-target="#featuredCarousel" data-slide-to="<?php echo $count++; ?>"></li>
<?php endwhile; ?>
</ol>
<div class="carousel-inner" role="listbox">
<?php $count = 0;
while ($query->have_posts()) : $query->the_post();
$count++;
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'pp-home-portfolio' );
$url = $thumb['0'];
$values = get_field('tech_choices');
$terms = get_the_terms($post->ID, 'post_tag');
$custom = get_post_custom($post->ID);
$caption = get_field('caption', '');
$client = get_field('client', '');
$project_url = get_field('project_url', '');
$date = get_field('date', ''); ?>
<!-- Wrapper for slides -->
<div class="item <?php if ($count == 1) { echo 'active';} ?>" data-slide-number="<?php echo $count++; ?>" id="<? the_ID(); ?>">
<div class="item-image" style="background-image: url(<?=$url?>);" title="<?php the_title() ?>" data-toggle="modal" data-target="#myModal<?php echo $count; ?>"></div>
<div class="project-details">
<div class="project-detail-border shadow-effect"></div>
<div class="project-detail">
<div class="top-detail">
<h4><?php the_title(); ?></h4>
<div class="short-description">
<?php $content = get_the_content();
echo wp_trim_words( $content , '20' );
?>
</div>
</div>
<table class="table project">
<tr>
<td valign="middle" class="fifty">
<?php $terms_as_text = strip_tags( get_the_term_list( $wp_query->post->ID, 'pixie-portfolio-categories', '', ', ', '' ) );
echo $terms_as_text;?>
</td>
<td valign="middle" class="fifty">
<?php if( $values ) {
if(in_array('WordPress', $values )){ ?>
<i class="fa fa-wordpress fa-2x" data-toggle="tooltip" title="Wordpress"></i>
<?php } if(in_array('HTML-5', $values )){ ?>
<i class="fa fa-html5 fa-2x" data-toggle="tooltip" title="HTML-5"></i>
<?php } if(in_array('CSS-3', $values )){ ?>
<i class="fa fa-css3 fa-2x" data-toggle="tooltip" title="CSS-3"></i>
<?php } if(in_array('Sportswear', $values )){ ?>
<i class="fa fa-bicycle fa-2x" data-toggle="tooltip" title="Sportswear"></i>
<?php } if(in_array('Adobe', $values )){ ?>
<i class="fa fa-paint-brush fa-2x" data-toggle="tooltip" title="Adobe"></i>
<?php } if(in_array('Code', $values )){ ?>
<i class="fa fa-code fa-2x" data-toggle="tooltip" title="Code"></i>
<?php } if(in_array('Ecommerce', $values )) { ?>
<i class="fa fa-database fa-2x" data-toggle="tooltip" title="MySQL"></i>
<?php }
} else {} ?>
</td>
</tr>
<tr>
<td colspan="2" class="more-info" data-toggle="modal" data-target="#myModal<?php echo $count; ?>">
<div class="view-project">View Project</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal<?php echo $count; ?>" class="modal fade" role="dialog" aria-labelledby="myModal<?php echo $count; ?>Label">
<div class="modal-dialog modal-lg" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title"><?php the_title() ?></h2>
<span>
<?php if( $terms ): ?>
<ul>
<?php foreach( $terms as $term ): ?>
<li><?php echo $term->name; ?></li>
<?php $icon = get_field('creative_icon', $term->taxonomy . '_' . $term->term_id); echo $icon; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</span>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div>
<p class="post-meta gallery-list">
<?php if( $client ): ?>
<span class="pixie-date">
<span class="title">Client:</span> <?=$client?>
</span>
<?php endif;
if ( $date ): ?>
<span class="post-cats">
<span class="title">Date:</span> <?=$date?>
</span>
<?php endif;
if ( $values ) { ?>
<span class="post-comments">
<?php $values = get_field('tech_choices'); ?>
<span class="title">Tech used in this project:</span>
<?php if(in_array('WordPress', $values )){ ?>
<i class="fa fa-wordpress fa-2x" data-toggle="tooltip" data-placement="bottom" title="WordPress"></i>
<? }
if(in_array('HTML-5', $values )){ ?>
<i class="fa fa-html5 fa-2x" data-toggle="tooltip" data-placement="bottom" title="HTML5"></i>
<? }
if(in_array('CSS-3', $values )){ ?>
<i class="fa fa-css3 fa-2x" data-toggle="tooltip" data-placement="bottom" title="CSS3"></i>
<? }
if(in_array('Sportswear', $values )){ ?>
<i class="fa fa-bicycle fa-2x" data-toggle="tooltip" data-placement="bottom" title="Sportswear"></i>
<? }
if(in_array('Adobe', $values )){ ?>
<i class="fa fa-paint-brush fa-2x" data-toggle="tooltip" data-placement="bottom" title="Illustrator and/or Photoshop"></i>
<? }
if(in_array('Code', $values )){ ?>
<i class="fa fa-code fa-2x" data-toggle="tooltip" data-placement="bottom" title="PHP, JQuery, etc."></i>
<? }
if(in_array('Ecommerce', $values )){ ?>
<i class="fa fa-shopping-cart fa-2x" data-toggle="tooltip" data-placement="bottom" title="ECommerce"></i>
<? }
if(in_array('MySQL', $values )){ ?>
<i class="fa fa-database fa-2x" data-toggle="tooltip" data-placement="bottom" title="MySQL"></i>
<? } ?>
</span>
<?php } ?>
</p>
</div>
<?php echo the_content(); ?>
<blockquote class="testimonial">
QUOTE GOES HERE
</blockquote>
</div>
<div class="col-md-4">
<div class="gallery">
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'darwin-modal-main' );
$url = $thumb['0'];
$thumb2 = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$url2 = $thumb2['0'];
$c = 0; ?>
<a href="<?=$url2?>" class="group" id="port_gal" rel="group<?php echo $c; ?>">
<img src="<?=$url?>" width="300" height="300">
</a>
<?php $images = get_field('gallery_images');
if( $images ) {
foreach( $images as $image ) {
?>
<a href="<?php echo $image['sizes']['large'] ?>" class="group" id="port_gal" rel="group<?php echo $c; ?>">
<img src="<?php echo $image['sizes']['darwin-modal-thumb'] ?>" alt="<?php $image['alt'] ?>" />
</a>
<?php }
} ?>
</div>
<div class="website-button">
<?php if ( $project_url ): ?>
<a class="btn btn-default" href="<?=$project_url?>" target="_blank" role="button">Visit Website</a>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php wp_reset_query(); ?>
</div>
Related
why comments isn't appear on my theme although I confirmed showing comments! can anyone help please
these are screenshots
https://1drv.ms/u/s!AjjUt5PVIDDuklSRItYU-MAfSzP7?e=2tUhsi
https://1drv.ms/u/s!AjjUt5PVIDDuklV3poojMWiK6lAG?e=3nnult
this is my single post page
<?php get_header(); ?>
<div class="container">
<div class="row">
<?php
if(have_posts()){
while(have_posts()){
the_post(); ?>
<div class="post p-3 m-3 bg-light">
<?php edit_post_link('<span class="float-right">Edit <i class="fa fa-edit"></i></span>'); ?>
<h3>
<a href="<?php the_permalink() ?>">
<?php the_title() ?>
</a>
</h3>
<small class="post-author text-secondary mx-2"><i class='fa fa-user mx-1'></i><?php the_author_posts_link(); ?></small>
<small class="post-date text-secondary mx-2"><i class="fa fa-calendar mx-1"></i><?php the_time('F j, Y') ?></small>
<small class="post-comments text-secondary mx-2"><i class="fa fa-comments mx-1"></i><?php comments_popup_link('no comments', 'one comment', '% comments', 'comment-url', 'commenting is disabled'); ?></small>
<?php the_post_thumbnail('', ['class' => 'img-fluid img-thumbnail d-block']); ?>
<?php the_content(); ?>
<hr>
<span class='post-tags'>
<i class='fa fa-tags'></i>
<?php the_category(', ') ?>
</span>
<span class='d-block'>
<?php
if(has_tag()){
the_tags();
} else{
echo 'Tags: no Tags';
}
?>
</span>
</div>
<?php
}
}
echo '<div class="clearfix"></div>';
echo'<div class="post-pagination py-3 my-2 mx-auto">';
echo '<span class="mx-3">';
previous_post_link();
echo '</span>';
echo '<span class="mx-3">';
next_post_link();
echo '</span>';
echo '</div>';
?>
</div>
<?php
echo '<hr>';
comments_template('/comments.php',true);
?>
</div>
in Wordpress, I am trying to display my most recent posts in a list. I have being able to list the links, but cant do the same with post thumbnail, title, date and category. What am I doing wrong?
<?php $recent_posts = get_posts('numberposts=5');
if($recent_posts) { ?>
<ul class="article_list">
<?php foreach( $recent_posts as $recent ) { ?>
<li class="regular">
<a href="<?php echo get_permalink($recent->ID); ?>">
<div class="text">
<p class="category"><?php echo the_date();?></p>
<h3 class="article_title"><?php echo get_the_title( $post_id ); ?></h3>
<p class="date"><?php echo the_date();?></p>
</div>
<div class="mask">
<img src="<?php the_post_thumbnail_url();?>" alt="" class="art_img">
</div>
</a>
</li>
<?php } ?>
</ul>
<?php } ?>
Another way to do it, using WP_Query
<?php
// args query
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'order' => 'DESC',
// display only posts in specifics categories (slug)
'category_name' => 'cat-a, cat-b'
);
// custom query
$recent_posts = new WP_Query($args);
// check that we have results
if($recent_posts->have_posts()) : ?>
<ul class="article_list">
<?php
// start loop
while ($recent_posts->have_posts() ) : $recent_posts->the_post(); ?>
<li class="regular">
<a href="<?php echo get_permalink(); ?>">
<div class="text">
<p class="category"><?php echo the_category(); ?></p>
<h3 class="article_title"><?php echo get_the_title(); ?></h3>
<p class="date"><?php echo the_date();?></p>
</div>
<div class="mask">
<img src="<?php the_post_thumbnail_url();?>" alt="" class="art_img">
</div>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php endif;
// reset query
wp_reset_postdata();
?>
Try below code its working for me.
<?php $recent_posts = get_posts('numberposts=5');
if($recent_posts) { ?>
<ul class="article_list">
<?php foreach( $recent_posts as $recent ) { ?>
<li class="regular">
<a href="<?php echo get_permalink($recent->ID); ?>">
<div class="text">
<p class="category"><?php echo get_the_category( $recent->ID );?></p>
<h3 class="article_title"><?php echo get_the_title( $recent->ID); ?></h3>
<p class="date"><?php echo get_the_date( $recent->ID );?></p>
</div>
<div class="mask">
<img src="<?php echo get_the_post_thumbnail_url($recent->ID,'full'); ?>" alt="" class="art_img">
</div>
</a>
</li>
<?php } ?>
</ul>
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 am trying to get the post thumbnail image for my carousel thumbnail indicators which are outside of the loop.
Currently it's setup with image placeholders but I need each thumb to represent the currently selected post.
<?php
$items = new WP_Query(array(
'post__in' => get_option('sticky_posts'),
'caller_get_posts' => 1,
'posts_per_page' => 10,
'meta_key' => '_thumbnail_id'
));
$count = $items->found_posts;
?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$ctr = 0;
while ( $items->have_posts() ) :
$items->the_post();
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
$custom = get_post_custom($post->ID);
$link = $custom["more-link"][0];
$class = $ctr == 0 ? ' active' : '';
?>
<div class="item<?php echo $class; ?>" id="<? the_ID(); ?>">
<?php the_post_thumbnail( 'full', array (
'class' => 'img-responsive'
)); ?>
<div class="carousel-caption">
<h3><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h3>
</div>
</div>
<!-- End Item -->
<?php $ctr++;
endwhile; ?>
</div>
<!-- End Carousel Inner -->
<div class="thumbs">
<div class="row">
<div class="col-md-2 active item" data-target="#myCarousel" data-slide-to="0"><img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive"></div>
<?php for($num = 1; $num < $count; $num++){ ?>
<div class="col-md-2 item" data-target="#myCarousel" data-slide-to="<?php echo $num; ?>"><img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive"></div>
<?php } ?>
</div>
</div>
</div>
<!-- End Carousel -->
Instead of:
<?php for($num = 1; $num < $count; $num++){ ?>
<div class="col-md-2 item" data-target="#myCarousel" data-slide-to="<?php echo $num; ?>">
<a href="#">
<img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive">
</a>
</div>
<?php } ?>
try using:
<?php $counter2 = 0; ?>
<?php while ( $items->have_posts() ) : $items->the_post(); ?>
<?php $counter2++; ?>
<div class="col-md-2 item <?php echo $counter2 == 1 ? 'active' : ''; ?>" data-target="#myCarousel" data-slide-to="<?php echo $counter2; ?>">
<a href="#">
<?php
the_post_thumbnail('thumbnail', array(
'class' => 'img-responsive'
));
?>
</a>
</div>
<?php endwhile; ?>
This will display it with your markup, but with a thumbnail image instead of the placeholder.
I have a loop in the sidebar of a custom template and it works perfectly when the page is loaded. The page is -
http://ere.doneready.com/senior-consultants
However the loop (which shows the list of names) does not work when I click the "next" button i.e. this page -
http://ere.doneready.com/senior-consultants/page/2/
Can anyone help? The following is the code I use -
<div id="people-sidebar-content">
<div id="custom-search-form-for-people">
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div id="custom-search-form-label"><label for="s" class="assistive-text"><?php _e( 'SEARCH' ); ?></label></div>
<span id="search-box-box"><input class="search-box" type="text" name="s" id="s" /></span>
<span id="search-box-button"><input type="image" name="submit" id="searchsubmit" SRC="http://www.doneready.com/ere/wp-content/themes/ere/images/search_button.png" HEIGHT="17" WIDTH="20" BORDER="0" ALT="Submit Form"></span>
</form>
</div>
<div id="people-sidebar-content-usable" class="senior-consultants-active">
<div id="sidebar-for-people">
<a class="directors" href="http:/www.ere.doneready.com/directors/">Directors</a><br />
<a class="finance-admin" href="http:/www.ere.doneready.com/finance-and-admin/">Finance & Admin</a><br />
<a class="senior-consultants" href="http:/www.ere.doneready.com/senior-consultants/">Senior Consultants</a><br />
<div id="actual-people-list">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args=array(
'post_type'=>'staff',
'posts_per_page' => 99,
'paged'=>$paged,
'staff_categories'=>'Senior Consultants'
);
$temp1 = $wp_query;
$wp_query= null;
$wp_query = new WP_Query($args);
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();
?>
<div class="actual-people-list-single">
<a href ="<?php the_permalink(); ?>">
<?php echo esc_html( get_post_meta( get_the_ID(), 'staff_short_name', true ) ); ?>
</a>
</div>
<?php
endwhile; endif;
/* PageNavi at Bottom */
$wp_query = null;
$wp_query = $temp1;
wp_reset_query();
?>
</div>
<a class="consultants" href="http:/www.ere.doneready.com/consultants/">Consultants</a><br />
<a class="technical-support" href="http:/www.ere.doneready.com/technical-support/">Technical Support</a>
</div>
</div><!--END PEOPLE-SIDEBAR-CONTENT-USABLE-->
</div><!--END PEOPLE-SIDEBAR-CONTENT-->
</div><!--END CONTENT CONTAINER-->
</div><!--END PAGE-WRAP-->
Welcome to StackOverflow, try to search the archives at least semi-extensively first because many variations of this question exist. Here's a link to my answer to a very similar question, it worked for me, it might work for you:
Making a single page blog in WordPress
Solved. I used a new loop and the code looks like this now -
<div id="people-sidebar-content">
<div id="custom-search-form-for-people">
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div id="custom-search-form-label"><label for="s" class="assistive-text"><?php _e( 'SEARCH' ); ?></label></div>
<span id="search-box-box"><input class="search-box" type="text" name="s" id="s" /></span>
<span id="search-box-button"><input type="image" name="submit" id="searchsubmit" SRC="http://www.doneready.com/ere/wp-content/themes/ere/images/search_button.png" HEIGHT="17" WIDTH="20" BORDER="0" ALT="Submit Form"></span>
</form>
</div>
<div id="people-sidebar-content-usable" class="senior-consultants-active">
<div id="sidebar-for-people">
<a class="directors" href="http:/www.ere.com.my/directors/">Directors</a><br />
<a class="senior-consultants" href="http:/www.ere.com.my/senior-consultants/">Senior Consultants</a><br />
<div id="actual-people-list">
<?php
$args = array( 'post_type' => 'staff', 'staff_categories'=>'Senior Consultants', 'posts_per_page' => 50 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="actual-people-list-single">
<a href ="<?php the_permalink(); ?>">
<?php echo esc_html( get_post_meta( get_the_ID(), 'staff_short_name', true ) ); ?>
</a>
</div>
<?php
endwhile;
?>
<?php
wp_reset_query();
?>
</div>
<a class="consultants" href="http:/www.ere.com.my/consultants/">Consultants</a><br />
<a class="technical-support" href="http:/www.ere.com.my/technical-support/">Technical Support</a>
<a class="finance-admin" href="http:/www.ere.com.my/finance-and-admin/">Finance & Admin</a><br />
</div>