I’ve used this approach recently for several sites with dynamic page titles with great success.  That doesn’t mean it still has some limitations. The two biggest in my opinion are the inability to select the replaced text, and the lack of a reliable hover option (so you can change the replaced font color on mouse-over). Another issue that has affected me is the lack of small-caps support. Although it’s slated to be included in a future Cufon version, I hacked together an approach that works now using jQuery and JavaScript regular expressions.

The process is fairly simple – first replace your text with Cufón, then run a regular expression that inserts SPAN tags around the first letter of each word, and then use jQuery to increase the font size of these span’s classes. Simply setting the classes font-size larger in CSS before hand does not work.

Below you can see the three stages of the process that I went through – first I loaded up a headline that uses the CSS small caps attribute – it works but it’s not the font I want. The next headline is Cufon replaced – it looks much better, but I’ve lost the small caps effect. Finally using the hack, I’ve achieved the custom font with small caps.

Un-replaced Text with Small Caps

Replaced Text before Small Caps Hack

Replaced Text with Small Caps

The first step is to load in your various javascript files. You can download cufon and create your own font javascript files at cufon.shoqolate.com.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="PATHTO/cufon-yui.js"></script>
<script type="text/javascript" src="PATHTO/font-file-you-create.js"></script>

Then you can set up the styles you want your headlines to have:

<style type="text/css">
h1 {
	font-family:times,times new roman, serif;
	font-size:20px;
	text-transform:uppercase;
	color:#900;
}
</style>

The next step is to create your headline:

<h1>This is the headline I'm font-replacing</h1>

Finally, use the follow JavaScript to create the effect:

jQuery(document).ready(function($) {
	Cufon.replace('h1');
	var text = $('h1').html();
	$('h1').html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
	$('.caps').css('font-size',30);
});

This script, which loads when the DOM is ready, first replaces the font, then inserts <span class=”caps”> around the first letter of each word, and finally increases the font size on these first letters from 20px to 30px. You can of course change these font sizes to meet your needs. The particular font I used here, Adobe Garamond Pro, had a slight line-height offset after this JavaScript was run – I fixed this with a style for the ‘caps’ CSS class – you may need something similar for the font you choose

h1 span.caps {
	position:relative;
	top:2px;	
}

I hope someone finds this useful.

In this second post, I’m going to explore the code generated by this functionality, and give a simple demonstration of how to style and animate the generated menus using  CSS and jQuery. You can then use these skills to develop your own WordPress 3.0 theme and its menus.

Here’s a demonstration video of the end result. The menus were created using the WordPress Menu Management functionality and are set to animate down and fade in on mouseover, and utilize CSS3 gradients and rounded corners. Refer back to part I to see how the menus were created initially.

Our first step will be to add styling to the menus. As with the previous post, I am basing these instructions on the default WordPress 3.0 Theme “Twenty Ten.” It’s important to understand all of the pieces of code that come together to draw the menus. For this example, 3 files will come into play.

The first is header.php in the theme’s root directly. This is the file that draws the header part of your pages. In the Twenty Ten theme, it includes a call to wp_nav_menu(). This is the function that queries WordPress for the menu in HTML. It takes several optional parameters, which I won’t get into here – they’re described at http://codex.wordpress.org/Function_Reference/wp_nav_menu if you’d like to explore – they let you change CSS classes, wrapper <DIV>s, etc.

<div id="access">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div>

Sample output of this function is below. You’ll notice that WordPress draws the menu out using unordered lists. They nest secondary menus in additional <ul> tags. This is a very popular method to organize navigation and is highly customizable with CSS. If you’re unfamiliar with this approach, A List Apart has a very good explanation.

<div id="access">
<div class="menu-header">
<ul id="menu-wordpress-sandbox-menu" class="menu">
	<li id="menu-item-17" class="menu-item"><a href="#">Fruits</a>
		<ul class="sub-menu">
			<li id="menu-item-19" class="menu-item"><a href="#">Oranges</a></li>
			<li id="menu-item-20" class="menu-item"><a href="#">Apples</a></li>
		</ul>
	</li>
	<li id="menu-item-32" class="menu-item"><a href="#">Colors</a>
		<ul class="sub-menu">
			<li id="menu-item-30" class="menu-item"><a href="#">Blue</a></li>
			<li id="menu-item-31" class="menu-item"><a href="#">Red</a></li>
		</ul>
	</li>
	<li id="menu-item-33" class="menu-item"><a href="#">Links</a>
		<ul class="sub-menu">
			<li id="menu-item-34" class="menu-item"><a href="#">Google</a></li>
			<li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a></li>
		</ul>
	</li>
