I am a: Quirky sysadmin. Geek. Gamer. Comic fangirl. My little space, my home on the interwebs. I blog about personal stuffs, work, various coding projects, and anything else I feel like.

Well after working on it for a few hours this morning (and re-writing my template about 5 or 6 times, LOL!), I was finally able to re-do my Links page. I’ve disabled the iMP-Links plugin and am using a template that I wrote earlier today in its place. Perhaps if/when a newer version is released, I may use it — or just write my own. *shrugs* Anyways, for anyone who’s interested, this is what I did…

I’m sure there’s a more elegant solution to this, but I haven’t had time to sit down and decipher and update the old code. If you were using this plugin (or wanting a layout like on my links page), this will get you by until a newer version is available.

I acquired the original collapsible javascript code from About.com. I was able to implement it into iMP-Links pretty easily, so I’m sure once the plugin has been updated, adding these back in shouldn’t be too much of a hassle.

First, you’ll need to copy the following code into a new text file and name it something like clmenu.js:

// Source: http://javascript.about.com/library/blclmenu.htm

function toggleMenu(objID) {
     if (!document.getElementById) return;
     var ob = document.getElementById(objID).style;
     ob.display = (ob.display == 'block')?'none': 'block';
}

Call it from your theme’s header.php file:

<script src="clmenu.js" type="text/javascript"></script>

Be sure to adjust the path in the code above to match the file’s path on your server!

Add the following to the end of your theme’s stylesheet.css:

.mC {width:100px; margin:5px; float:right;}
.mH {color:#60c; cursor:pointer;  font-weight:bold; border-top:1px solid #300;}
.mL {display:none; margin-bottom:10px;}
.mO {margin-left:10px; display:block;}

Now add the iMP-Links specific code (copied directly from the old plugin files) to the end your theme’s stylesheet.css:

#imp-links {}
#imp-links:after { clear: both; content: ""; display: block; height: 0; }
#imp-links .clearfloat { clear: both; height: 0; overflow: hidden; }
.switchcontent{display:none;}
/* Clearing the list style from kubrick theme */
html>body #imp-links ul { text-indent: 0; padding: 0; }
html>body #imp-links li { margin: 0; }
#imp-links ul li:before { content: ""; }
/* Clearing the list style from kubrick theme finished */
#imp-links ul.cat_list { list-style: none; text-align: center; padding: 0; margin: 0 0 20px 0; }
#imp-links ul.cat_list li { display: inline; margin: 0 10px; }
#imp-links ul.cat_list li a, #imp-links ul.cat_list li a:visited { padding: 3px 0; }
#imp-links ul.cat_list li a:hover { text-decoration: underline; }
#imp-links .imp-links-list { width: 45%; margin: 0; }
#imp-links .imp-links-list-left { float: left; }
#imp-links .imp-links-list-right { float: right; }
#imp-links .imp-links-list h3 { font-size: 1.1em; font-weight: bold; text-transform: uppercase; color: #555555; }
#imp-links .imp-links-list ul { list-style: none; border-top: 1px solid #dddddd; margin: 5px 0 0 0; }
#imp-links .imp-links-list ul li { border-bottom: 1px solid #dddddd; }
#imp-links .imp-links-list ul li a, #imp-links .imp-links-list ul li a:visited { display: inline-block; }
#imp-links .imp-links-list ul li a, #imp-links .imp-links-list ul li a:visited { display: block; padding: 4px 10px; }
#imp-links .imp-links-list ul li a:hover { background: #f5f5f5; }

You may need to adjust some of the values above based on your personal tastes and/or your theme’s layout and design.

If your theme has a links.php template pre-made, open it and add the red code below. If not, you can make a copy of your index.php and modify to something along the lines of the following code (don’t forget to delete the_loop!):

<?php
  /*
  Template Name: Links
  */
?>

<?php get_header(); ?>

<?php get_sidebar(); ?> 

<div id="content">

	<h2><?php the_title(); ?></h2>

	<div id="imp-links">
	  <div class="mC">

		<div class="imp-links-list mH imp-links-list-left"><?php $params = array( 'category' => '79',
		  'title_before'  => '<h3><a href="javascript:void(0)" onclick="toggleMenu(\'c79\')">',
		  'title_after' => '</a></h3><div id="c79" class="mL"><div class="mO">',
		  'category_before' => '',
		  'category_after' => '</div></div>',
		  'between' => '&nbsp;-&nbsp;',
		  'show_images' => 0,
		  'show_description' => 0 );
		  wp_list_bookmarks($params); ?></div>

		<div class="imp-links-list mH imp-links-list-left"><?php $params = array( 'category' => '80',
		  'title_before'  => '<h3><a href="javascript:void(0)" onclick="toggleMenu(\'c80\')">',
		  'title_after' => '</a></h3><div id="c80" class="mL"><div class="mO">',
		  'category_before' => '',
		  'category_after' => '</div></div>',
		  'between' => '&nbsp;-&nbsp;',
		  'show_images' => 0,
		  'show_description' => 0 );
		  wp_list_bookmarks($params); ?></div>

    </div>
  </div>

</div>
<?php get_footer(); ?>

Now that’s a small snippet of what I used on my Links page template. If you’ll notice, in the first link code snippet I’ve highlighted the two instances of c79 and 79. ’79’ is the first link category that I wanted displayed, ‘c79’ is a reference id so the script knows which one to show/hide.

I had to use ‘c79′ instead of ’79’ because ID attributes have to start with a letter, so use whatever you want, just make sure to keep them labeled the same for each instance, as it makes for easier troubleshooting should you have a problem.

If you’ll also notice, I did the same with the next category, whose category id number happened to be 80.

You’ll need to do this for each of the link categories you want displayed on your Links page. Like I said before, I’m sure there’s a more elegant solution out there, I’m just looking for a quick fix until either a newer version of the iMP-Links plugin is released — or I get time to sit down and debug the old one (no telling when THAT will be). To find your category id numbers, go to Blogroll, Categories in your WP-Admin.

If something’s unclear or needs further explanation, please let me know via the comments form below and I’ll try my best to answer any questions.

* TIP: If you did not previously have a links.php and created one using this tutorial as a guide, don’t forget to go into WP Admin and edit your Links page (Manage, Pages). Under Page Template, choose Links (or whatever you named the template in the ‘Template Name’ bit) from the dropdown list. If you do not see your template there, make sure you have named it (‘Template Name’) in the file as shown above and have uploaded it to your theme’s directory on your server.