Indent WordPress Subcategories in a Drop-down List

Recently I was working on a front-end Ad Listing project, I needed to allow users to make posts on the front-end side and be able to select a category they want their ad to be listed in. Of course we do not want to be listing the selection of these categories in just one line, so in this tutorial I am going to show you how you can nicely indent the children of your categories in a drop-down list

On the back-end, this is how my custom categories look like:

What we are going to do is to convert the above photo into a Drop-down list and indent all the children just like how it was shown on the photo.

Copy this block of code into your theme’s functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

/**
* Params: $taxonomy_type - This is the name of your taxonomy
*/
function cvf_td_get_categories($taxonomy_type){

global $wpdb;

$term_taxonomy = $wpdb->prefix . 'term_taxonomy';
$terms = $wpdb->prefix . 'terms';
$query_category = $wpdb->get_results("
SELECT t.term_id, t.name, tt.parent
FROM $terms t INNER JOIN $term_taxonomy tt ON t.term_id = tt.term_id
WHERE tt.taxonomy = '" . $taxonomy_type . "' ORDER BY t.name"
);

if($query_category){

$data = array();
$index = array();
foreach ($query_category as $key => $row) {
global $index, $data;
$id = $row->term_id;
$parent_id = $row->parent === NULL ? "NULL" : $row->parent;
$data[$id] = $row;
$index[$parent_id][] = $id;
}

function cvf_td_generate_option_spaces($length) {
$string = '';
for ($p = 0; $p < $length; $p++) {
$string .= '--';
}
return $string;
}

function cvf_td_display_child_nodes($parent_id, $level){

global $data, $index;
$parent_id = $parent_id === NULL ? "NULL" : $parent_id;

if (isset($index[$parent_id])) {

if($level == 0){ echo "<select class = 'form-control td_cat'><option value = 'empty'>Select a Category</option>"; }

foreach ($index[$parent_id] as $id) {
$term_data = get_term_by('id', $id, 'td_categories');
if($level == 0){
echo "<option value = '" . $term_data->slug . "'>".$data[$id]->name."</option>";
}
if($level >= 1){
echo "<option value = '" . $term_data->slug . "'>" . cvf_td_generate_option_spaces($level) . ' ' . $data[$id]->name."</option>";
}

cvf_td_display_child_nodes($id, $level + 1);

}

if($level == 0){ echo "</select>"; }
}
}
cvf_td_display_child_nodes(0, 0);

} else {
echo "<select class = 'form-control td_cat'><option value = 'empty'>Select a Category</option></select>";
}
}

Done!, here is how it will look like on your page:

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me