Bootstrap: Carousel with keyboard controls - wordpress

Has anyone been able to implement Twitter Bootstrap carousel with keyboard controls? I know this is going to be implement in the next release, but for now I was wondering if any of you has been able to make it work.
Here's my current code:
<script type="text/javascript">
jQuery(document).keypress(function(event) {
if (event.keyCode === RIGHT_ARROW) {
$('a.carousel-control.right').trigger('click');
}
if (event.keyCode === LEFT_ARROW) {
$('a.carousel-control.left').trigger('click');
}
});
</script>
But I'm not getting anywhere with this. Any ideas?
Edit: Here's the Wordpress code I am running...
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">
<?php if ( $post->post_type == 'portfolios' && $post->post_status == 'publish' ) {
$attachments = get_posts( array(
'post_type' => 'attachment',
'posts_per_page' => -1,
'post_parent' => $post->ID,
'exclude' => get_post_thumbnail_id(),
'orderby' => 'menu_order',
'order' => 'ASC'
) );
?>
<?php if ( $attachments ) {
$the_rest = array_slice($attachments, 0, 100);
?>
<div id="carousel-<?php the_ID(); ?>" class="featured-carousel carousel slide carousel-fade">
<div class="carousel-inner">
<?php
global $post;
$post_num = 0;
foreach( $the_rest as $attachment) :
$image = wp_get_attachment_image_src( $attachment->ID, 'orion-thumb-900', false );
$post_num++;
?>
<div class="item <?php if($post_num == 1){ echo 'active'; } ?>">
<?php echo "<img src='" . $image[0] . "'>"; ?>
<div class="container">
</div> <!-- /.container -->
</div> <!-- /.item -->
<?php endforeach; ?>
<?php } ?>
<?php } ?>
</div> <!-- /.carousel-inner -->
<a class="left carousel-control" href="#carousel-<?php the_ID(); ?>" data-slide="prev">‹</a>
<a class="right carousel-control" href="#carousel-<?php the_ID(); ?>" data-slide="next">›</a>
</div> <!-- /.carousel -->
<section class="entry-content clearfix">
<?php the_content(); ?>
<?php orion_related_posts(); ?>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endwhile; ?>

thanks for that,
Even better with carousel events and devices support - 'click' sucks these days!
$(document).bind('keyup', function(e) {
if(e.which == 39){
$('.carousel').carousel('next');
}
else if(e.which == 37){
$('.carousel').carousel('prev');
}
});

Here's the correct code, thanks DavidChase and Flemingslone!
<script type="text/javascript">
jQuery(document).bind('keyup', function(e) {
if (e.keyCode==39) {
jQuery('a.carousel-control.right').trigger('click');
}
else if(e.keyCode==37){
jQuery('a.carousel-control.left').trigger('click');
}
});
</script>

Related

Show parent child taxonomy in nested tabs with its post

