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
  • 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 '13 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 '13 at 3:57
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.

| improve this answer | |
  • 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 '13 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 '13 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 '13 at 4:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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