Creating Custom Menus in WordPress 3

In my previous post, I outlined how you can add support for the new custom menus that were enabled in WordPress 3. Tonight, I will briefly review the process of creating and organizing those new menus from within your WordPress administration area.
To start with, make sure you’ve activated the theme into which you added the custom menu support. Once you’ve done that, you will see a “Menus” link in the “Appearance” menu on the left sidebar of your administration area. Click on that link and you will see a fresh new screen with a few options on it.
The first thing you want to do is type an identifiable name for your menu into the textbox that says “Enter menu name here.” Once you’ve given it a name, click the “Create Menu” button and your menu will be created.
Next, you’ll want to assign a “theme position” to your new menu. This “theme position” corresponds with the “theme_location” mentioned in the previous article.

Custom Links

Now, you should populate your new menu. You have a few different options as to what you want to put in your menu; and you can even mix and match. If you want to add a custom link (not a specific WordPress page or category archive within your site), you can simply type (or paste) the URL into the “URL” box in the “Custom Links” section and then type whatever you want the text of that link to be in the “Label” box. Click the “Add to Menu” button and you’re done.
For instance, if you wanted one of the menu items to link to Google, you could simply type http://www.google.com/ into the “URL” box and then “Google” in the “Label” box. Once you add the new item to your menu, it should show up on your website as part of the new menu.

WordPress Pages

The next box you’ll see in the middle area (the left side of the main content area) is the “Pages” box. From there, you can simply select whichever WordPress pages you want to be included in the menu (we’ll explain how you can organize them in a bit). You can even search for a page if you can’t find it in the list.
Once you’ve checked off all of the pages you want to add to your menu, you simply click the “Add to Menu” button and they will magically appear on the right side of the page as part of your menu.

WordPress Categories

Finally, you can add links to specific category archives to your menu. For instance, if I wanted to create a custom menu for the various tutorial categories here on HTMLCenter, I could simply select the following items from the list and then click the “Add to Menu” button.

• CSS Tutorials
• Design Tutorials
• General Tutorials
• HTML Tutorials
• Javascript Tutorials
• PHP Tutorials
• Usability Tutorials
• VBScript Tutorials

Once I’ve selected all of those different categories, I simply click the button and they will appear on the right side as part of my menu. Just as with the Pages section, you can search for specific categories if you’re having trouble finding them in the default list.

Organizing Your Menu Items

Organizing your new menu is extremely trivial within the new system. To do so, you can simply click and drag the items around within the menu canvas. You can organize them any way you want, and can even stack them hierarchically if you choose.
One more little feature you’ll notice is the ability to have WordPress automatically add new pages (top-level pages – that is, pages that do not have a parent page – only), you can enable that feature by simply checking a box at the top of the menu canvas.

The Advantage of Developing with Blueprint CSS

Recently I’ve been developing websites using the Bluprint CSS framework. Blueprint itself is not new (it’s a little over a year old), but I hadn’t really committed to using it as a standard for my business until about a month ago.

So What’s the Advantage?

The main advantage to using a css framework is speed. Once you figure out what the framework can do, it speeds up development quite a bit by helping to standardize the web development workflow. Blueprint can be the bridge between design and code.

So often it’s the designer that creates the problems in web development…I know because I am one. A simple stroke of design genius can snowball into a usability nightmare or make HTML/CSS markup a living hell. A grid system like Blueprint gives a designer definite bounds to work within, and puts them on the same page with the CSS developer and information architect.

Now if your designer doesn’t totally screw things up with a stroke of genius, then the guy or gal that marks up the HTML and CSS probably will. They’ll think of ultra clever semantic names that later end up being not so semantic. They’ll invent a new layout system because the last ones they did just weren’t good enough. They’ll probably take whatever whimsical approach seems appropriate for the design that was presented to them.

With Blueprint, the approach is different. A web developer can now layout the basic structure of the page (ie header, columns, footer,etc) using CSS that’s provided by the framework. The best part about this is that it takes thinking out of structural layout. You’ll be surprised at how much time you wasted thinking about what to name things like columns let alone the time it actually took to write the CSS for it. After using Blueprint for layout I wondered why I tortured myself by starting with a blank slate each time I started marking up a site.

