Categories
Tutorials WordPress

Highlight Current Page or Category in WordPress 3.0 Menus

Almost two years ago I published an article on how to create custom WordPress menus that highlighted the current page. It’s still one of the most popular posts on this site, and for good reason: Current page highlighting is vital to ensure a good user experience for your visitors. Without current page highlighting it’s hard for the visitor to know if she is on the correct page or not. Now it’s time to upgrade that tutorial to incorporate the new custom menu functionality in WordPress 3.0 and also add some new functionality.

WordPress 3.0 menus simplify everything… once you understand them

One of the major improvements shipped in WordPress 3.0 was the custom menu functionality. In the past menus were restricted to either simple page or category lists, hard-coded menus stored in the theme files or cumbersome 3rd party plug-ins. No such trouble any more. Custom menus are now available from right within the WordPress admin panel, found under the Appearance tab. And even if you have an older theme that doesn’t support the new menus you can still use them in your sidebar as widgets.

I’m not going to cover how to use the menus from within the admin panel. For that I recommend you read this WordPress Codex article that explains it quite well. Instead I’m going to talk about what you can do with these menus styling wise.

Dissecting the stock menu output

To see what’s possible with these new menus let’s first take a look at the code output from the stock menus. In this example I’ve created one menu with the name “My First Menu” and added it to the site using a sidebar widget. The menu has three buttons; Home pointing to the home page, About pointing to the About page and Contact pointing to the Contact page. (To make the code easier to read I’ve removed the sidebar <ul> and <li> tags so you only see the actual menu output.)


<div class="menu-My-First-Menu-container">
	<ul id="menu-My-First-Menu" class="menu">
		<li id="menu-item-37" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-37">
			<a title="Home" href="http://mysite.com/">Home</a>
		</li>
		<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38">
			<a title="About" href="http://mysite.com/about/">About</a>
		</li>
		<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39">
			<a title="Contact" href="http://mysite.com/contact/">Contact</a>
		</li>
	</ul>
</div>

The key information for this tutorial can be found on line 4:

The first list item has an ID attached to it and then a huge array of classes. They are: “menu-item”, “menu-item-type-custom”, “current-menu-item”, “current_page_item”, “menu-item-home” and “menu-item-37”. Of these the three that matter to us are “current-menu-item”, “current_page_item” and “menu-item-home”. Using these custom classes you can create custom styles that highlight or otherwise affect only certain elements:

.current-menu-item { } targets only the menu item the visitor pressed to get to the menu. This goes for categories as well as pages.

.current-page-item { } targets only the current menu item if that menu item is pointing to a page and the visitor is on that page.

.menu-item-home { } targets only the menu item that points to the root or home page of the site.

So, to answer the question from the original artice: How do I highlight the current page in my menu? The answer is create a custom class style with the name .current-menu-item. As a bonus this style will not only target your pages but also your category index pages and your home page. In the past you had to create separate styles for these.

Going deeper with child pages

But this is just the beginning. With the new WordPress menus you can create custom styles that target more than just pages and category indexes. It turns out the code output for these custom menus is highly dynamic and it interacts with all the content on your page whether you actually use the menus or not. The code output above was generated after clicking on the home page and thus resulted in the three classes listed above (notice those three classes are not present in the two other list items). But what if you went to a page that was a child of one of the menu pages? In the past that would mean the parent page would not be highlighted in the menu. But now it can.

The code below was grabbed from the same site as before after I opened a page for which the About page is the parent:


<li id="menu-item-38" class="menu-item menu-item-type-post_type current-page-ancestor menu-item-38">
	<a title="About" href="http://mysite.com/about/">About</a>
</li>

Look closely at the class array and you’ll find this new class: “current-page-ancestor”. This class is activated every time the visitor opens a page that has a parent page that is featured on the menu. That means you can use this class to highlight the parent in the menu. The easiest way to do this is by simply adding the new class to the style of the original .current-menu-item class:

.current-menu-item, current-page-ancestor { } targets either the menu item for the current page or the menu item for the parent page if a child page is visited.

Category highlighting for single posts

It gets even more interesting when we look at category menu items. Like in the past you can create menus that point to category archives. And you can use the .current-menu-item class to highlight the current category in the menu if you’re on the category index page. But what if you want to highlight the category (or categories) of a particular post when that post is open? Again there are custom classes for this:


<li id="menu-item-40" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-40">
	<a title="Commercials" href="http://mysite.com/category/commercial/">Commercial</a>