</ul>
</div>
</div>

Comparing this HTML output to the accompanying sample images and video, you’ll notice the drop-down portion of the navigation is in the nested <UL>s with a CSS class of ’sub-menu’. This is generated automatically by WordPress and this nesting structure is how you can add style and animation. Please note that for this demonstration, the HTML above has been simplified – my links are empty and I have also stripped out many additional class names that WordPress includes automatically for the UL’s and LI’s to make the HTML simpler to read. These classes can be very useful for detailed styling though, so consider reviewing your generated code when you do your implementation.

Now that we know how the menus are drawn in HTML, we can start to style and animate them. As mentioned earlier, my examples work on top of the Twenty Ten default WordPress 3.0 Theme, so I will show code from this theme. This theme has a GNU General Public License so we’re free to modify it and use it near any way we’d like – consider copying it and working on the copied version for your experimentation.

The CSS styles for the Twenty Ten theme are in the file styles.css in the main theme directory. Starting around line 370 of this file (in the RC1 version of WordPress at least), you’ll see a section of the CSS commented ‘Menu’ that starts defining the menu’s styles.

/* =Menu
-------------------------------------------------------------- */
#access {
	background: #000;
	margin: 0 auto;
	width: 940px;
	display:block;
	float:left;
}

Looking through this section of CSS, you’ll see the various styles that set the colors and fonts used in the menus. In my example, I changed the background colors for the nested sub-menu lists. I also added gradients to them (these gradients only work on CSS3 compatible browsers). Specifically I styled “#access ul ul a” like so (the background-image calls set the gradient):

#access ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 160px;
	background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));
}

I also added rounded corners to the bottom of each sub-menu. Again this isn’t support on all browsers. To do this I modified “#access ul ul,” adding the following CSS. The extra bottom padding gives room for the rounded corners.

#access ul ul {
	padding-bottom:10px;
	background-color:#474747;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

The key parts of the CSS that tell the menus to appear on mouseover are below:

#access ul ul {
	display:none;
	...
}

and

#access ul li:hover > ul {
	display:block;
}

The first part tells the browser not to initially display the nested menus, but the second says do show them when the parent item is moused-over. To get our animation working, we’re going to comment out the “display:block” CSS – we’re going to instead control the display menu event with JavaScript.

#access ul li:hover > ul {
	/*display:block;*/
}

The simplest way to do this is with the help of a JavaScript library like jQuery. WordPress already comes with jQuery so we need to load it in using the wp_enqueue_script function. The enqueue function is the safe way to add JavaScripts to WordPress to safeguard against various conflicts. We’re also going to load in a second JavaScript file we’re about to create called navigation.js.

Open up the header.php file and add

<?php 
 
wp_enqueue_script('jquery');
wp_enqueue_script('unitzNav', get_bloginfo('template_directory')."/navigation.js");
 
?>

to the HEAD section of the document. We’re now loading up the jQuery library automatically for use with every page. Now it’s time to create the navigation.js file we referenced earlier – create this file in the same directory as the rest of the theme files.

If you’re unfamiliar with the power of jQuery there are ample tutorials and discussions online. In a nutshell, jQuery makes once complicated JavaScript tasks very simple, that work in just about every browser. We’re going to be using a simple effect for our menu animation but, many jQuery menu plugins and navigation techniques are available that you can use as well. Here and here are resources to explore many such techniques.

Put the following in your navigation.js file:

jQuery(document).ready(function($) {
	//initial the menus
	$("ul.menu li").mouseover(function() {
		$(this).find("ul.sub-menu").animate({"height": "show", "opacity": "show"}, 800, "swing");
 
		$(this).hover(function() {}, function(){
			$(this).find("ul.sub-menu").animate({"height": "hide", "opacity": "hide"}, "slow");
		});
	});
});

Believe it or not, this short section of code is all it takes to get the drop down menu animation working across most browsers with jQuery. The outer wrapper is a jQuery function call that runs when the page is finished loading. It then tells the browser to animate open the instance of ul class=”sub-menu” whenever a parent list item is moused over. Then, using the hover function, it tells the browser to animate closed this same menu when either the parent item or menu is moused out.

On the jQuery website you can read more about this syntax and the available function parameters – many types of animations and effects can be used here.

This simple approach does have limitations – specifically, although the Twenty Ten theme and WordPress’s menu manager support more than two levels of navigation, this jQuery implementation does not and will break the lower menus. However, considering the relatively simple modifications, the effect is quite effective.

Thanks for taking the time to read these posts – I hope it gets you excited for the power of WordPress 3.0’s menu management and gets your thinking about ways to style and animate your own menus.

To follow along, you’ll need to download WordPress 3.o. You can visit the WordPress development blog to find a link to the latest Beta, and soon version 3.0 will be released officially. WordPress.org provides excellent installation documentation if you need help installing.

What is it?

WordPress has come a long way since starting as purely a blogging platform. Thanks to its open framework, it has been modified through plug-ins to be a powerful content management system (CMS). Developers started using WordPress to drive entire sites full of content – not just blogs.  However, to do so required tricks and kludges to work properly. WordPress 3.0 makes the process much easier and truly makes WordPress a viable CMS platform.

Simple Menus Controlled Through WordPress

WordPress has allowed users to create two different types of content – posts and pages. Posts are the blog posts themselves, generated over time. Pages, which are created through a similar interface, were meant to hold static content. All WordPress installations start with a single About Us “page” that the blogger can use to describe themselves. Developers have utilized these “pages” to create entire sites and used WordPress as a CMS so end users could edit content themselves. These developers used to have to manually create the navigation structure though, digging deep into the code, in order to create links to all of the pages they created. With WordPress 3.0, regular users can now not only create pages but also organize and arrange them into menus through the Menus sections’ simple drag and drop interface.

How do you use it?

This post assumes that you’re using the default WordPress 3.0 Theme, called Twenty Ten, which has support for the menu manager built in. My next post in this series will explain how to modify the theme and change the display of the menu.

To explore the Menus feature,  start by creating a few sample pages in your fresh WordPress 3.0 installation. In my visual examples I have created a few pages named after fruits and colors. If you need help learning how to use the WordPress interface to create pages, WordPress.org has excellent documentation.

The Menus page in WordPress 3.0

Once your pages are created, click on the menus link in the left column of the administration area, under the “Appearance” heading. Please note that users need appropriate permissions to access this link. Two new columns of options appear to the right.

The left column allows you to choose the type of link you want to add to your menu. There are three types of menu items you can add:

• Custom Links allow you to add menu items that link to external web pages. Enter the page’s address in the URL box and the name you want to use in the label box. In my visual examples I have used this section to add links to Google and Yahoo!
• Pages is where you add menu items that link to the WordPress pages you have created – in my examples the colors and fruits pages are available to me.
• Categories is the final option, and if you have created categories of blog posts, pages that list all posts in that category appear here.

Select the check boxes next to the pages you want and click add to your menu. Add a few custom links if you’d like as well. These items will now all appear in the right column in a vertical list. The Twenty Ten theme draws the menus horizontally, so you need to visualize the appearance of the items left to right instead of top to bottom.

Organizing Menu Items in WordPress 3.0

Now click and drag the items in the right column – you will notice that you can arrange them and adjust them left and right. The order you arrange them in is the order in which they appear. The adjustments you make left and right determine their hierarchy in the site. The leftmost items are your primary navigation. Items nested one notch to the right are the secondary navigation of their parent, and so on. In the Twenty Ten theme, the primary navigation items appear at all times at the top of the page, and when you mouse over them the secondary navigation menus appear. The third tier menus and so on appear to the right of their parent items when the parent is moused over.

WordPress generates standard XHTML lists for the menus, which a WordPress template developer can then use to style your navigation menus any way you choose. Check back for part two of this series to see an example of how these menus can be modified visually.

Who will use it?

Although this functionality doesn’t seem particularly groundbreaking, it makes the process of adding pages and organizing content vastly simpler than before. Prior to WordPress 3.0 adding pages and updating navigation menus almost always required a phone call to the developer, which meant additional costs and lost turnaround time. Now website owners of nearly all technical skill levels can easily keep their sites updated and organized, without delay and without sacrificing the look and feel of the navigation.

View a demonstration of the functionality below – I first show the menu with 3 items – then I nest one menu under another through a simple drag and drop and reload the page to show the change.

In my next post, I will discuss the code that the Menus function generates, and show you how to add animation and style changes to it. Thanks for reading!

Does this scenario sound familiar? It’s sometimes hard to believe, but given the rapid speed of Internet growth, the cutting edge technology that companies worked so hard to implement just a few years ago is now outdated and insufficient.  I’ve been working with many companies that are coming to this realization, and an unfortunate trend has appeared. These companies, sadly are completely determined to keep using their 3rd party vendors and service providers.

Services and vendor offerings I am referring to include web hosting, email, e-commerce and payment systems, surveys, content management systems and video and photo services.  Reasons that companies don’t want to change vendors vary – they don’t want to make the effort required to change, they feel entrenched, they’re nervous of possible ramifications, etc.  Although these can sometimes be valid reasons, more often than not this short-sightedness ends up being more expensive, provides customers a sub-par user experience and limits the company in serveral other ways. Read on to learn why.

1. Cost
   Cost is the most straightforward reason to consider a vendor switch. In the last five years, the number of internet service vendors has exploded – which has driven down overall costs. More products are based on open standards and existing frameworks and more are sold as a service and hosted in the cloud. Contrast this to what it took to install something like a shopping cart several years ago – then it was proprietary and customized – at a high cost. Often clients are still paying monthly fees for these outdated services – and drastically overpaying at that. Now they can consider new options and opportunities that improve what they offer their customers, at a much lower cost over the life of the website.
2. Ease of Implementation
   Companies remember the hassles and time required to add that shopping cart or add that video to their site years ago and are hesitant to go through the same ordeal again. The small vendors they selected from limited options years ago took forever to respond and had poor documentation.  However, much has changed – many current providers are bigger with much larger customer bases. They’ve greatly improved the implementation process, with excellent documentation and sample code and robust APIs that give more flexibility for implementations. There are many customers that share sample code and have documented their implementations. Forums and responsive users abound to discuss and help in using the products. Current vendors offer more services that are easier to add and maintain than before, at a reasonable cost.
3. More Available Options
   Today’s established vendors have a more dedicated focus and larger teams working to support their products. They are working to make their products as useful as possible and offer many new features and options. These new features make your website more useful to your own customers.
4. Better Customer Support
   Along with some of the reasons these products are easier to implement is the improved customer support – the vendors are larger or more specialized and have knowledgeable dedicated staff to help your company use their products. And through forums and development websites, more customers are active in the discussions as well – making it much easier to implement the products than in the past.
5. Growth Opportunities
   Finally, the way the product will grow and improve is important to consider. Many of the vendors that have been around for many years have all but given up on keeping their products current. Reasons vary – perhaps their customer base is small and the product isn’t worth upgrading. Perhaps the vendors don’t have the right staff to keep the product current. If your vendor’s offering is the same now as it was five years ago – chances are they aren’t looking for ways to improve their product and your business – switching to a dedicated vendor will better ensure that your website will grow with more and better functionality in the future.

With these reasons in hand, consider your current vendors and if they’re really meeting your needs. If you’re not sure, start researching their competition. Check the services provided and pricing. You may be surprised at what’s possible out of the box now, and how reasonably it can be priced. Good resources, aside from just Googling, include TechCrunch and Mashable.

Let me know your thoughts. Have you found a new vendor that drastically improved your website?

I had the opportunity to tackle this shortcoming for a recent project and you can find a copy of my script below, followed by an explanation of the approach I used. With this script, you’ll be able to set your own color scheme for an embedded Google Calendar. To illustrate, here are some screenshots showing “before” (on the left) and “after” (on the right):

Of course, you can use this script to make your embedded calendar appear any color you like.

Requirements

