Is there any way I can display this Job Tag taxonomy cloud as a dropdown select box by editing the following code or by creating a new shortcode?
It's going into an ajax filter, so the dropdown needs to output the same links and values ect, however in a dropdown format instead of the tag cloud it currently produces.
/**
* Job Tag cloud shortcode
*/
public function job_tag_cloud( $atts ) {
ob_start();
$atts = shortcode_atts( array(
'smallest' => 16,
'largest' => 16,
'unit' => 'pt',
'number' => 45,
'format' => 'flat',
'separator' => "
",
'orderby' => 'count',
'order' => 'DESC',
'exclude' => null,
'include' => null,
'link' => 'view',
'taxonomy' => 'job_listing_tag',
'echo' => false,
'topic_count_text_callback' => array( $this, 'tag_cloud_text_callback' )
), $atts );
$html = wp_tag_cloud( apply_filters( 'job_tag_cloud', $atts ) );
if ( ! apply_filters( 'enable_job_tag_archives', get_option( 'job_manager_enable_tag_archive' ) ) ) {
$html = str_replace( '</a>', '</span>', preg_replace( "/<a(.*)href='([^'']*)'(.*)>/", '<span$1$3>', $html ) );
}
return $html;
}
You can use the format
attribute:
Cloud returned as array but not displayed
The variable $tag will contain the tag cloud for use in other PHP code
<?php $tag = wp_tag_cloud( 'format=array' ); ?>
(Source: WP Manual)
Consider to use var_dump()
to the returned array in order to understand it structure, afterwards you can simply use a foreach loop
and walk-through the tags and build a dropdown
.
You need a foreach
PHP
foreach($atts as $row => $value) {
echo"<option value='$value'>$row</option>";
}
The website that you linked use a jQuery dropdown with realtime search, you can do it with a jQuery plugin like this: http://www.jqueryrain.com/?S5JKymV5
If you use a jQuery to display your data in dropdown, you need a select/option input with a unique id (id="myDropdown") and assign it to the jQuery script.
Example Assuming you use fuzzyDropdown plugin
Html & PHP
<div id="fuzzSearch">
<div id="fuzzNameContainer">
<span class="fuzzName"></span>
<span class="fuzzArrow"></span>
</div>
<div id="fuzzDropdownContainer">
<input type="text" value="" class="fuzzMagicBox" placeholder="search.." />
<span class="fuzzSearchIcon"></span>
<ul id="fuzzResults">
</ul>
</div>
</div>
<select id="myDropdown">
<?php foreach($atts as $row => $value) {
echo"<option value='$value'>$row</option>";
}?>
</select>
Javascript
$('#myDropdown').fuzzyDropdown({
mainContainer: '#fuzzSearch',
arrowUpClass: 'fuzzArrowUp',
selectedClass: 'selected',
enableBrowserDefaultScroll: true
});