</li>

Here the three classes “current-post-ancestor”, “current-menu-parent” and “current-post-parent” are what matters. Either of the three will allow you to highlight the category (or categories) the current post belongs to, but they each work in different ways:

.current-post-ancestor { } targets the menu item as long as the category the menu item points at is an ancestor of the post (so regardless of whether the post is in the category or in a sub-category under the category)

.current-menu-parent { } targets the menu item if it is the parent of the menu to which the post belongs (yes, it’s confusing).

.current-post-parent { } targets the menu item only if the category is the direct parent of the post (menu item will not be highlighted if the post only belongs to a category that is a child of the category the menu item points to).

Bottom line: The style that highlights pages, categories and parents

Because of how this new menu system is set up, and because it works so well you only really need to create one custom style if you want to highlight the current page, current category, page parent and category parent in your menu:


.current-menu-item,
.current-page-ancestor,
.current-post-ancestor { }

To get more advanced you can also create separate highlighting styles depending on what type of menu item it is or what relationship it has to the page, post or index. And if you have multiple menus you can create entirely separate style sets for each of these, complete with current page, post and category highlighting. The possibilities are if not endless then at least quite extensive.

Upon first inspection the code output of the new WordPress 3.0 menu system may look quite messy but now that you see what it’s all for I think you’ll agree with me that this heralds in a whole new age of menu customization for theme developers.

If you want to see this stuff in practice head on over to the website for the 12×12 Vancovuer Photo Marathon where I’ve implemented tons of custom menu highlighting.

Categories
Tutorials WordPress

Build a fancy WordPress author box

If you have a WordPress site or blog with multiple authors it might be useful to create a custom author box for each of them so the readers can get more information about the author and see their other posts etc. This tutorial is an extension of my Fancy Profile or Author Box tutorial from a couple of weeks back that customizes the author box to work with WordPress.

The final result

The goal of this tutorial is to create an author box like the one you see at the top of this article. The box above is the actual output of the working code and as you can see it works quite well. The box is conditional and activated by a custom field so it will only appear when you want it to. The bio is the standard profile bio entered in the WordPress user profile area. The name is the chosen display name of the user and links to the author index for the author. The website link opens the user defined website in a new window. The Twitter link goes to the user Twitter profile. And finally the image is the user Gravatar. The Twitter link is a bit wonky – I’ll get back to that later.

If you don’t want to go through the entire tutorial and learn how this all fits together just jump to the bottom of the article and get the source code.

Building the code

We already have the baseline for the code, both HTML and CSS, from the Fancy Profile or Author Box tutorial but this is going to be a dynamic box so we need to replace the static content with WordPress functions.

Let’s start with the baseline code:

Retrieving the dynamic author elements

To generate the dynamic content we are going to use a set of standard WordPress functions. These have changed over the last year or so and as a result the ones featured in many older tutorials are now deprecated.

To get the author bio we use the_author_meta():


To get the author Gravatar we use a custom code block that gets the user email address and retrieves the correct Gravatar based on that address:


To display the author name as a link to the author index page we use the the_author_post_link(). It’s an all-in-one solution that outputs the name with the correct link attached:


For the links to the author website and Twitter account we use the_author_meta() again interspersed with some plain text. Note that you have to combine several functions to get the name displayed as well as the link created:

's website
Follow on Twitter

A caveat: The Twitter handle is a bit of a cheat!

If you look at the last line of the last code example you’ll see that for the Twitter name I’m actually calling the AIM value (AIM being America Online Messenger). This is because the standard WordPress profile page only asks for your e-mail, website, AIM, Yahoo IM and Jabber / Google Talk information. I wasn’t aware anyone was using AIM any more and I have a feeling this is a leftover from way back so I chose to use this field to output the Twitter handle because it has the least chance of anyone actually using it. There is a way to add Twitter and other handles properly but this requires the use of plugins – something I’m not a big fan of. If you’re interested there is some information on it in the WordPress Codex.

Putting it all together

Now that we have the source code and all the correct dynamic tags it’s time to put it all together. The end result (barring any changes you decided to make on your own) should look like this:

's website
Follow on Twitter

Making it conditional

If you cut and paste the code above into your page or post template it will appear in every page or post. Which I’m pretty sure is now what you want. To make it elective you need to make a conditional statement in the code. I do this by using Custom Fields, in this case a field with the name “author” and the value “true” or “false”:

