I have a page that just shows tags https://wateratairports.com/airports-by-iata-code/, it is working great and getting bigger over 300 it could grow to 1000 which is OK on a big screen but on a mobile, not good, I would like to add a line at the top of the tags offering a shortcut ie if you want A-F click this then it will take the user to a page that shows tags stating A and ending with F.

I am sure I can create the line with links to another page, where I am having a problem is how to only return the tags between A and F.

The template I am using is

/**
* Template Name: bbPress – Topic Tags
*
* @package bbPress
* @subpackage Theme
*/

get_header(); ?>

<?php do_action( ‘bbp_before_main_content’ ); ?>

<?php do_action( ‘bbp_template_notices’ ); ?>

<?php while ( have_posts() ) : the_post(); ?>

<div id=”bbp-topic-tags” class=”bbp-topic-tags”>
<h1 class=”entry-title”><?php the_title(); ?></h1>
<div class=”entry-content”>

<?php get_the_content() ? the_content() : _e( ‘<p>This is a collection of tags that are currently popular on our forums.</p>’, ‘bbpress’ ); ?>

<div id=”bbpress-forums”>

<?php bbp_breadcrumb(); ?>

<div id=”bbp-topic-hot-tags”>

<?php wp_tag_cloud( array( ‘smallest’ => 15, ‘largest’ => 15, ‘number’ => 400, ‘taxonomy’ => bbp_get_topic_tag_tax_id() ) ); ?>

</div>
</div>
</div>
</div><!– #bbp-topic-tags –>

<?php endwhile; ?>

<?php do_action( ‘bbp_after_main_content’ ); ?>

Is there a way to select what tags are shown ?, I am happy to create more templates.
hope this makes snese

[@webcreations907 Participant 4 years, 9 months ago]

Hello,

How about just adding filter buttons to your current page so that users on your site aren’t directed to another page, instead the tags are displayed based on “Filter” type buttons they click while on that same page. Kinda like a filtered portfolio type set up.

Example
Filter buttons at the top of your tag cloud(i.e A-F, G-L,M-S, etc), when user clicks say “A-F”, then all the tags that are within that range are shown, while the rest are hidden. But you’d still be on the same page. Then have a “All” button so they could get back to the default view of all them being shown.

Just a bbpress user here, just had a idea for you on that so thought I’d mention it.

[@clivesmith Participant 4 years, 9 months ago]

That sounds a great idea, not sure how to do it, as you can see from above I can get all the tags but I don’t know how to add a filter.

[@webcreations907 Participant 4 years, 9 months ago]

The way I was referring to would be using jQuery to build the filter buttons and make it filter.

I’ll see if I can get a example up for you to check out.

[@webcreations907 Participant 4 years, 9 months ago]

I created that example, I just used the categories on your page for the example since the buttons are built based of of those.

I didn’t do really any styling to it since it’s just a example.

Link Below
https://codepen.io/WebCreations907/full/zYGWLRe

If you like that way that works and want to add it to your site, let me know and can get you some steps on getting that added to your page.

🙂

[@clivesmith Participant 4 years, 9 months ago]

Hi,

Yes, that is the sort of thing I want.

[@webcreations907 Participant 4 years, 9 months ago]

Hey there,

I got that code for you so you can add it to your page and give it a try.

Put the code below in your style.css file of your theme, you can change as needed. It only styles the filter buttons.

.airport-iata-info{
  padding-left:15px;
  color:rgba(0,0,0,0.6);
  font-weight:bolder;
  font-size:14px;
  margin-top:20px;
}
.airport-iata-filter-tag-wrap span.active,
.airport-iata-filter-tag-wrap span:hover{
  background-color:#087cc1;
  color:#fff;
}
.airport-iata-filter-tag-wrap{
  border:1px solid rgba(0,0,0,0.1);;
  display:table;
  padding:0 10px 10px;
  border-radius:4px;
}
.airport-iata-filter-tag-wrap span{
  background-color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
  margin:10px;
  border-radius:4px;
  padding:10px 20px !important;
  display:inline-block;
  
}

This code below you’ll need to put in your functions.php file of your theme, best if you put in child theme so that you don’t have to replace when you update your theme in the future. The function below is only set to run on that page you have the listed tags on.