I want to show parent taxonomy in tab section and the under parent taxonomy i want to display child taxonomy in nested tab. On selection of child taxonomy i want to show its post. I am getting every time child taxonomy with with its post which i don't want.
Here is what i want:
TAB1(parent active) TAB2(parent)
ALL_TAB1(child active) SUB1_TAB1 SUB2_TAB1
(posts for all, sub1_tab1, sub2_tab1 and respectively whichever is active)
What i tried
<?php
/*
Template Name: Prac
*/
get_header();
// Get list of 'categories' for tabs -->
$args = array(
'hide_empty' => false,
'parent' => 0
);
$preferences = get_terms( 'preferences', $args );
?>
<div class="row">
<div class="col-md-12">
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile; ?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<!-- Create the tabs -->
<?php
// Use counter so that 'active' class is only applied to first tab
$counter = 0;
foreach ($preferences as $preference) { ?>
<li class="nav-item">
<a class="nav-link <?= ($counter == 0) ? 'active' : '' ?>" id="<?php echo $preference->slug;?>-tab" data-toggle="tab" href="#<?php echo $preference->slug; ?>" role="tab" aria-controls="<?php echo $preference->slug;?>" aria-selected="<?= ($counter == 0) ? 'true' : 'false' ?>"><?php echo $preference->name; ?></a>
</li>
<?php $counter++; } ?>
</ul>
<div class="tab-content" id="nav-tabContent">
<!-- Get the content for each tab -->
<?php
$counter2 = 0;
foreach ($preferences as $preference) { ?>
<div role="tabpanel" class="tab-pane fade <?= ($counter2 == 0) ? 'show active' : '' ?>" id="<?php echo $preference->slug; ?>" aria-labelledby="<?php echo $preference->slug; ?>-tab">
<div class="row">
<?php
$args = array(
'post_type' => 'project',
'tax_query' => array(
array(
'taxonomy' => $preference->taxonomy,
'field' => $preference->slug,
'terms' => $preference->term_id
)
)
);
$loop = new WP_Query( $args );
?>
<div class="col-md-6" id="<?php echo $preference->slug . '-clauses' ?>">
<?php
?>
<?php
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php
//Do something if a specific array value exists within a post
$term_list = wp_get_post_terms($post->ID, $preference->taxonomy, array("fields" => "all"));
?>
<?php foreach($term_list as $term_single) {
$category_children = get_terms(array(
'parent' => $term_single->term_id,
'hide_empty' => false
) );
$category_children_count = count($category_children);
?>
<?php } ?>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<?php echo $term_single->name; ?>
</li>
</ul>
<a class="col-md-6" href="<?php echo the_permalink();?>"><?php the_post_thumbnail();?><?php echo the_title(); ?></a>
<?php endwhile; endif; wp_reset_query(); ?>
</div>
</div> <!-- end row -->
</div> <!-- end tab-pane -->
<?php $counter2++; } ?>
</div> <!-- end tab-content -->
</div> <!-- end col -->
</div> <!-- end row -->
<!-- end content -->
<?php get_footer(); ?>
I am getting like this
TAB1 TAB2
SUB1_TAB1
post
SUB1_TAB1
post
SUB1_TAB2
Can anyone help ? Thanks.

How to get permalink for every post in this shortcode function

I want to get the permalink of the images that shown on the home page, so that when someone clicks on the image redirects to its full post.
add_shortcode( 'zee_recent_works', function( $atts, $content= null ){
ob_start();
$atts = shortcode_atts(array(
'slides' => 2,
'title' => '',
'description' => ''
), $atts);
extract($atts);
$item_per_slide = 4;
$args = array(
'numberposts' => $item_per_slide*$slides,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'zee_portfolio'
);
$portfolios = get_posts( $args );
$i = 1;
$j = 1;
$count = count($portfolios);
if ($count>0) {
?>
<div class="col-md-12">
<div id="scroller" class="carousel slide">
<div class="carousel-inner">
<?php
foreach( $portfolios as $key=>$value ) {
if( (($key+1)%($item_per_slide)==0) || $j== $count) {
$lastContainer= true;
} else {
$lastContainer= false;
}
if($i==1){
?>
<div class="item <?php echo ($key==0)? 'active': ''; ?>">
<div class="row">
<?php
}
?>
<div class="col-md-<?php echo round(12/$item_per_slide) ?>">
<div class="portfolio-item">
<div class="item-inner">
<?php
echo get_the_post_thumbnail( $value->ID, array(400,400), array(
'class' => "img-responsive",
'alt' => trim(strip_tags( $value->post_title )),
'title' => trim(strip_tags( $value->post_title ))
));
?>
<h5>
<?php echo $value->post_title; ?>
</h5>
<div class="overlay">
<?php
$full_img = wp_get_attachment_image_src( get_post_thumbnail_id($value->ID), 'full');
$img_src= $full_img[0];
?>
<a class="" title="<?php echo $value->post_title; ?>" href="<?php the_permalink(); ?>" rel="prettyPhoto"></a>
</div>
</div><!--.item-inner-->
</div><!--.portfolio-item-->
</div>
<?php
if(($i == $item_per_slide) || $lastContainer) {
?>
</div><!--/.row-->
</div><!--/.col-xs-->
<?php
$i=0;
}
$i++;
$j++;
}
?>
</div>
</div>
</div><!--/.col-md-12-->
<?php
}
return ob_get_clean();
});
and the link is there:
<a class="" title="<?php echo $value->post_title; ?>" href="<?php the_permalink(); ?>" rel="prettyPhoto"></a>
where the permalink should work but its not working.
Instead of the_permalink() you can try get_permalink($value->ID)
final line should be
<a class="" title="<?php echo $value->post_title; ?>" href="<?php echo get_permalink($value->ID); ?>" rel="prettyPhoto" ></a>
Hope it helps :)
Thanks.