ID, 'author', true))) { ?>
	

This small function asks “if this current post has a custom field with the name “author” that is set to “true”, do what I say”. That way your box will only appear if the custom field has been defined.

The final HTML/PHP markup

With the conditional statement in place the complete markup to be pasted into your theme file looks like this:

ID, 'author', true))) { ?>
	
's website
Follow on Twitter

Where to put the code

Like I said, this code has to be inserted into your theme files for the box to work. The easiest way to do this is actually to place it in a separate PHP file called something like “profile.php” and then call in from the theme files in question. That way you don’t have to edit the core theme files if you want to make a change to the box and adding it to new files means adding just one line of code.

If you placed this code (and only this code) in a file inside your theme called “profile.php” calling it from one of your core theme files is as easy as adding this one line of code:

/profile.php'); ?>

Where you insert it depends on where you want the box to appear in relation to your post content. If you want it to appear directly above you insert it before the the_content() function call. If you want it to appear after you insert it after and so on. Since you’re only inserting one line of code it’s easy to experiment and move it around for the best placement. And since the CSS is flexible width it will work properly pretty much regardless of the width of your post area.

The only thing to keep in mind is that the author box must be called from within the loop, otherwise it will not work.

The final CSS markup

The CSS markup for the author box is pretty much identical to the CSS in the original tutorial. I’ve just added some specifications to avoid conflicts. All you need to do is paste this into your styles.css file, get the blue background image file and place it in your theme image folder and make sure the call to the file has the correct image folder name.

/* AUTHOR BOX STYLES */

.profile {
	border: 1px solid #CCCCCC;
	position: relative;
}

.profileText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 10px;
	line-height: 1.4em;
	text-align: justify;
}

.profileStats {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	text-align: right;
}