• PHP 4.3.0 or later
• Support for one of the following JSON libraries:
  • PECL JSON extension (built in to PHP 5.2.0 and higher) or
  • PEAR::Services_JSON package
• Support for one of the following http methods:
  • cURL extension or
  • allow_url_fopen configuration option

Check your phpinfo screen to see if your server meets the requirements — or, if you’re feeling lucky, just cross your fingers and run the script.

Installation and Usage

1. Create your Google Calendar and embed the calendar on your web site using your preferred size and settings. Make sure it appears correctly with the default Google Calendar “skin”.

2. Download the wrapper script (version 2010-05-16) as a ZIP file

3. Unzip the archive to extract the script itself, gcalendar-wrapper.php

4. Edit gcalendar-wrapper.php in a text editor, such as Notepad

5. Customize the following lines at the top of the script according to your needs:

23
24
25
26
27
28
29
30

/**
 * Set your color scheme below
 */
$calColorBgDark      = '#c3d9ff';	// dark background color
$calColorTextOnDark  = '#000000';	// text appearing on top of dark bg color
$calColorBgLight     = '#e8eef7';	// light background color
$calColorTextOnLight = '#000000';	// text appearing on top of light bg color
$calColorBgToday     = '#ffffcc';	// background color for "today" box

You can use a tool like the one at html-color-codes.info to pick your HTML color codes.

6. Upload gcalendar-wrapper.php to your web server

7. On the pages where you display an embedded Google Calendar, change the calendar embedding code to point to gcalendar-wrapper.php instead of http://www.google.com/calendar/embed (or the equivalent URL if you’re using Google Apps for Domains).  For example, if your embedding code currently looks like this:

<iframe src="http://www.google.com/calendar/embed?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

edit the HTML to look like this instead:

<iframe src="gcalendar-wrapper.php?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

8. Browse to your page to test out your customized calendar! If you still see the standard Google Calendar appearance, make sure to clear your browser’s cache and try again.

Limitations

To keep things simple, this script reduces the Google Calendar color scheme to just 5 different colors, even though Google’s original stylesheet uses more shades. In addition, images within the interface (such as the month previous/next arrows and Print icon) can’t be customized and will still appear in their original color (blue).

After creating this solution, I came across a similar skinning effort called MyGoogleCal4 RESTYLEgc that allows more fine-grained control over the calendar appearance.  It takes more legwork to create your own theme, but anyone interested in replacing the calendar graphics or making advanced stylesheet changes should definitely give it a look.

Technical Details

The gcalendar-wrapper.php script works by downloading the embedded Google Calendar source code from Google’s server, modifying CSS styles and JavaScript on the fly, then outputting the customized calendar code to the user’s browser. The Google Calendar embedding code contains a JSON-encoded data structure with information about the calendar events plus external links to a JavaScript library and CSS stylesheet located elsewhere on Google’s servers. For simplicity, this script just inserts new CSS and JavaScript directly into the main embedding code to override the relevant parts of those external files.

To change the color scheme, I started by scraping the stock Google Calendar stylesheet and identifying the minimal set of styles needed to apply new colors. New style rules are generated dynamically based on the color scheme settings to save the hassle of repeatedly copying and pasting color codes in several places. These custom styles are then inserted at the end of the HEAD section of the embedding code with priority set to override the original styles.

Google Calendar’s code makes use of relative links and file references that get thrown off when routed through the wrapper script, so it’s also necessary to make a change to the base URL within the JSON data structure that holds calendar event data. The JSON string first has to be spliced out using a regular expression and converted to a PHP data structure we can manipulate, then serialized back into a JSON string to replace the original data.

Keep in Mind…

The calendar customization script is closely tied to Google Calendar’s underlying stylesheets and JavaScript code.  When Google launches a new version of Google Calendar (as they’ve done in the past when launching new features) this script may need to be updated to reflect Google’s changes.  When that happens, your embedded calendars may revert to the standard Google Calendar appearance or may even show an error message.  Don’t forget to check up on your calendars periodically so you’ll know if Google has made any major changes.  I’ll make an effort to post an updated wrapper script whenever I see that Google has revised its code.

Feel free to respond in the comments below with questions or suggestions. I hope you find the script useful!