Code Food Travel repeat!

Web

Twitter Bootstrap ScrollSpy SideNav Smooth Scrolling Plugin

To hook in Ariel Flesler’s jquery.scrollTo-min.js plugin to your Twitter Bootstrap SideNav Bar, and give your menu some smooth scrolling instead of jumpiness:

[See demo:]

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
<script>
$(function() {

            $('.bs-docs-sidenav').affix({
                offset: {
                    top: function () { return $window.width() <= 980 ? 90 : 10 }
                    , bottom: 270
                }
            });

		    $('ul.bs-docs-sidenav li a').bind('click', function(e) {
		        e.preventDefault();
		        target = this.hash;
		        console.log(target);
		        $.scrollTo(target, 1000);
		   });

});
</script>

If smooth scrolling doesn’t work, make sure you CHECK THE PATH you are specifying and that you got it down correctly and that it exists. I made a small mistake and listed the path with my classes in the wrong order of ul > li > a. For twitter bootstrap, it’s the above path, else it can be any generic one as below:
$(‘**.your-class-here** li a’).bind

Twitter Bootstrap Scrollspy SideNav SideBar Not Working SOLUTION

If you’ve added in all the html code, and javascript calls and it’s still not working

            $('.bs-docs-sidenav').affix({
                offset: {
                    top: function () { return $window.width() <= 980 ? 90 : 10 }
                    , bottom: 270
                }
            });

    <div class="bs-docs-sidebar">
      <ul class="nav nav-list bs-docs-sidenav belowmast affix">
        <li><a href="#buy"><i class="icon-chevron-right"></i>&uarr;&nbsp;&nbsp;&nbsp; Home</a></li>
        <li><a href="#letscreate"><i class="icon-chevron-right"></i> Let's Create</a></li>
        <li><a href="#ourjournals"><i class="icon-chevron-right"></i> Our Journals</a></li>
        <li><a href="#yourideas"><i class="icon-chevron-right"></i> Your Ideas In KLINE</a></li>
        <li><a href="#gallery"><i class="icon-chevron-right"></i> Gallery</a></li>
        <li><a href="#components"><i class="icon-chevron-right"></i> Components</a></li>
      </ul>
    </div>

The answer could be simple!

Does your body tag include the required data attributes?

<body data-spy="scroll" data-target=".bs-docs-sidebar" >

Substitute .bs-docs-sidebar for whatever your scrollspy sidebar is called!

For an extra tip today, learn how to Add SMOOTH SCROLLING to your sidenav HERE!

List posts by taxonomy

List custom post types by taxonomy term.
List Posts For Terms Of A Custom Taxonomy For Any Post Type

I used this on a client website to list posts tagged by year.

Ie:
1940
-post 1
-post 2
1941
-post 3
-post 4…

I scoured the internet for a good working solution and there are so many that don’t work, this this simply did. Cut n paste. Originally written by nickam.



<?php
$post_type = 'filmography';
$tax = 'film-year';
$tax_terms = get_terms($tax,'hide_empty=0');

//list the taxonomy
$i=0; // counter for printing separator bars
foreach ($tax_terms as $tax_term) {
$wpq = array ('taxonomy'=>$tax,'term'=>$tax_term->slug);
$query = new WP_Query ($wpq);
$article_count = $query->post_count;
echo "<a href=\"#".$tax_term->slug."\">".$tax_term->name."</a>";
// output separator bar if not last item in list
if ( $i < count($tax_terms)-1 ) {
echo " | " ;
}
$i++;
}

//list everything
if ($tax_terms) {
  foreach ($tax_terms  as $tax_term) {
    $args=array(
      'post_type' => $post_type,
      "$tax" => $tax_term->slug,
      'post_status' => 'publish',
      'posts_per_page' => -1,
      'caller_get_posts'=> 1
    );

    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) {
      echo "<h2 class=\"tax_term-heading\" id=\"".$tax_term->slug."\"> $tax_term->name </h2>";
      while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
        <?php
      endwhile;
      echo "<p><a href=\"#top\">Back to top</a></p>";
    }
    wp_reset_query();
  }
}
?>

Display wordpress custom taxonomy with separators and title attribute

I was looking and having trouble finding a function that would not only return my custom taxonomy terms, but with the title description attribute so that when people hover over the link they get some more info.

Get_the_terms_list function did half of what I wanted – I got the custom taxonomy plus a separator if more than one, but no description:

			<?php echo get_the_term_list( $post->ID, 'film-year', '', ', ', '' ); ?>

So here is my solution:

			<?php
			$terms = get_the_terms( $post->ID, 'film-year' );

			if ( $terms && ! is_wp_error( $terms ) ) : 

				$year_links = array();

				foreach ( $terms as $term ) {
				    $term_name = $term->name; // get the ID of the term
							$year_links[] = '<a href="'.get_term_link($term).'" title="View all films from '.$term_name.'">'.$term_name.'</a>';
				   
				}

				$filmyearlinks = join( ", ", $year_links );
			?>

			<p>
				Film year: <span><?php echo $filmyearlinks; ?></span>
			</p>

			<?php endif; ?>

Enjoy!

5 of 14
123456789
%d bloggers like this: