Reply To: Split up my Tags page

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.

🙂