If you’re lucky enough to have an information architect in your workflow, then Blueprint is going to be a dream come true. Instead of using an image editor like PhotoShop to make wireframes, the information architect can just use Blueprint to make them. In fact, if your designer is also the IA, then why not have them start there. If you can establish your grid and layout with CSS before design then you will be twice as prepared when you actually get to designing. Plus, there’s the added benefit of being able to reuse the code that the IA started at the CSS phase.

Hopefully, by now, the advantage of using a css framework is obvious. The IA starts the design process with Blueprint, hands the grid system and wireframes to the designer who now has a real template to work from, and then the design and basic grid system gets handed to the CSS developer to put it all together. Blueprint helps to standardize your workflow, and standards speed things up by automating simple tasks.

Jef Croft, one of the guys that helped write Blueprint, wrote:

They’re especially great for those working on tight deadlines and those working in teams (teams wherein multiple people work on the same CSS — they benefit from having a consistent set of coding patterns), and also for those working on several sites of a similar nature (for example, a team working at a news company which runs 20+ newspaper sites).

In my experience Blueprint is the best grid system out there right now. It has the cleanest, most flexible, and most supported code to allow your team to work together. However, any grid system can speed up development and there are a few to choose from: 960, YAML, Grid Designer, YUI Grids CSS. The main point is that if you can standardize on a common way to layout pages then all of your developers will work better together.

You Want More?

Here are some more in depth articles…

• Which CSS Grid Framework Should You Use for Web Design? – A pretty in depth look at CSS Grids and Blueprint
• What’s not to love about CSS frameworks? – A casual and humorous overview.
• Five Simple Steps to designing grid systems – A very in depth look at Grid Systems

…and here are some great tools for Blueprint CSS…

• Blueprint Grid CSS Generator – This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.
• Grid – Grid is a highly configurable JavaScript bookmarklet which overlays a layout grid on any web-site you wish
• Photoshop GridMaker Script – Creates guides in Photoshop for css grids.

Free Smilies for Your Wordpress Blog – SquareSmilies

I’ve been kind of a dick lately ranting in the last few posts so decided I should be nicer. Here are somefree smilies for your wordpress blogs (or what ever you want to use them for). These are fun to make! Learn how to make and install them here.

Download SquareSmilies in zip format:
Square Smilies (76)

icon	text	text	full text	icon	full text
	:)	:-)	:smile:		:lol:
	:D	:-D	:grin:		:oops:
	:(	:-(	:sad:		:cry:
	:o	:-o	:eek:		:evil:
	8O	8-O	:shock:		:twisted:
	:?	:-?	:???:		:roll:
	8)	8-)	:cool:		:!:
	:x	:-x	:mad:		:?:
	:P	:-P	:razz:		:idea:
	:|	:-|	:neutral:		:arrow:
	;)	;-)	:wink:		:mrgreen:

Three Free Browser Compatibility Screenshot Tools

I was in need of doing some browser testing tonight and I thought I’d share the free sites that can be used for checking your web designs across multiple browsers and platforms.

browsershots.org
This is definitely the coolest free browser testing tool. There are lots of browsers and platforms (mostly Unix based) to choose from and the service is fast. If you need to check on alot of browsers at once then this is the place to go. It’s also open source in case you want to start your own browser testing network.

browsrcamp.com
Need to see how your site looks on Safari? You can test it out here.

ipinfo.info/netrenderer/
And this one will show you how your website looks in different versions of IE. It has a cool mixed and difference feature that will overlay IE 6 and IE 7 on top of each other. This one doesn’t make an image of the entire page like the two previous ones do.

That’s all of the free ones that I know about.

PHP Mail Scripts using SMTP transport, a guide for beginners

PHP has a very simple mail function which is used very often for basic text mail messages. What if you need to attach files or if you need to send your e-mail messages via SMTP? Than it’s time to use a more advanced script. This is because the standard mail function has only limited standard capabilities. There are many reasons to use SMTP transport for sending e-mail messages from your web application, some of them are:

• Many shared hosting providers doesn’t allow to use the PHP mail() function for security reasons
• Your web application is more flexible if you use the Simple Message Transfer Protocol (SMTP). This way your e-mail function is not limited to the servers port or e-mail configuration anymore.
• SMTP is much more powerful and secure (using SSL)