.profileStats img {
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.profileName {
	padding-bottom: 5px;
	padding-right: 92px;
	font-size: 1.2em;
	font-weight: bold;
	color: #2e4672;
}

.profileName a {
	color: #2e4672;
}

.profileName a:hover {
	color:#24375B;
	text-decoration: none;
}

.profileJob {
	font-size: 0.8em;
	padding-right: 92px;
	padding-top: 5px;
	background-image: url('{image folder}/testimonialBlue.gif'); /* Remember to set the correct image folder here */
	background-repeat: repeat-x;
	height: 45px;
	color: #FFFFFF;
	line-height: 18px;
}

.profileJob a {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

/* END AUTHOR BOX STYLES */

That’s all there is to it. Have fun adding this box to your website or blog and customizing it to fit with your theme. And if you like, drop a comment below to show it off to the world.

Categories
CSS Web Standards WordPress WordPress Themes

Typograph – new WordPress Theme

I’ve closed the comments for this thread to consolidate all comments for the different versions of the Typograph theme in one place. Please leave all your comments at the Typograph page which can be found by clicking here.

I’ve been planning to launch a proper free WordPress theme for some time now but there have always been major projects in the way. This week I had some extra time so I sat down and developed the Typograph theme which is now available for anyone to use. For free.

The theme is as simple as possible with clear separation between the content and the sidebar, a calm gray and white design with popping red links, a tabbed sidebar box with navigation, search and other important elements and some other styling for increased readability and better navigation. It complies with the new WordPress standard elements like image captions and Gravatars and even has a customizable ad space directly under the first post on the front page. And last but not least, Typograph is fully XHTML and CSS standards compliant.

Download the Typograph theme from the WordPress Theme Directory here!

See a demo of the Typograph theme here

No images

Right before I began the design of this theme, Spyremag published an article about 5 ways to break your design habits, one of which was to design a site using no images. Seeing as I’ve become somewhat obsessed with CSS over the last year it seemed only appropriate to follow this advice and create a no-images theme. Not only would this be a bit of a challenge because I ususually use a lot of images to make my designs more vibrant, but it would also put my coding skills and my understsanding of WordPress themes to the test.

Styled from scratch

Over the last several months I’ve been refining and customizing a copy of the Sandbox WordPress theme to develop an ideal platform for quick and easy WordPress theme design. The plan is to create a “God Theme” if you will that has all the bells and whistles installed and ready to go so that new theme design is quick and efficient. To put the alpha version of this foundation theme to the test I used it to style Typograph from scratch.

Tabbed box navigation

When I created the new theme for Design is Philosophy I spent quite a bit of time developing and perfecting a JQuery and CSS based tabbed sidebar box that would contain navigation as well as other useful information for the visitor. For Typograph I further developed the tabbed box and isolated it in it’s own file to simplify customization for the user. It can also easily be deactivated by commenting out a single line of code in the sidebar.php template. The tabbed box contains navigation for pages and categories along with an about section, RSS link and search box by default. It takes standard WordPress tags and can be customized to include pretty much anything by editing the tabbedBox.php file found in the theme directory.

Download the Typograph theme from the WordPress Theme Directory here!

See a demo of the Typograph theme here

Categories
CSS Expression Web News WordPress as CMS

WordPress as CMS – The Project

I’ve been talking about this for a while now and it’s time I got a little more specific. It is my contention that with some small tweaks, WordPress can be used as an excellent Content Management System (CMS) and used to serve small-scale business websites. This isn’t something revolutionary – a simple Google search on the words “WordPress” and “CMS” gives you many interesting entries – but I don’t think the full potential of this alternate use has been explored. So I’ve taken it upon myself to see just how much I can get out of this small little program and if it can be used to serve my many clients in a more effective manner.

Why WordPress

That’s the first question I get: “Why WordPress? What’s the point? Why don’t you just use a CMS like Joomla! or Drupal?” To answer the last question first, in most cases using Joomla! or Drupal is like trying to kill an ant with a tank. Not only is the tool way too big and wasteful to do the job, but chances are the ant slips between the belt threads and you don’t actually achieve your objective at all. These huge Open Source CMSes are excellent if you are building large-scale community based websites with multiple blogs etc etc but for small business applications they are often too large and cumbersome. What’s needed is a simple, easy to understand CMS that gives the client the ability to quickly edit, update and manage her website with the least ammount of hassle. Sure, you can build something like that yourself, but why bother when there is already an application that pretty much does what you want available for free?

There are a couple of other reasons why I want to tap the full potential of WordPress for this project: First off, WordPress has an extensive and growing library of plug-ins and ad-ons that make it a very powerful piece of software. Seccondly, blogs have become an excellent way of promoting yuour business by letting your clients interact with you on a semi-informal basis. And WordPress is a blogging platform. Nuff said. Thirdly (and maybe most importantly), WordPress blogs has an uncanny ability to get synced up with search engines like Google and MSN almost immediately upon being launched. Through a couple of very interesting experiments I’ve learned that the best way to get your website listed on Google is simply to build it on a WordPress platform. And if you are running a business, geting listed on Google can be the difference between being noticed and going under.

Project Outline

What is needed to make this work? One major hurdle used to be the ability to put the standard blog front page on a sub page. This used to require quite a bit of coding, but in WordPress 2.3 and above it’s actually built into the main setup.

The next big issue is to get out of the standard header, body, footer layout scheme that all WordPress themes are built on. Although this feature is unneccesary in most cases, I can think of a dozen scenarios where you want individually styled pages with their own CSS backend and right now, that’s not something you can do right out of the box. I’ve been theorizing about this problem for some time and the solution appeared most unexpectantly at a session at MIX08 where the presenter to save time ignored the whole WP theme and built an external page with the loop calls inside it. It was a bit of an aha moment for me that you don’t actually need to stick to the rigid frame of WP, and although it is technically not correct to do so, if it makes my life easier, to hell with correctness.

Another question is to what extent one can use the Custom Fields to make styling changes in pages. I’d like to experiment and see just how far I can push this feature.

Finally, is it possible to make a non-WordPress site utilizing the WordPress infrastructure and database? In other words, can I build completely separate pages outside of WordPress and then use the loop calls etc to insert the required info in such a way that the site can be managed from the regular Admin panel without the client having any access to the controlling files. This final question is the crucial one because in the end what is needed is a manageable CMS that gives the client unlimited access to the content but limited or external access to styling, layout and other important files so that nothing can be “broken” by mistake.

The Future

In the coming weeks I’ll be launching two sites built on a WordPress as CMS v0.1 platform (pretty much stragith WordPress with some heavily customized themes) and once these are done I’ll dive head first into a major hacking project to see just how deep the rabbit hole goes. With any luck I’ll have a fully operational and customizeable CMS to use as a base for my client sites before the summer. In the spirit of cooperation I have every intention of blogging about all my findings and sharing the code and hacks with the online community. I’ll also blog further on how to modify WordPress blogs using Expression Web to help bring some beauty to the blogosphere.