The Management Innovation Group re-launched their site with a new design. This was the second of two WordPress projects I developed this summer. The first was the Winning Connections site.
The WC site gave me the foundation for learning how to make the most out of WP without having to do any module writing. In the end, these both turned out to very interesting projects for me. And where I used to use MovableType for small client projects, I am now happily using WordPress. I still love Drupal, of course, for the projects that need it.
The MIG project was the more interesting of the two because the design specifications called for a different design template for each section. Quite an interesting problem when you're using a publishing system that is really intended for weblogs. I'm going to discuss 2 things below: 1) how to set your templates up to do section-specific CSS and 2) how to output local navigation.
1) Section-specific CSS
The key to getting the custom templates was to find a way to figure out what section a page is part of. WP gives you an excellent way to establish parent-child relationships when editing pages by simply selecting a Page Parent. But the default sidebar shows the entire hierarchy. The local navigation on both of these sites only shows the children of the section you are currently navigating. To get that to work, I had to do a little scripting.
Using the Page Tools plugin, you can insert a few lines into your template that gets the page's ancestor (top most parent). Then check that variable to see if it's one of your site's top sections, i.e. the links in your global navigation and assign that to the variable $section. If it's not a global navigation section, then assign the post name to the section variable.
// Parent of this post
$parent = page_get_parent_id( $post->ID );
// Fetch parent name for body/section CSS
if ( preg_match("/^[1-5]$/",$post->ID) ) {
// parents
$section_name = $post->post_name;
$section = eregi_replace(" ", "-", strtolower($section_name));
} else {
// children
$sectiondata = $wpdb->get_row("SELECT post_name FROM $wpdb->posts WHERE ID = $parent");
$section = $sectiondata->post_name;
} // endifNow you have a variable to identify the section in the global navigation. I used this variable to target a set of CSS rules that apply to this section, and voila. Instant section-specific CSS.
<body id="<?php echo $section; ?>">
Then in my CSS, I have a bunch of rules for each major element (div) of the page that gives positioning and other style information. So, for instance, the #content div can be different in the #services section from the #content div in the #principals section. Think of it as doing a mini-CSS Zen Garden within one site. All good.
Now, the next step is to determine what page WordPress is serving so you can pass that information to the style sheet as well. This is useful, for instance, in showing an on or selected state for the current page's link in the navigation. You can do this by grabbing the post name and assigning it to a variable:
// body-class for CSS
$bodyclass = eregi_replace(" ", "-", strtolower($post->post_name));Then drop that variable into the body tag as well:
<body id="<?php echo $section ?>" class="<?php echo $csstmp ." ". $bodyclass; ?>">
Then if you assigned CSS IDs to the links in your navigation, you've got a way to target the link as selected or not (e.g. making text color bold and black versus using default link color). Rockin.
2. Putting out local navigation
The next bit of trickery is actually echoing the links for children to output the local navigation. The Winning Connections site is the better example of the two, if you want to see how this works. What is happening here is that all of the children of a main section (a tab in the global navigation) are being displayed in a left sidebar (for local navigation).
This was a little trickier to do and I wish it was handled in a better way by default in WordPress. Maybe someone will point to a better method. My method was similar to the above method for determing what you were looking at. Check the entry IDs to see if we're looking at a global nav parent. If so, do MySQL query to put out links. If not, do a different query to put out local nav links. I won't go over all the details, but here's an example of the code I used to put out the local navigation. Should give you the gist:
// Current browser URL
$dapath = $_SERVER["REQUEST_URI"];
$postsdata = $wpdb->get_results("
SELECT p.post_name, p.post_title, p.ID, p.post_parent
FROM $wpdb->posts p
WHERE p.post_parent = $parent
OR p.ID = $parent
ORDER BY menu_order
");
foreach ($postsdata as $postdata) {
if ($postdata->ID == $parent) {
$class = NULL; $divclass = NULL;
$parent_name = $postdata->post_name; // the parent node
$postdata_url = $base . $postdata->post_name .'/';
} else { // the child nodes
$class = NULL; $divclass = NULL;
$postdata_url = $base . $parent_name .'/'. $postdata->post_name .'/';
if ($postdata_url == $dapath) { $class=" class=\"selected\""; }
// finally spit out the link
$output .= "<li id=\"menu2". $postdata->post_name ."\"><a href=\"". $postdata_url ."\"". $class .">". $postdata->post_title ."</a></li>";
} // end else
} // end foreach
// echo the list
echo $output;None of this would have been possible if it weren't for the efforts of others to make WordPress extendable. It's the same experience I have in using Drupal modules. People who contribute their ideas or code to make open source software better are cool. They're the ones that make some of these projects possible to implement with little effort.
Necessary plugins
These are the plugins I had to use to make these sites work.
- Page Tools -- for retrieving the highest ancestor (parent). This was useful for establishing what section is being viewed and then inserting that section name in the body tag as a CSS ID.
- The Excerpt Reloaded -- perfect for customizing the appearance of excerpts.
- wp-cache -- not that this site needs it, but excellent for taking the load off your server and saving you in case you get slashdotted for some reason.
Comments
11/02/05 @ 16:43
Hi
The power of CSS is amazing. I’ve seen a few sites like this one where i’ve been blown away by what you can do. Alot of DHTML and other funkiness can be avoided if your clever with your stylesheet.
I want to manage a stick up footer on the website for IE 5.0 +. with CSS As you can see 1 on bmw.co.uk
thanks
Imran
01/27/06 @ 05:13
Very good article! I used Wordpress as a CMS way back in the days of version 1.2, but things have certainly changed since then. I don't think they even had the Pages feature. I have not attempted it again as a CMS, but one never knows what the future may hold.
Personally, I like to use Textpattern as a CMS for projects I'm working on. Textpattern automatically lets you make sections, define specific page layouts and CSS stylesheet for each section, etc. I've just completed this site using TXP as the backend- "MicheleFlory.com":http://www.micheleflory.com. I considered using Wordpress but figured the site required so many sections and different page layouts that it simply wasn't worth the time it would take to figure out several of the things you mentioned here.
Anyway, I like the job you did on the WC site- looks great! Take care and much luck to you in the future :)
Post new comment