In this article we will compare three of the bigger PHP projects which allow to send e-mail messages via SMTP, including attachments.

1. The Mail class included in the Zend Framework (http://framework.zend.com/)
2. Swift Mailer (http://swiftmailer.org/)
3. PHPMailer (http://phpmailer.worxware.com)

We reviewed these three PHP classes because they’re written for PHP5 and they are updated frequently. For our review we tried the provided examples and the documentation. We’re sure that all three classes are very powerful and offer many functions for almost every type of web application. Because this review should help the beginning PHP developer, this article is sho-case for a few functions only.

Our test case for this review

For our example we tested all three classes to send a plain text mail message with a single image attachment, using SMTP transport with authentication. Here is the good news; as a more experienced PHP user, I was able to use the provided examples within several minutes for each of the classes.

Zend Mail Class

ini_set('include_path', '.:/path2directory/ZendFramework/library/');
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Mail');
Zend_Loader::loadClass('Zend_Mail_Transport_Smtp');
 
$config = array('auth' => 'login', 
              'username' => 'smtpUser',
              'password' => 'smtpPassword');
 
$transport = new Zend_Mail_Transport_Smtp('smtp.server.com', $config);
$mail = new Zend_Mail();
$at = $mail->createAttachment(file_get_contents('path/logo.png'));
$at->filename = 'logo.png';                                  
$mail->setBodyText('This is the text inside the mail send by Zend_Mail using SMTP transport.');
$mail->setFrom('you@mail.com', 'Your Name');
$mail->addTo('contact@mailservice.us', 'Your friend');
$mail->setSubject('Mail Subject');
$mail->send($transport);

I don’t like the documentation from the Zend framework, you need to check many pages to get all the required code for the snippet above. You need to create a second object to send your message via SMTP. I’m missing the information on their site about how-to test the “send” function to create use a success or error message. Using the class is not very difficult, but installing the Zend Framework might be a hard job for the beginner. This class is a great solution for people already using the Zend Framework or where the the library is provided by the hosting provider.

Swift Mailer

require_once 'Swift/lib/swift_required.php';
 
$transport = Swift_SmtpTransport::newInstance('smtp.server.com', 25)
  ->setUsername('smtpUser')
  ->setPassword('smtpPassword');
 
$mailer = Swift_Mailer::newInstance($transport);
$message = Swift_Message::newInstance('Wonderful Subject')
  ->setFrom(array('you@mail.com' => 'Your Name'))
  ->setTo(array('contact@mailservice.us' => 'Your friend'))
  ->setBody('This is the text of the mail send by Swift using SMTP transport.');
$attachment = Swift_Attachment::newInstance(file_get_contents('path/logo.png'), 'logo.png');  
$message->attach($attachment);
$numSent = $mailer->send($message);
printf("Sent %d messages\n", $numSent);

The snippet looks similar to the code from the Zend mail class, but you have to create 4 different objects:

1. An object for the SMTP transport (Swift_SmtpTransport)
2. The object that will send the message (Swift_Mailer)
3. The message object for all mail parts (Swift_Message)
4. An object for the attachment (Swift_Attachment)

The configuration/installation is much easier than for the Zend Framework, just include one single file and you’re ready to use the class. If you like this OOP (Object Oriented Programming) style used in this class, this script might be for you.

PHPMailer

require_once 'PHPMailer5/class.phpmailer.php';
 
$mail = new PHPMailer();
$mail->IsSMTP(); 
$mail->Host = 'smtp.server.com';
$mail->Port = 25;
$mail->SMTPAuth = true;
$mail->Username = 'smtpUser';
$mail->Password = 'smtpPassword';
$mail->SetFrom('you@mail.com', 'Your Name');
$mail->AddAddress('contact@mailservice.us', 'Your friend');
$mail->Subject = 'PHPMailer Message';
$mail->Body = 'This e-mail is sent through PHPMailer.';
$mail->AddAttachment('path/logo.png', 'logo.png');
if(!$mail->Send()) {
  echo 'Mailer error: '.$mail->ErrorInfo;
} else {
  echo 'Message has been sent.';
}

The coding style from this example looks very different from the two others and some PHP developer would say this is not really OOP code. Right PHPMailer doesn’t have one file for each method and for the example above you need to upload only two files. I like the PHPMailer class because of all the information you get on the project’s website.