WordPress.org

1. mkjar
   Member
   Posted 8 months ago #

   I am trying to list a bunch of 'child of' drop down category selects but when I duplicate one - it stops working - do I need to pass the multiple parent categories in an array? I am stumped.

   <li id="categories"><h2><?php _e('Posts by Category'); ?></h2>
   
   	<?php wp_dropdown_categories('show_option_none=Select category&child_of=130'); ?>
   
   <?php wp_dropdown_categories('show_option_none=Select category&child_of=126'); ?>
   
   	<?php wp_dropdown_categories('show_option_none=Select category&child_of=127'); ?>
   
   <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>
   </li>

2. mkjar
   Member
   Posted 8 months ago #

   When I use the below options - the first drop down select works - but the ones following after don't - they display the categories fine - but the links do not work -

   <!-- for drop down select -->
   126
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('orderby=name&show_option_none=cat title &child_of=126'); ?>
   </form>
   
   127
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('orderby=name&show_option_none=cat title&child_of=127'); ?>
   </form>
   
   <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>

   I've tried looking into both this: http://wordpress.org/support/topic/is-the-new-dropdown_categories-working?replies=13#post-657759
   and
   http://codex.wordpress.org/Function_Reference/wp_dropdown_categories

3. Digital Raindrops
   Member
   Posted 8 months ago #

   What are you trying to do is it a theme options page, widget options, each instance would need it's own ID, I did look at it but could not work out how to use it, so I done it with get_categories and a control?

   If you want each one in its own right then use get_categories( $args );

   Then use a select type, this is how I use it for a category sidebar theme widget.

   ?>
   </select></p>		
   
   <p><label for="<?php echo $this->get_field_id('catid'); ?>"><?php _e("Category")?></label>
   <br/>
   <select id="<?php echo $this->get_field_id('catid'); ?>" name="<?php echo $this->get_field_name('catid'); ?>">
   <?php
   foreach ($categories as $cat) :
   	$selected = ( $cat->cat_ID == esc_attr($catid) ) ? ' selected = "selected" ' : '';
   	$option = '<option '.$selected .'value="' . $cat->cat_ID;
   	$option = $option .'">';
   	$option = $option .$cat->cat_name;
   	$option = $option .'</option>';
   	echo $option;
   endforeach;
   ?>
   </select></p>

   Not sure if this is what you are after, but it gives a dropdown with the category list?

   EDIT
   Just checked the $args for wp_dropdown_categories and there is one argument for the 'name' default 'cat', use a different name for each control, I never thought to check this one, there is even one for selected so you can highlight the selected category ID :(
   

   'name' => 'cat-1',
   'selected' => $catid,

   Like:

   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('name=cat-1&orderby=name&show_option_none=cat title&child_of=126'); ?>
   </form>
   
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('name=cat-2&orderby=name&show_option_none=cat title&child_of=127'); ?>
   </form>

   Then you will have to update the JQuery.

   Regards

   David

4. mkjar
   Member
   Posted 8 months ago #

   Thanks! - I am going to try what you suggested

   Kust a little more explanation - what I am trying to accomplish is to make a category index with parent category drop downs in my sidebar template file - so that I can have each parent category and its sub-categories neatly and compactly displayed in the sidebar - instead of one super long category drop-down (which would be hard to use because there are so many categories) - it will be broken up into all the parent categories first
   It would eventually look like this:

   BROWSE POSTS BY CATEGORY TYPES:
   --------------------------
   | PHOTOGRAPHY SUBJECT v |
   --------------------------
   | LOCATION v |
   --------------------------
   | RECIPE TYPE v |
   --------------------------

5. Digital Raindrops
   Member
   Posted 8 months ago #

   I am sure there is a plugin for this without the headache, I did look at this one a while back, but never got around to testing it, if I remember it has a sidebar widget that does what you want out the box.

   Might save you some time as it can be styled as well.

   HTH

   David

6. mkjar
   Member
   Posted 8 months ago #

   I think your original idea worked - I was trying earlier to set unique id's but I didn't think of resetting the script this is what is working now for me - I am going to test it some more:
   

   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('name=cat-2&id=cat-2&orderby=name&show_option_none=127 title&child_of=127'); ?>
   </form>
   
   <script type="text/javascript"><!--
   var dropdown = document.getElementById("cat-2");
   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>
   
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('name=cat-1&id=cat-1&orderby=name&show_option_none=Ingredients&child_of=126'); ?>
   </form>
   
   <script type="text/javascript"><!--
   var dropdown = document.getElementById("cat-1");
   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>

   thanks for the help!!!

   :)

7. Digital Raindrops
   Member
   Posted 8 months ago #

   No problem, it made me look at wp_dropdown_categories() again, I missed seting the name/id, so I can now set the name and id in code to use in a plugin.

   The Codex and other examples out there are not clear on how to use it.

   Mark this one as resolved if it is working please.

   David

8. mkjar
   Member
   Posted 8 months ago #

   Sorry after further testing - it seems like I am still having the same issues (I am not sure why I thought it was working)

   the is the last dropdown on the page works but it seems to cancel out the earlier ones - also now if I do get the last drop down to work - it doesn't allow me to use any normal links on the page - it seems to hold the 'select' value / address - am going to test it some more.

9. mkjar
   Member
   Posted 8 months ago #

   This one spits out an array of drop downs - but the show option gets repeated and the script doesn't work...
   

   <?php
   $cat='129,127,131,128,130';
   $dropdown_array=explode(",", $cat);
   $display=get_cat_name($cat);
   echo '<form  id="drop-down-container">';
   foreach ($dropdown_array as $cat) {
   wp_dropdown_categories('child_of='.$cat.'&show_option_none='. $display .'');
   }
   echo '</form>';
   ?>
   
   <script type="text/javascript"><!--
   
   var dropdown=document.getElementById('cat').
   function onCatChange() {
       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>

10. mkjar
    Member
    Posted 8 months ago #

    ok - so after working on this forever - it seems I just needed to make sure each wp_dropdown_categories had its own var and id for each to work correctly. I'm pasting it in its entirety - although no one else would probably need it :

    <form action="<?php bloginfo('url'); ?>" method="get" >
    
    <!-- drop down select 126 Ingredients -->
    <?php wp_dropdown_categories('id=cat1&orderby=name&show_option_none=Ingredients&child_of=126'); ?>
    <script type="text/javascript">
    var divElements = document.getElementById("cat1")
    function onCatChange() {
    if ( divElements.options[divElements.selectedIndex].value > 0 ) {
    location.href = "<?php echo get_option('home'); ?>/?cat="+divElements.options[divElements.selectedIndex].value;
    }}
    divElements.onchange = onCatChange;
    --></script>
    
    <!-- drop down select 127 Cuisine and Location -->
    <?php wp_dropdown_categories('id=cat2&orderby=name&show_option_none=Cuisine and Location&child_of=127'); ?>
    <script type="text/javascript">
    var divElements2 = document.getElementById("cat2")
    function onCatChange() {
    if ( divElements2.options[divElements2.selectedIndex].value > 0 ) {
    location.href = "<?php echo get_option('home'); ?>/?cat="+divElements2.options[divElements2.selectedIndex].value;
    }}
    divElements2.onchange = onCatChange;
    --></script>
    </form>

Reply

You must log in to post.