0

I'm trying to figure out on how to create a multiple category drop down to filter different types of post

Here is an image of my work in progress

http://i255.photobucket.com/albums/hh140/testament1234/multiple_category_zpsa93a6f33.png

The category highlighted in a red box shape doesn't seem to be working. I'm not sure if it is because it has a conflict. I checked for any errors using firebug but nothing is displayed. I do not like to rely on plugins at the moment

Here is my HTML code

<h2>projects</h2>

<div class="filter_container">
        <?php wp_dropdown_categories( $args ); ?> 
</div>

<div class="filter_container">
        <?php wp_dropdown_categories( $args ); ?> 
</div>

CSS:

#cat{
background-image: url("images/form_arrow.png");
background-repeat: no-repeat;
background-position: 80% center;
border: 0px none;
float: right;
font-family:'Sintony', sans-serif;
margin-right: -25px;
overflow: hidden;
padding: 5px;
width: 200px;

}

.filter_container{
border: 2px solid #8e8fbb;
float: right;
height: 30px;
overflow: hidden;
position: relative;
}

JS:

<!--DROPDOWN SORT CATEGORY -->
<script type="text/javascript">
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;
</script>

Functions.php(Specify what categories to display)

$args = array(
'show_option_all'    => '',
'show_option_none'   => '',
'orderby'            => 'ID', 
'order'              => 'ASC',
'show_count'         => 0,
'hide_empty'         => 1, 
'child_of'           => 0,
'exclude'            => '1,2,3',
'echo'               => 1,
'selected'           => 0,
'hierarchical'       => 0, 
'name'               => 'cat',
'id'                 => '',
'class'              => 'postform',
'depth'              => 0,
'tab_index'          => 0,
'taxonomy'           => 'category',
'hide_if_empty'      => false,
'walker'             => ''
);

-----UPDATED JS-----

<!--DROPDOWN SORT CATEGORY -->
<script type="text/javascript">
var dropdown = document.getElementById("cat1");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;
</script>


<!--DROPDOWN SORT CATEGORY -->
<script type="text/javascript">
var dropdown = document.getElementById("cat2");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;
</script
2
  • IDs must be unique, do you have two dropdowns that both have the ID 'cat'? This otherwise doesn't seem like a WordPress question.
    – Milo
    Nov 22, 2013 at 3:54
  • It looks like the ID cat is placed in this code <?php wp_dropdown_categories( $args ); ?> when i tried to inspect the element. Not sure how i can alter the ID
    – clestcruz
    Nov 22, 2013 at 3:57

1 Answer 1

1

Change 'id' => '' in your $args to be unique values for each dropdown. If it's empty it defaults to the value of name, which is cat in both instances.

3
  • I tried your solution but same outcome i even changed the ID'S in the javascript to match the specified ID's in function.php or maybe i might be missing something. I also copied the 'args' in the function.php to change the ID's for the other dropdown_category. Please see updated code
    – clestcruz
    Nov 22, 2013 at 4:21
  • It looks my code at functions.php is at fault basically i can't just copy '$args = array' and change the ID. I think i need set an ID or something
    – clestcruz
    Nov 22, 2013 at 4:35
  • 1
    NVM i managed to fix the problem on my own lol. I just added '$args_cat1' & '$args_cat2' in the template and functions.php I wasn't really sure since i'm not fluent in Php so i just tried it out hoping it might work.
    – clestcruz
    Nov 22, 2013 at 4:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.