WordPress Custom Taxonomy Page Example with Taxonomy Selection Function(select field)

Today I’ll show something quite useful. With just four steps, we will build a custom taxonomy page, that uses a function to build a select field(<select>), that reloads the custom taxonomy page retrieving posts based on the selected option(the selected taxonomy for a specific custom post type).
Hoje vou mostrar algo bastante útil. Com apenas quatro passos, vamos construir uma página de taxonomia customizada, que usa uma função para construir um campo select(<select>), que recarrega a página recuperando posts baseados na opção selecionada(a taxonomia selecionada para um tipo de post customizado).

Step One:

First of all, we need to register a custom post type called video and a custom taxonomy called genre, as I show on my previous post.
Antes de mais nada, precisamos registrar um tipo de post customizado chamado video e uma taxonomia customizada chamada genre, como mostro em meu post anterior.

Step Two:

The function bellow builds a <select> field with options based on taxonomies registered for a specific custom post type. The code also brings a javascript function that redirects to the taxonomy page(taxonomy-genre.php on this example), where you can show the posts from a specific custom taxonomy. Put it on your functions.php file, on your theme directory.
A função abaixo constrói um campo <select> com opções baseadas em taxonomias registradas para um tipo de post customizado específico. O código também trás uma função javascript que redireciona à página da taxonomia(taxonomy-genre.php neste exemplo), onde você pode mostrar os posts de uma taxonomia customizada específica. Coloque ele no seu arquivo functions.php, no diretório de seu tema.

<?
function wp_selcstch_taxonomies( $args = '' ) {
	
	$defaults = array(			
		'taxonomy' 	=> 'category',		
  		'seltitle'	=> '',
		'selnamen'	=> '',
		'selidcss'	=> '' ,
		'baselink'	=> '', 
		'echo' => 1,
		'hide_empty'   => 0
	);

	$r = wp_parse_args( $args, $defaults );
	extract( $r );

	if ( !taxonomy_exists($taxonomy) )
		return false;
	
	if( isset( $r['seltitle']) && $r['seltitle']!=""):$idtlt =  $r['seltitle'];else:$idtlt =  '';endif;		
	if( isset( $r['selnamen']) && $r['selnamen']!=""):$idnam =  " name='".$r['selnamen']."' ";else:$idnam = '';endif;
	if( isset( $r['selidcss']) && $r['selidcss']!=""):$idcss =  " id='".$r['selidcss']."' ";else:$idcss = '';endif;	

	$categories = get_categories( $r );
	$swlink = false;
	$swchan = '';
	$output = '';

	// javascript function to redirect(reload) the page
	if( isset( $r['baselink']) && $r['baselink']!=""):
		$output .= '<script language="javascript">';
		$output .= 'function fgotxm(obj){';
		$output .= 'if(obj.options[obj.options.selectedIndex].value!=""){';
		$output .= 'window.location.href=obj.options[obj.options.selectedIndex].value;';
		$output .= '}';
		$output .= '}';
		$output .= '</script>';
		$swlink = true;
		$swchan = " onchange='fgotxm(this)'";
	endif;

	// html begin
	$output .= "<select".$idnam.$idcss.$swchan.">";
	if($idtlt!=""){
	$output .= "<option value=''>".$idtlt."</option>";;	
	}
	foreach ($categories as $cat):
		if($cat->category_nicename!=$taxonomy){
			if($swlink):$golnk =  " value='".$r['baselink']."/".$cat->slug."' ";else:$golnk = '';endif;
			$output .= "<option".$golnk.">".$cat->name."</option>";
		}
	endforeach;
	$output .= "</select>";
	
	if ( $echo )
		echo $output;
	else
		return $output;
}
?>

Step Three:

Now, let’s build a taxonomy page, called taxonomy-genre.php and save it on the theme directory.
Agora vamos construir uma página de taxonomia, chamada taxonomy-genre.php e salvá-la no diretório de seu tema.

<? 
// Let's get the term that was called by the url
$term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );

// here we will pass some parameters for our function that builds the select
$taxonomy   = 'genre'; // the taxonomy slug
$seltitle	= 'Select a Option'; // the select title
$selnamen	= 'select_opt'; // the select name
$selidcss	= ''; // a css id for the select, if wanted
$baselink	= get_bloginfo('url') . "/".'genre'; // and our page base link
// the baselink is the workaround we use to make WordPress find the taxonomy page

$args = array(
  'taxonomy'     => $taxonomy ,
  'seltitle'	 => $seltitle ,
  'selnamen'	 => $selnamen ,
  'selidcss'	 => $selidcss,
  'baselink'	 => $baselink,
  'echo'	 => 0
);

// here we call the function that builds the select
$combotax = wp_selcstch_taxonomies( $args) ;

// and here we set two conditions based on the term asked on the url to build the query
//
// first we call all the genres(genre taxonomy) for the video custom post type 
// it will be used when the user calls http://yourdomain/genre/all/ on your browser 
if($term->slug=="all"){ 
	$querycp = array( 'post_type'=>'video','posts_per_page' => -1 );
}
// then we call a specific genre(genre taxonomy) for the video custom post type e.g. scifi 
// it will be used when the user calls http://yourdomain/genre/scifi/ on your browser 
else{
	$querycp = array( 'post_type'=>'video', 'genre' => $term->slug, 'posts_per_page' => -1 );	
}
?>
<html>
<body>
<head>
<title>Example</title>
</head>

<?=$combotax."<br>"; // let's display the combo ?>

<? 
// and build the loop
query_posts($querycp);
if (have_posts()) :
  while (have_posts()) : the_post();								  
    echo get_the_title()."<br>";
    echo get_the_content()."<br>";
  endwhile;
endif;
?>
</body>
</html>

Step Four:

Now you must go to wp-admin. On Videos menu, choose Genres and create a main genre called “all”, with slug “all”. Then you can add some child genres, something like “drama” with slug “drama”, “scifi” with slug “scifi”, etc(take a look on the picture).

Genres for videos

Click to open - genres for custom post type video


Agora você deve ir até o wp-admin. No menu Videos, escolha Genres e crie um genêro principal chamado “all”, com slug “all”. Então você pode adicionar alguns genêros filhos, algo como “drama” com slug “drama”, “scifi” com slug “scifi”, etc(dê uma olhada na figura).

Don’t forget to add some posts to each child genre to display on your custom taxonomy page. Last but not least, a important tip: after registering a custom taxonomy, go to wp-admin and simply visit the permalinks settings page. It flushes all WordPress permalink rules, so it will make your changes related to the taxonomy page work.
Não esqueça de adicionar alguns post para cada genêro filho para mostrar em sua página de taxonomia customizada. Por último, mas importante, uma dica: depois de registrar uma taxonomia customizada, vá até o wp-admin e simplesmente visite a página de configurações de permalinks. Isso faz com que suas regras de permalink sejam zeradas, fazendo suas mudanças relacionadas à página de taxonomia funcionar.

Hope you find this example useful.
Espero que você ache este exemplo útil.

,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: