WordPress.org

1. semidivine
   Member
   Posted 7 months ago #

   I'm modifying a WP category dropdown nav function I found on this site... it returns the categories in the "ugly" way (/?cat=#) which then redirects because I have permalinks enabled, but you can see the flash of the url changing because of the redirect and I don't want that. I would rather the javascript function create the permalink structure I already have, ie. domain.com/category-slug/. So since I have the category ID from the wp_dropdown_categories() function I need to get the category slug from that.

   This is the code I have now (that renders the urls in the "ugly" way):

   <?php wp_dropdown_categories('show_option_none=Channels&hierarchical=1&orderby=name&exclude=14,33,77,78'); ?>
   <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>

   "dropdown.options[dropdown.selectedIndex].value" is the code returns the category ID from the wp_dropdown_categories() function. How would I switch it to something like:

   location.href = "<?php echo get_option('home');?>/<?php echo category_slug('catID');?>;

2. wp_guy
   Member
   Posted 7 months ago #

   You'll have to custom code the drop down menu, like this:

   <?php
   
   $categories = get_categories();
   
   $select = "<select name='cat' id='cat' class='postform'>\n";
   $select.= "<option value='-1'>Select category</option>\n";
   
   foreach($categories as $category){
   	if($category->count > 0){
   		$select.= "<option value='".$category->slug."'>".$category->name."</option>";
   	}
   }
   
   $select.= "</select>";
   
   echo $select;
   ?>
   <script type="text/javascript"><!--
       var dropdown = document.getElementById("cat");
       function onCatChange() {
   		if ( dropdown.options[dropdown.selectedIndex].value != -1 ) {
   			location.href = "<?php echo get_option('home');?>/category/"+dropdown.options[dropdown.selectedIndex].value+"/";
   		}
       }
       dropdown.onchange = onCatChange;
   --></script>

3. semidivine
   Member
   Posted 7 months ago #

   Thanks so much! it works great except for one thing, I can specify hierarchical but it doesn't indent the sub categories for clearer reading like the wp_dropdown_categories function does... do you know how I would do that?

4. wp_guy
   Member
   Posted 7 months ago #

   Ok... different approach:

   <?php
   
   function replace_id_for_slug($option){
   	$categories = get_categories("hide_empty=0");
   
   	preg_match('/value="(\d*)"/', $option[0], $matches);
   
   	$id = $matches[1];
   
   	$slug = "";
   
   	foreach($categories as $category){
   		if($category->cat_ID == $id){
   			$slug = $category->slug;
   		}
   	}
   
   	return preg_replace("/value=\"(\d*)\"/", "value=\"$slug\"", $option[0]);
   }
   
   $select = wp_dropdown_categories("hierarchical=1&hide_empty=0&echo=0");
   
   $select = preg_replace_callback("#<option[^>]*>[^<]*</option>#", "replace_id_for_slug", $select);
   
   echo $select;
   
   ?>
   
   <script type="text/javascript"><!--
       var dropdown = document.getElementById("cat");
       function onCatChange() {
   		if ( dropdown.options[dropdown.selectedIndex].value != -1 ) {
   			location.href = "<?php echo get_option('home');?>/category/"+dropdown.options[dropdown.selectedIndex].value+"/";
   		}
       }
       dropdown.onchange = onCatChange;
   --></script>

5. semidivine
   Member
   Posted 7 months ago #

   That's so much better! Thank you so much!

6. bear3556
   Member
   Posted 6 months ago #

   Dear WP Guy ,
   I have a similar problem, but I am not using the drop-down function. I use the ordinary category view, but even though I have selected "Show Hierarchy", it doesn't indent the sub categories for clearer reading.

   When I read your reply to Semidivine, I understand that the code you suggested should be something similar to what I need.

   As I am a newbie to wp, css and php, I do not understand where neither how to alter any code. If you would be able to give me some advice on it, I would be very, very grateful for your kind support.

   I have asked the same question in previous thread. For reference, pls see

   http://wordpress.org/support/topic/180675

   Best Regards,
   B

7. bear3556
   Member
   Posted 6 months ago #

   Dear WP Guy,

   My problem is now solved. I tried insert below code in style.css

   .sidebar-box ul.children {
   list-style: none;
   margin-left: 0;
   margin-top: 0px;
   padding-left: 20px;
   text-indent: 0em;
   }

   Now it has the indent as I wanted.

   Thanks once again for your support.
   Best Regards,
   B

8. ken_rosaka
   Member
   Posted 2 months ago #

   Hi there, I think I got the answer:

   Retrieve from: http://monoooki.net/blog/wordpress/656

   The Function:

   <?php
   function get_cat_slug($cat_id) {
   	$cat_id = (int) $cat_id;
   	$category = &get_category($cat_id);
   	return $category->slug;
   }
   ?>

Reply

You must log in to post.