Making a category based menu with posts in wordpress 2.9.2

Sunday, May 23rd, 2010

I was not entirely happy with the way wordpress handles menus for this (my own) website. I like the idea of making all the content posts so they’re bound to a date and such. Then I’d like to see them in the menu based on the category they’re in. There are category menus, and even nice folding ones, but I couldn’t find one that displays all the posts per category in a nice way.

So I decided to hack one in myself. It’s a very nasty hack… and I just put a bunch of code in the sidebar.php of my template. But that said… it works and I now have a menu that does what I want.

If you’d like to use this… just remember it’s a great big bad hack and very inefficient!

Here’s the html/php code I added to my template’s sidebar.php:

  1. // Get the id of the current post so we can give it a "current" class later.
  2. $postid = $post->ID;
  3.  
  4. // Arguments for getting all the categories
  5. $args = array(
  6. 'show_option_all'    => '',
  7. 'orderby'            => 'name',
  8. 'order'              => 'ASC',
  9. 'show_last_update'   => 0,
  10. 'style'              => 'list',
  11. 'show_count'         => 0,
  12. 'hide_empty'         => 1,
  13. 'use_desc_for_title' => 0,
  14. 'child_of'           => 0,
  15. 'feed'               => '',
  16. 'feed_type'          => '',
  17. 'feed_image'         => '',
  18. 'exclude'            => '',
  19. 'exclude_tree'       => '',
  20. 'include'            => '',
  21. 'hierarchical'       => true,
  22. 'title_li'           => '',
  23. 'number'             => NULL,
  24. 'echo'               => 0,
  25. 'depth'              => 0,
  26. 'current_category'   => 1,
  27. 'pad_counts'         => 0,
  28. 'taxonomy'           => 'category' );
  29.  
  30. // Get all categories (in a silly html menu)
  31. $catmenu = wp_list_categories( $args );
  32.  
  33. // Split the menu to get all categories sepparately
  34. $cats = split('
  35. <li class="cat-item cat-item-', $catmenu);
  36.  
  37. $catmenu = '';
  38.  
  39. // Loop through the categories.
  40. foreach($cats as $key => $cat){
  41.  
  42.         $current = '';
  43.  
  44.         // Get the code and html sepparately
  45.         list($id, $code) = split('"><a', $cat);
  46.  
  47.         // Make sure they're there.
  48.         if($id && $code){
  49.  
  50.                 // If this is the current category, then remove that text and remember for later
  51.                 if(strpos($id, ' current-cat') !== False){
  52.                         $current = ' current-cat';
  53.                         $id = str_replace(' current-cat', '', $id);
  54.                 }
  55.  
  56.                 // In case we got an id... and this category doesn't have sub categories.
  57.                 if(is_numeric($id) && strpos($code, "
  58. <ul class='children'>") === False){
  59.  
  60.                         // Arguments for getting the categorie's posts
  61.                         $args = array(
  62.                                 'post_type' => 'post',
  63.                                 'post_status' => 'published',
  64.                                 'numberposts' => -1,
  65.                                 'category' => $id
  66.                                 );
  67.  
  68.                         // Get the posts
  69.                          $myposts = get_posts($args);
  70.  
  71.                          // If we got any posts returned
  72.                          if(count($myposts)){
  73.  
  74.                                 // Start a nice html post list
  75.                                 $postlist = "\n".'
  76. <ul class="posts">';
  77.  
  78.                                 // Check east post to see if it's current and add to the html
  79.                                  foreach($myposts as $post) {
  80.                                         $current_post = '';
  81.                                         if($postid == $post->ID){
  82.                                                 $current_post = ' class="current-post"';
  83.                                                 $current = ' current-cat';
  84.                                         }
  85.                                         $postlist .= "\n".'
  86. <li'.$current_post.'><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>
  87.  
  88. ';
  89.                                  }
  90.  
  91.                                  $postlist .= "\n".'</ul>
  92.  
  93. ';
  94.  
  95.                                 // Add the post list to the code of the current category
  96.                                 $code = str_replace('</a>', '</a>'.$postlist, $code);
  97.  
  98.                         }
  99.  
  100.                 }
  101.  
  102.                 // Put everything that was split before back together
  103.                 $cat = '
  104. <li class="cat-item cat-item-'.$id.$current.'"><a'.$code;
  105.  
  106.         }
  107.  
  108.         // Add back into the complete category menu
  109.         $catmenu .= $cat;
  110. }
  111.  
  112. // Print out the category menu
  113. echo '
  114. <li id="menu">
  115. <ul>'.$catmenu.'</ul>
  116. </li>
  117.  
  118. ';

Display clean php code for copying

// Get the id of the current post so we can give it a "current" class later.
$postid = $post->ID;

// Arguments for getting all the categories
$args = array(
'show_option_all'    => '',
'orderby'            => 'name',
'order'              => 'ASC',
'show_last_update'   => 0,
'style'              => 'list',
'show_count'         => 0,
'hide_empty'         => 1,
'use_desc_for_title' => 0,
'child_of'           => 0,
'feed'               => '',
'feed_type'          => '',
'feed_image'         => '',
'exclude'            => '',
'exclude_tree'       => '',
'include'            => '',
'hierarchical'       => true,
'title_li'           => '',
'number'             => NULL,
'echo'               => 0,
'depth'              => 0,
'current_category'   => 1,
'pad_counts'         => 0,
'taxonomy'           => 'category' );

// Get all categories (in a silly html menu)
$catmenu = wp_list_categories( $args );

// Split the menu to get all categories sepparately
$cats = split('
  • ") === False){ // Arguments for getting the categorie's posts $args = array( 'post_type' => 'post', 'post_status' => 'published', 'numberposts' => -1, 'category' => $id ); // Get the posts $myposts = get_posts($args); // If we got any posts returned if(count($myposts)){ // Start a nice html post list $postlist = "\n".'
      '; // Check east post to see if it's current and add to the html foreach($myposts as $post) { $current_post = ''; if($postid == $post->ID){ $current_post = ' class="current-post"'; $current = ' current-cat'; } $postlist .= "\n".' '.$post->post_title.' '; } $postlist .= "\n".'
    '; // Add the post list to the code of the current category $code = str_replace('', ''.$postlist, $code); } } // Put everything that was split before back together $cat = '
    • '.$catmenu.'
  • ';

    And here is the javascript code I added to my template’s header.php:

    1. // Initialise javascript functions using jquery
    2. jQuery(document).ready(function(){
    3.  
    4.         initMenu();
    5.  
    6. });
    7.  
    8. // Start the menu functionality
    9. function initMenu(){
    10.         // Hide all the submenus by default
    11.         jQuery('#menu ul ul').hide();
    12.  
    13.         // Find the current post and make sure all the categories it's in are also "current", then show their kids.
    14.         jQuery('#menu .current-post').parents('li[id!=menu]').addClass('current-cat').children('ul').show();
    15.  
    16.         // Replace the click event of all category menu items except for "news"
    17.         // In stead make them fold down and up the sub menu
    18.         jQuery('#menu a').click(function(event){
    19.  
    20.                 thisItem = jQuery(this);
    21.  
    22.                 childList = thisItem.siblings('ul');
    23.  
    24.                 if(childList.length){
    25.  
    26.                         if(!(thisItem.html() == 'News' && childList.is(':hidden'))){
    27.  
    28.                                 event.preventDefault();
    29.  
    30.                                 if(childList.is(':hidden')){
    31.  
    32.                                         thisItem.addClass('clicked');
    33.  
    34.                                         childList.slideDown('fast');
    35.  
    36.                                         jQuery('#menu ul:visible').each(function(){
    37.  
    38.                                                 if(!(jQuery('.clicked', this).length || jQuery(this).siblings('.clicked').length)){
    39.                                                         jQuery(this).slideUp('fast');
    40.                                                 }
    41.  
    42.                                         });
    43.  
    44.                                         thisItem.removeClass('clicked');
    45.  
    46.                                 }else{
    47.                                         childList.slideUp('fast');
    48.                                 }
    49.                         }
    50.  
    51.                 }
    52.  
    53.         });
    54. }

    Display clean javascript code for copying

    // Initialise javascript functions using jquery
    jQuery(document).ready(function(){
    
    	initMenu();
    
    });
    
    // Start the menu functionality
    function initMenu(){
    	// Hide all the submenus by default
    	jQuery('#menu ul ul').hide();
    
    	// Find the current post and make sure all the categories it's in are also "current", then show their kids.
    	jQuery('#menu .current-post').parents('li[id!=menu]').addClass('current-cat').children('ul').show();
    
    	// Replace the click event of all category menu items except for "news"
    	// In stead make them fold down and up the sub menu
    	jQuery('#menu a').click(function(event){
    
    		thisItem = jQuery(this);
    
    		childList = thisItem.siblings('ul');
    
    		if(childList.length){
    
    			if(!(thisItem.html() == 'News' && childList.is(':hidden'))){
    
    				event.preventDefault();
    
    				if(childList.is(':hidden')){
    
    					thisItem.addClass('clicked');
    
    					childList.slideDown('fast');
    
    					jQuery('#menu ul:visible').each(function(){
    
    						if(!(jQuery('.clicked', this).length || jQuery(this).siblings('.clicked').length)){
    							jQuery(this).slideUp('fast');
    						}
    
    					});
    
    					thisItem.removeClass('clicked');
    
    				}else{
    					childList.slideUp('fast');
    				}
    			}
    
    		}
    
    	});
    }

    BoganBlender published

    Sunday, May 16th, 2010

    I just now uploaded my first build of BoganBlender. It’s a version of Blender that attempts to remove all “arbitrary” limits on input values. That also makes it somewhat unstable, and well… use at your own risk. But it should enable us to do things with Blender that aren’t normally possible.

    You can find the Linux 64bit Blender Render Branch build here

    Thanks to Campbell Barton for writing the patch. He is ehm… well not exactly opposed to the idea, but doesn’t really like it hehe. So extra thanks for writing something that you think is silly Cam, you’re a hero ;)

    You can find the patch here

    Be aware that if you edit/create blender files in this version, you may not be able to use them in other versions, and… they may well crash computers and do things you don’t want… this is a HIGHLY experimental version of Blender.

    Color it! Oinkie

    Friday, May 14th, 2010

    Shapeways published a nice new feature that I’m proud I got to help out with. You can now color your very own piggybank! Go here to have a look. There is also an article about it on SolidSmack.com

    Sintel trailer released

    Friday, May 14th, 2010

    After a lot of long days, and sleepless nights for some of the team, we finally released the trailer. It’s great to be able to show the world some of what we’ve been up to. More to come!

    http://durian.blender.org/news/sintel-teaser/

    OZMO6:2 released

    Wednesday, April 7th, 2010

    Dutch rapper Blaxtar released his new album OZMO6:2 last wednesday. He had a great party at the beautiful Tuschinski movie theatre in Amsterdam. I am very proud to have contributed to the creation of his record cover together with Torben Raun.

    First week at the Durian Open Movie project

    Wednesday, March 24th, 2010

    Hi all. Today I had my second full day at the Blender Institute with the Durian team. Find out more about the project here. I already wrote some scripts, found some bugs, been working on a big city scene, played soccer with the guys, and fed the ducks with Nathan. All in all a great start. The photo was taken by Colin Levy.

    Project London Multiply Teaser

    Wednesday, March 24th, 2010

    The crew from Project London (which I’m proud to have been a part of) have yesterday released a brand new, awesome teaser trailer! I’m actually in this one’s credits as well. Go have a look!

    A course at the SKVR

    Monday, March 22nd, 2010

    Download from Blendswap.com

    Downloadable Files

    Starting this April 19th I’m giving an 8 week (once a week every Monday evening) course in Blender 3D at the SKVR in Rotterdam. I believe some spots are still available right now. Also I’m giving a 3.5hr workshop there on Saturday the 27th of March. You need to reserve a seat if you want to take part. Go here for more information about that.

    I created a small model that we’ll use during the Saturday workshop.

    Convert to Empty

    Sunday, March 21st, 2010

    Downloadable Files

    I just now needed this to replace a bunch of objects with empties so I can use “Dupligroups” in stead. I thought I’d publish it… but no more info for now… perhaps later. It’s meant to work in Blender 2.5

    Now Blender 2.5 still isn’t stable so don’t expect it to work as is forever… I found it usefull though.

    Teaching UV unwrapping

    Thursday, March 18th, 2010

    Getting to grips with 2D to 3D

    This is a simple little exercise I came up with for showing students how to convert 2D to 3D and vise versa. The idea is to not go straight to 3D, but in stead give them a hands-on task that gets the idea into their heads. It’s not a completely new thing for most students, but the relation to UV unwrapping is. And of course it is fun to try to make it challenging as well.


    The example

    To give my students some idea of what I expected them to do I showed them an example I made the night before class. It’s a basic svg I made in Inkscape that I printed on A4 paper.

    I could have just made a single T shape to make a single cube, but since I was teaching university level students that was a bit too simple. In stead I made this, which turns into 2 cubes that are connected at a corner. The real world result that I glued together the night before class, and showed my students in the morning is below here.


    The task

    After showing the students my example, I provided them all with paper, rulers, pencils, glue or tape, and scissors. Then put them right to work. The task I gave them was was rather simple…

    Make something more complicated than a single cube!


    The results

    As usual my students surprised me with their inventiveness. The range of designs they came up with was really nice. Especially the surprises and “misinterpretations” that I really didn’t see coming. All I did during the class was walk around and give some pointers.


    Round up

    That’s basicly all this class was. After finishing the exercise we got stuck in in Blender 3D to UV unwrap the models they had made the day before. It was a lot easier for me to teach them that technique after they had done exactly the opposite with paper (which is what this exercise is). All in all this was a fun hour to break up the week of staring at computer screens, and I’ll definitely repeat it in future.

    I hope this helps you, and if you have similar fun ways of teaching your students, please let me know. I’m always looking for novel ways of getting these complex ideas into students heads.

    Dolf

    click here to close

    Help keep these files free,
    and support further development!