WordPress: Get Post Thumbnail Outside of Loop

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.

wordpress shortcode for tab

i added this by custom post type. but i want to create this by shortcode method with the conditional statement. how to do this ? please anyone ans this ?
<?php
$args = array( 'posts_per_page' => 4, 'post_type'=> 'tab-items');
$myposts = get_posts( $args );
?>
<!--nab section date content area-->
<div class="date_section_area">
<!-- Nav tabs -->
<div class="date_section_list">
<ul>
<?php foreach( $myposts as $post ) : setup_postdata($post); ?>
<li><?php the_title(); ?></li>
<?php endforeach;
wp_reset_postdata(); ?>
</ul>
</div>
<!-- Tab panes -->
<div class="date_section_content">
<?php foreach( $myposts as $post ) : setup_postdata($post); ?>
<div class="single_date_section_content tab-pane fade" id="<?php the_ID(); ?>">
<?php the_post_thumbnail('tab-image'); ?>
<?php the_content(); ?>
</div>
<?php endforeach;
wp_reset_postdata(); ?>
</div>
</div>
As far as i understand your question,
i have an idea that you can do like this:-
add_shortcode('my_post_shorcode', 'my_shortcode_function');
function my_shortcode_function($attr, $content)
{
extract(
shortcode_atts( array(
'posts_per_page' => '4',
'post_type' => 'tab-items',
'style' => 'default'
), $atts)
);
if($style == 'style-1')
{
//Add Your Style-1
} else if($style == 'style-2') {
//Add Your Style-2
} else {
$args = array( 'posts_per_page' => $posts_per_page, 'post_type'=> $post_type);
$myposts = get_posts( $args );
$tab_title = "";
$tab_content = "";
foreach ($myposts as $post)
{
setup_postdata($post);
$tab_title .= '<li>'.the_title().'</li>';
$tab_content .= '<div class="single_date_section_content tab-pane fade" id="tab-post-'.the_ID().'>
' . the_post_thumbnail('tab-image') . the_content() . '
</div>';
wp_reset_postdata();
}
?>
<!--nab section date content area-->
<div class="date_section_area">
<!-- Nav tabs -->
<div class="date_section_list">
<ul>
<?php echo $tab_title;?>
</ul>
</div>
<!-- Tab panes -->
<div class="date_section_content">
<?php echo $tab_content;?>
</div>
</div>
<?php
}
}
And shortcode will be like this:-
[my_post_shorcode posts_per_page="4" post_type="tab-items" style="default"]
Hope this will help you.

Wordpress page won't paginate

