Support » Plugins » Expanding sub category menu via css

  • I wanted a css solution to hide sub-categories unless you were in that section.
    Why? well it gives WP a ‘cms’ feel, and it is useful for a project I am working on.
    To see this in action have a look at elfden
    The solution is a bit convoluted and lenghty. My apologies for this, I am not experienced in php.
    Firstly we hide any children
    In your style sheet add this:

    .children{
    display:none;
    }

    (though that could easily go in your template)
    You also need to add a function call into the template:
    Change this:

    <style type="text/css" media="screen">
    @import url( <?php echo get_settings('siteurl'); ?>/elf-layout.css );
    </style>

    to this:
    <style type="text/css" media="screen">
    @import url( <?php echo get_settings('siteurl'); ?>/elf-layout.css );
    li.test<?php echo get_here('current'); ?> .children{ display:block !important; }
    </style>

    The !important ensures that when matched it will overide any other css settings.
    However we need to amend a little bit of wp_list_cats to add an extra class to all category links.
    This has an added benefit in that you could style them all differently. To achieve this you need to
    amend in template-functions-category.php, around line 388, the following:

    if ($list) {
    $thelist .= "\t

  • $link\n";
    } else {
    $thelist .= "\t$link
    \n";
    }

  • change to:

    if ($list) {
    $test =$category->cat_ID;
    $thelist .= "\t<li class='test$test'>$link\n";
    } else {
    $thelist .= "\t$link
    \n";
    }

    $test returns the category id and inserts it as a class for each category listed.
    Next we create a function in my-hack.php that returns the category id or parent category id if it exists.
    In my-hack.php:

    function get_here($current){
    global $wpdb, $tablecategories;
    $current = $_GET[cat];
    $catp = $wpdb->get_results("SELECT cat_ID, category_parent FROM $tablecategories");
    foreach($catp as $tcatp) {
    $tid = $tcatp->cat_ID;
    $tpid = $tcatp->category_parent;
    if($current==$tid){
    if($tpid==0){
    $current=$_GET[cat];
    return($current);
    }
    $current=$tpid;
    return($current);
    }
    }
    }

    (is there an easier way of doing this?)
    Hope the instructions are clear and that it is useful to someone out there.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Cool!!!
    Can you modify it so that it expands 1 level at a time. 🙂
    It seems that it only works for the first level, is that right?
    Thanks!
    icxn

    I haven’t tested with anything other than :
    Category
    – Sub category
    Are you saying it doesn’t work for:
    Category
    – Sub category
    –Sub Sub Category
    The Sub Sub bit? I can probably adapt it, if that is what you meant. But please confirm before I rehack it.

    Ok, I’ve just checked into that, and yes a –Sub Sub Category causes problems.
    I’ll have to work on that, no promises…

    vitalis

    (@vitalis)

    I’ve included the code but my subcategories don’t show. I don’t have no idea of PHP but I created a file named my-hack.php and included your code with enclosing <?php and ?> tags. Then placed it in the wp-includes folder.

    I dont want to intrude but isnt my-hacks.php a legacy from earlier implementations of WP. Not everybody will have it installed or activated.

    I don’t see this anywhere in 1.2’s template-functions-category.php
    ‘if ($list) {
    $thelist .= “\t

  • $link\n”;
    } else {
    $thelist .= “\t$link
    \n”;
    } ‘
    am i missing something?
    dss