if(!function_exists('airport_iata_code_filter_buttons')){
	function airport_iata_code_filter_buttons(){
		if(!function_exists('is_page')) return;
		if(is_page(4760)){
			?>
			<script>
				(function($){
	  
				  var buttons= {};
				  buttons['a-f'] = 'a b c d e f';
				  buttons['g-l'] = 'g h i j k l';
				  buttons['m-s'] = 'm n o p q r s';
				  buttons['t-z'] = 't u v w x y z';
				  
				  var get_tag_class = function( tag ){
				    var tag_class = false;
				    $.each(buttons,function(index,el){
				      if(el.indexOf(tag.toLowerCase()) > -1){
				        tag_class = index;
				        return false;
				      }

				    });
				    
				    return tag_class;
				  }
				 
				  $('#bbp-topic-hot-tags .tag-cloud-link').each(function(){
				   var tag_class = get_tag_class($(this).text().slice(0,1));
				    if(tag_class !== false){
				      $(this).addClass('airport-iata-filter-tag-cloud-'+tag_class).attr('data-airport-iata-tag',tag_class);
				    }
				  });
				  
				  $('#bbp-topic-hot-tags').prepend('<div class="airport-iata-filter-tag-wrap" style="margin-bottom:20px;"><div class="airport-iata-info">Filter IATA Codes</div></div>');
				  $('.airport-iata-filter-tag-wrap').append('<span style="cursor:pointer;padding:10px;" class="airport-iata-filter-all active">All</span>');
				$.each(buttons,function(index,el){
					$('.airport-iata-filter-tag-wrap').append('<span data-airport-iata-filter-key="'+index+'" style="cursor:pointer;padding:10px;" class="airport-iata-filter-tag-cloud-'+index+'">'+index.toUpperCase()+'</span>');
				});
				  
				  $(document).on('click', '.airport-iata-filter-tag-wrap span', function(e){
				    e.preventDefault();
				    $('.airport-iata-filter-tag-wrap span').removeClass('active');
				    $(this).addClass('active');
				    if($(this).hasClass('airport-iata-filter-all')){
				      $('#bbp-topic-hot-tags a.tag-cloud-link').show();
				    }else{
				      $('#bbp-topic-hot-tags a.tag-cloud-link').hide();
				      $('#bbp-topic-hot-tags a.tag-cloud-link.airport-iata-filter-tag-cloud-'+$(this).attr('data-airport-iata-filter-key')).show();
				    }
				 });
				  
				})(jQuery);
			</script>
			<?php
		}
	}
	add_action( 'wp_footer', 'airport_iata_code_filter_buttons', 100);
}

That’s it, should work. Let me know if you have any issues or questions on any of that.

🙂

[@clivesmith Participant 4 years, 9 months ago]

That is great, thank you very much, I have put it on my development site and it is exactly what I wanted. I have a few changes to make on something else on my live site and I will add it as soon as I have finished.
Thanks again.
Clive

[@webcreations907 Participant 4 years, 9 months ago]

No problem, glad that worked out for you.

I was trying to update the code in the above to remove the inline styles and !important, but guess I can’t edit replies on here.

Will provide update code below, if you want to update it.

CSS

.airport-iata-info{
  padding-left:15px;
  color:rgba(0,0,0,0.6);
  font-weight:bolder;
  font-size:14px;
  margin-top:20px;
}
.airport-iata-filter-tag-wrap span.active,
.airport-iata-filter-tag-wrap span:hover{
  background-color:#087cc1;
  color:#fff;
}
.airport-iata-filter-tag-wrap{
  border:1px solid rgba(0,0,0,0.1);;
  display:table;
  padding:0 10px 10px;
  border-radius:4px;
  margin-bottom:10px
}
.airport-iata-filter-tag-wrap span{
  cursor:pointer;
  background-color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
  margin:10px;
  border-radius:4px;
  padding:10px 20px;
  display:inline-block;
}

functions.php file

if(!function_exists('airport_iata_code_filter_buttons')){
	function airport_iata_code_filter_buttons(){
		if(!function_exists('is_page')) return;
		if(is_page(4760)){
			?>
			<script>
				(function($){
	  
				  var buttons= {};
				  buttons['a-f'] = 'a b c d e f';
				  buttons['g-l'] = 'g h i j k l';
				  buttons['m-s'] = 'm n o p q r s';
				  buttons['t-z'] = 't u v w x y z';
				  
				  var get_tag_class = function( tag ){
				    var tag_class = false;
				    $.each(buttons,function(index,el){
				      if(el.indexOf(tag.toLowerCase()) > -1){
				        tag_class = index;
				        return false;
				      }

				    });
				    
				    return tag_class;
				  }
				 
				  $('#bbp-topic-hot-tags .tag-cloud-link').each(function(){
				   var tag_class = get_tag_class($(this).text().slice(0,1));
				    if(tag_class !== false){
				      $(this).addClass('airport-iata-filter-tag-cloud-'+tag_class).attr('data-airport-iata-tag',tag_class);
				    }
				  });
				  
				  $('#bbp-topic-hot-tags').prepend('<div class="airport-iata-filter-tag-wrap"><div class="airport-iata-info">Filter IATA Codes</div></div>');
				  $('.airport-iata-filter-tag-wrap').append('<span class="airport-iata-filter-all active">All</span>');
				$.each(buttons,function(index,el){
					$('.airport-iata-filter-tag-wrap').append('<span data-airport-iata-filter-key="'+index+'" class="airport-iata-filter-tag-cloud-'+index+'">'+index.toUpperCase()+'</span>');
				});
				  
				  $(document).on('click', '.airport-iata-filter-tag-wrap span', function(e){
				    e.preventDefault();
				    $('.airport-iata-filter-tag-wrap span').removeClass('active');
				    $(this).addClass('active');
				    if($(this).hasClass('airport-iata-filter-all')){
				      $('#bbp-topic-hot-tags a.tag-cloud-link').show();
				    }else{
				      $('#bbp-topic-hot-tags a.tag-cloud-link').hide();
				      $('#bbp-topic-hot-tags a.tag-cloud-link.airport-iata-filter-tag-cloud-'+$(this).attr('data-airport-iata-filter-key')).show();
				    }
				 });
				  
				})(jQuery);
			</script>
			<?php
		}
	}
	add_action( 'wp_footer', 'airport_iata_code_filter_buttons', 100);
}

[@clivesmith Participant 4 years, 9 months ago]

Thanks again, I have increased the size of the font but that is all.

Regards

Clive