Okay I am ripping my hair out over this and I know it is super simple and is staring me in the face but I just can't see it. In essence what is happening is that my pagination isn't working. I use the plugin wp_pagenavi (which is not the issue already checked) It gives me a list of links of each page in the pagination. That all works fine, in fact all the code does what it is supposed to do. The problem is when I click on the pagination link such as "2" or "3" it attempts to go to the corresponding pagination ie www.yousitehere.com/somepage/page/2 but instead the site just reloads the current page without the /page/2.
I think somewhere the page either doesn't realize it needs to paginate and therefore ignores all instances of /page or something is resetting the pagination before the page loads. (its not the reset_query).
This is a Wordpress site. Unfortunately I am unable to show the site link which makes it harder for you bu hopefully someone has a suggestion.
here is my code
<div id="content" class="clearfix">
<div id="main" class="col960 left first clearfix" role="cont_detail">
<?php if (have_posts()) : while (have_posts()) : the_post();
$id = get_the_ID();
$array = metadata($id);
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="cont_detail" >
<header>
<div id="header_bg_top"></div>
<div id="header_bg">
<?php if($array['custom_facebook'] !="" && $array['custom_twitter'] !="" && $array['custom_linkedin'] != ""&& $array['custom_website'] != "" && $array['custom_blog'] != "" && $array['custom_email'] != ""){?>
<div class="social_link_container">
<div class="width">
<?php if(isset($array['custom_facebook']) && $array['custom_facebook'] !=""){?>
<img src="<?php echo get_template_directory_uri(); ?>/images/author-facebook.png">
<?php }
if(isset($array['custom_twitter']) && $array['custom_twitter'] !=""){?>
<img src="<?php echo get_template_directory_uri(); ?>/images/author-twitter.png">
<?php }
if(isset($array['custom_linkedin']) && $array['custom_linkedin'] !=""){?>
<img src="<?php echo get_template_directory_uri(); ?>/images/author-in.png">
<?php }
if(isset($array['custom_website']) && $array['custom_website'] !=""){?>
<img src="<?php echo get_template_directory_uri(); ?>/images/author-web.png">
<?php }
if(isset($array['custom_blog']) && $array['custom_blog'] !=""){?>
<img src="<?php echo get_template_directory_uri(); ?>/images/author-blog.png">
<?php }
if(isset($array['custom_email']) && $array['custom_email'] !=""){?>
<img src="<?php echo get_template_directory_uri(); ?>/images/author-email.png"><?php }?>
</div>
</div>
<?php } ?>
<h1 class="cont_detail_title" itemprop="headline"><?php the_title(); ?></h1>
<?php if(isset($array['custom_description']) && $array['custom_description'] !="")
{
?>
<span class="title_description"><?php echo $array['custom_description']; ?></span>
<?php
}
?>
</div><!-- header-bg -->
</header> <!-- end article header -->
<section>
<div class="content-left">
<?php if(isset($array['featured_thumb']) && $array['featured_thumb'] !="")
{
?>
<div class="cont_detail_image">
<?php print_thumbnail($array['featured_thumb'], "medium");?>
</div>
<?php
}
?>
</div>
<div class="content-right">
<?php the_content(); ?>
</div>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endwhile; ?>
<?php else : ?>
<article id="post-not-found">
<header>
<h1>Not Found</h1>
</header>
<section class="post_content">
<p>Sorry, but the requested resource was not found on this site.</p>
</section>
<footer>
</footer>
</article>
<?php endif;
wp_reset_query();
//Sort queries, most viewed, alphabetical, date
echo '<section><div id="content_bg" class="group">';
$row_num = 1;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if( $_GET['sort'] == 'date' ) {
$sortOrder = getSortOrder( $_GET['dsort_order'] );
$meta_queries[] = array(
'key' => 'custom_authorid',
'value' => $post->ID,
'compare' => 'LIKE',
);
query_posts(array(
'post__not_in' => array($post->ID),
'post_type' => 'post',
'meta_query' => $meta_queries,
'order'=>$sortOrder,
'orderby'=> 'date',
'posts_per_page' => 9,
'paged' => $paged
));
}
elseif( $_GET['sort'] == 'alpha' ) {
$sortOrder = getSortOrder( $_GET['asort_order'] );
$meta_queries[] = array(
'key' => 'custom_authorid',
'value' => $post->ID,
'compare' => 'LIKE',
);
query_posts(array(
'post__not_in' => array($post->ID),
'post_type' => 'post',
'meta_query' => $meta_queries,
'order'=>$sortOrder,
'orderby'=> 'title',
// adding posts_per_page, set to 9 might be different then global preference
'posts_per_page' => 9,
'paged' => $paged
));
}
elseif( $_GET['sort'] == 'mviewed' ) {
}
else{
$meta_queries[] = array(
'key' => 'custom_authorid',
'value' => $post->ID,
'compare' => 'LIKE',
);
query_posts(array(
'post__not_in' => array($post->ID),
'post_type' => 'post',
'posts_per_page' => 9,
'meta_query' => $meta_queries,
'paged' => $paged
));
}
?>
<div class="paginate_nav">
<?php wp_pagenavi(); // use the page navi function ?>
<div class="sort_nav">
<?php contrPaginationLinks( $sortOrder ) ?>
</div><!--sort_nav-->
</div><!--paginate_nav-->
<?php
if( $_GET['sort'] == 'mviewed' ) {
}
else{
if (have_posts()) : while (have_posts()) : the_post();
$item = metadata($post->ID);
$containsVideos = false;
foreach ($item['cat'] as $value) {
if (strpos($value->cat_name,'Videos') !== false) {
$containsVideos = true;
}
}
?>
<div class="story-container" >
<div class="story_left">
<div class="story_image">
<input type="hidden" name="vidID" value="<?php echo $item['media_link']; ?>" />
<div class="about_latest_image <?php echo $item['media_link']; ?>">
<a href="<?php echo $item['link']; ?>">
<?php
print_thumbnail($item['featured_thumb'],"thumbnail", $item['youtube_link'], $item['vimeo_link'], $item['media_link']);
?>
<?php if($containsVideos == true){echo '<span class="videoIndicator"></span>';} ?>
</a>
</div>
</div>
<?php if($_GET['sort'] == 'date'){ ?>
<div class="story_view">
<?php echo $item['date']; ?>
</div>
<?php } ?>
</div>
<div class="story_title">
<a href="<?php echo $item['link']; ?>" title="<?php echo $item['title']; ?>">
<span class="story_title"><?php echo $item['title']; ?></span>
</a>
</div>
<?php if(isset($item['custom_description']) && $item['custom_description'] !="") {
?>
<div class="story_description"><?php echo $item['custom_description']; ?></div>
<?php
}
?>
<div class="story_content"></div>
</div>
<?php endwhile; ?>
<?php else : ?>
<h1><?php _e("No Posts Yet", "hooplahatheme"); ?></h1>
<p><?php _e("Sorry, What you were looking for is not here.", "hooplahatheme"); ?></p>
<?php endif;
} // end display else default
echo '</div></section>';
//
// reset query after display is done
//
wp_reset_query();
?>
<footer>
</footer> <!-- end article footer -->
</div> <!-- end #main -->
Update
It turns out that there is a 302 redirect occurring which is what I am trying to find out the next step.
Christopher's answer probably works for most people.
But..
If you want to stop the redirect from also affecting /pagename/page/1, this will help:
add_filter('redirect_canonical', 'my_redirect_canonical', 10, 2);
function my_redirect_canonical($redirect_url, $requested_url) {
$do_redirect = true;
if(preg_match('/page/',$requested_url)){
$do_redirect = false;
}
return $do_redirect;
}
Found here.
So for anyone with a similar question the answer is simple. You can't paginate single post pages by default in wordpress. It will just redirect back to the root URL of the page. What you need to do to stop this is add this to your themes functions.php
add_filter('redirect_canonical','pif_disable_redirect_canonical');
function pif_disable_redirect_canonical($redirect_url) {
if( is_singular() && in_category('PLACE CAT ID HERE') ) {
$redirect_url = false;
}
return $redirect_url;
}
for more info on this you can look here http://wordpress.org/support/topic/home-pagination-page2-redirect-to-a-post

Resources