Menu-izing ds106 Assignments Site

Ir’s been fun to do some redesign and alignment of the ds106 web sites. I’ve long had an interest in trying to make the ds106 Assignments site into more of a template that could be used to create similar sites, and that just got a little bit closer to possibility.

The entire 106 fleet is a WordPress multisite, the main site and the Daily Create site both use the Parallelus Salutation theme, so they were easier to coordinate; the one change was using incorporating the stressed 106 logo as part of the TDC. They both use menus at the top, and I’ve set up the rightmost ones to be “ds106” navigation ones.

The ds106 Assignments site was a different beast. It is built on a 960c theme, one of the generic 960 grid system themes. I gave brief thought to trying to render it in Salutation, but it’s a hugely customized theme, and I was not even sure how to do taxonomy archives in Salutation. As is the design is a close-enough match.

The front page used a lot of graphics, and they were all hard code into place (to add a new assignment group meant a new graphics and the template edited):

The “Mission ds106” title was another graphic with its tagline “An anthology of new media projects” that really was not too explanatory. Not only that, I was unable to find the original graphics or even fonts used to modify those graphics.

Likewise, the interior page template used some hard coded icons, which looked nice, for the top navigation. Not easy to update or make more generalized:

My plan was then to implement the built in WordPress menus for the top navigation, so it would be common on all pages (and be flexible to edit) and maybe to make those front page main icons also be menu driven.

I found a great resource in Justin Tadlock’s Goodbye, headaches. Hello, menus! — it was an open tab in my browser for like 2 weeks, and I think he even changed his blog theme by the time I got back to it.

Getting the WordPress menus implemented was easy, a few lines in my functions.php to enable creation of 2 new built in menus:

// activate menus
add_action( 'init', 'register_my_menus' );

function register_my_menus() {
  register_nav_menus(
     array(
      'nav-menu' => __( 'Navigation Menu' ),
      'front-menu-left' => __( 'Front Menu Left' ),
       'front-menu-right' => __( 'Front Menu Right' )
     )
  );
}

This enabled me to start organizing the menus in WordPress:

I deleted the old stuff from the header.php template (adding in a new 106ish logo for the left side) and set in the code for basic menus:


   'nav-menu',
       'fallback_cb' => 'wp_page_menu', //if wp_nav_menu is unavailable, 
                                        // WordPress displays wp_page_menu function
      ) 
    ); 
  ?>

What I ended up with was a completely unformatted menu (a simple list). It’s a start.

My first abortive effort was to try and copy out the CSS from the Salutation theme, but it is pretty convoluted and rested on some jQuery and other javascript code libraries to work. And it did not work.

Rewind. It should just be a matter of finding some other CSS and JS code to do drop down menus. They must be a dime a dozen or less. I came across Superfish, a jQuery driven set of code for managing drop down menus and a Capability post about how to add this to WordPress.

Kavin’s approach was to re-arrange the directory structure for the superfish plugin, but I left it as is, putting it in place inside a “sf” directory of my theme folder.

Including Javascript code in wordpress should no longer be done simply by pathing something into your header.php template, especially with so many themes, plugins, and wordpress itself using jquery, but by using the WordPress enqueue function which takes care of avoiding conflicts. It kind of looks complicated, but its not. For my case, I need to enqueue jQuery (using suggestion how to use the latest version from Google), the suckerfish js plugin, and the suckerfish CSS.

In functions.php of my theme, I will first add an action to do this when WordPress assembles the header stuff, which will put in my new function ds106_bank_scripts to the floe:

// Add our function to the wp_head. 
add_action( 'wp_enqueue_scripts', 'ds106_bank_scripts' );

And I add my own function which more or less lines up the locations of my scripts and stylesheets (relative to the template directory) and calls them into action. This does the job of adding the JS and CSS to the header of my output pages.

function ds106_bank_scripts() {
 
    if (!is_admin()) { // Add the scripts, but not to the wp-admin section.
    
		// Adjust the below path to where suckerfish scripts dir is
		$scriptdir = get_stylesheet_directory_uri() . "/sf/";
 
		// Remove the wordpresss inbuilt jQuery.
		wp_deregister_script('jquery');
 
		// Lets use the one from Google AJAX API instead.
		 wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
		 	 
		// Register the Superfish javascript file
		wp_register_script( 'superfish', $scriptdir . 'js/superfish.js', false, '1.5.1');
			
		// Now the superfish CSS
		wp_register_style( 'superfish-css', $scriptdir .' css/superfish.css', false, '1.4.8');
 	
		//load the scripts and style.
		wp_enqueue_script('jquery');
		wp_enqueue_script('superfish');
		wp_enqueue_style('superfish-css');
		
	} // end the !is_admin function
		
} //end ds106_bank_scripts function

Next I have to add a bit of javascript to the <head>…</head> to initialize via jQuery the menus

Then in the header template where I want to have the menus appear, I modify the call to the function so it uses the classes and wrapper the superfish plugin expects


	 'nav-menu',
			 'menu_class' => 'sf-menu', 	//Adding the class for dropdowns
			 'container_id' => 'navwrap', 	//Add CSS ID to the containter that wraps the menu.
			 'fallback_cb' => 'wp_page_menu', //if wp_nav_menu is unavailable, WordPress displays wp_page_menu function
			) 
		); 
	?>

And it worked! How exciting! I mean that. But they are ugly.

I thought it would take a boat load of tinkering, but atrually it was just some changing of colors, background colors, font size, and I made the width wider to fit my menus. And Now the top menus come pretty close to matching the ones on ds106.us

And changing the menus is super easy by doing it inside the WordPress admin.

But I’m not done yet. I want to make the main front page, with the big graphic buttons, also menu driven. I created two new menus, for a left column and a right column, as I did above, and put them into my front page template


  
  
    
       'front-menu-left',
          ) 
        ); 
      ?>  
      
  
 
  
  
  

    
       'front-menu-right',
          ) 
        ); 
      ?>

Again, by doing these in menus (the item, as custom taxonomies, come in like categories as options to choose from on the left) I can easily re-arrange them, and their text display can be edited right here:

With a little fiddling, I was able to change the styles so the left was nice and big. But how to include the icons? That was easy. First, in the menu admin screen options, I enable the box to show CSS classes:

This means, for each menu item, I can create its own CSS class.

I put the icons inside my theme folder, in an icons folder within an existing img folder

And I just need then to make some custom classes in my CSS sheet for the list item class that put the image in the background, and the link class needs to be offset from the size of the icon

.frontmenu li {
	height: 150px;
	margin-left: 20px;
}


.frontmenu li a { 
	position:relative;
	top: 60px;
	left: 150px; 
	font-size: 24px;
	font-style:italic;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

.frontmenu li a:hover {
	
	color: #FF86C8;
	border-bottom: 1px dotted #FF86C8;
}

li.menu-visual {	
	background: transparent url(img/icons/visual.png) no-repeat center left;
}

li.menu-video {	
	background: transparent url(img/icons/video.png) no-repeat center left;
}

li.menu-audio {	
	background: transparent url(img/icons/audio.png) no-repeat center left;
}

li.menu-design {	
	background: transparent url(img/icons/design.png) no-repeat center left;
}

//etc etc etc

And voila! The new assignments look, totally reconfigurable via wordpress menus. The one thing I would like to do is to make the clickable area for the link extend over the graphic. I should be able to do this via the links padding, but have been blocked by something else in the CSS>

I’m really jazzed about this. The next step is going to be how to roll this into options for a template, so much of this could be done as options if this were put on a different site.