I suggest you pick up this book if you’re new to Wordpress or if you’ve been using it for a while. Chris is great at explaining how web-related concepts work at CSS Tricks. He joins Jeff Star in this project, and the professionalism in the product is stunning.

Features

Listed on the book’s site are the following features:

• How to get things set up right
• Building themes and how they work
• Keeping sites secure and optimized
• Using WordPress as a CMS
• Integrate things like Twitter and Delicious
• Making the most out of WordPress

Peek Inside!

From CSS Tricks, Chris offers a peek inside the book. I really like how much color and engaging images they’ve included. This is a welcome change from all the black-and-white instructional books I know you’re used to.

Buy the Book

You can buy the PDF now and get the print version at a discount later. You will also have access to updated versions via a download link in your email when they’re released. Free upgrades for life are always awesome.

So go on over and pick up Digging into Wordpress now!

Page Division Benefits for Visitors to Your Web Site

This is great news for both sides of the SEO table. The search engine user can click directly to the desired information instead of wandering around the page once they’re directed to a site by the SERP. The old way was sort of like getting directions to a house party that left you at the entrance of a neighborhood. This new way leads you to the right driveway.

Page Division Benefits for Web Developers

For the web professional, proper SEO techniques will allow you more granularity and specificity in your SERP presence. A few choice placements of the correct anchor tags (and possibly usage of the obligatory ID tags) can net great returns and more ‘good’ traffic to your sites. When I say ‘good’ traffic, I mean people who won’t end up in the bounced column in your analytics.

For a more in-depth look at how the new algorithm works, please jump over to Site Booster’s article entitled New Strategy to Increase Search Engine Visibility.

What Comes Next?

I’m more interested in if IDs will be included in the Google SERPs. I’d rather give IDs double duty than have to insert <a> tags into my code. Most well-written pages employ header tags, <h1> and so on.

The example Google gives on their blog uses:

<a id=”HDL” name=”HDL”>

Now I’m not sure if the Google algorithm is triggering on the anchor name or the ID. Big points to the big G if they use both. I’m using different methods in different areas of this article to see how things turn out.

Your Turn

Let me know what you’re thinking about this new avenue of Search Engine Optimization and how you plan to implement it. I’d love to hear your ideas in the comments.

Competition breeds innovation, proof that capitalism works.

This week, Google released their new sandbox search engine, nicknamed ‘Caffeine’. In my initial tests, it seems Caffeine results are focused more on articles and web pages, not video or news results. Youtube and news items are typically still on the first page, but they are further down instead of always sticking to the top.

It seems you can’t saturate your Youtube video description with keywords anymore. Content is king.

I have had pretty good results on SERPs by using the Wordpress platform, which in cooperation with the All-In-One SEO plugin, makes META info maintenance a breeze. You have control of each page’s data, as well as the overall site’s META keywords and description. And well, content is king. Write a good article and you should see good results.

My best performing article here at Mesmer Lab is about how I add custom fonts to my Wordpress installation. I wanted an easy solution for having a unique look, but flexible enough to only require regular text, not opening Photoshop every time I need a new header image.

So to that end, when you search for ‘add custom font wordpress’ right now you’ll find the following results:

• Google (current): http://tr.im/wi30
• Google Sandbox: http://tr.im/wi2Q
• Bing: http://tr.im/wi53

First off, let me explain how good tr.im is as a URL shortener. Create an account with them and you can track clicks. That alone should give you enough incentive to use them exclusively. Add that they use unique URLs and you’ll never use another URL shortener again.

Now there are some interesting differences here. The current Google SERP has my article at #4, including an indented link for a related article on my site. Indented results are a function of Google’s algorithm and are typically seen as having more authority. I was pretty jazzed when I noticed I had one.

The Caffeine SERP shows the same article at #3, pushing ahead of the result from Digg. Hmm, what does that mean? Google is giving less weight to bookmarking sites? I never really got into Digg, but I use Del.icio.us pretty regularly. And although I see their merit, I’d rather find actual articles in my SERPs rather than a middleman.

And well, Microsoft hates my site it seems. Where’s Mesmer Lab on Bing? Not sure. I went through the first 10 pages and couldn’t find a trace. I gave up digging deeper into the SERP pages when I started seeing results that weren’t even related to Wordpress or fonts.

So what does this mean to you? Well if you’re a typical web user you should start seeing more direct links rather than having to click through a bookmark aggregator. Less clicks, less bandwidth, more efficiency. If you’re a web developer, your SEO prowess should shine through much easier. Using Caffeine could possibly give your expertise a 10% boost in authority. Content writers should also see similar results. Just keep writing good content and your analytics and AdSense results should validate your worth.

The people over at Facesaerch have developed a side-by-side comparison of the current Google engine and Caffeine. Test it out at http://www.facesaerch.com/caffeine/.

This tutorial will guide you through the steps to create a new email template in Magento. Specifically, you’ll create the email that your visitors will receive when they sign up for your newsletter.

Requirements

• Access to your website’s Magento admin panel
• A little knowledge of how HTML emails work
• This tutorial

Step One: Create the Template

I said you need to know a little about how to create an HTML email, but since Magento comes with many templates you can kind of get away without the knowledge at first.

• Log into your admin panel and navigate to System > Transactional Emails.
• Click the ‘Add New Template’ button on the top right.
• Choose one of the default templates from the first drop down box.

In this tutorial we’ll be using the ‘Newsletter subscription confirmation’ template. This would typically be the first email your visitors would receive so I figured it would be a good choice. Choose the locale of course, then click the ‘Load Template’ button.

This will load the appropriate template which in this example is located in the /app/code/locale/en_US/template/email/ directory. The filename is ‘account_new_confirmation.html’. As you can see, it is very easy to alter the templates for international support. You can leave most of the template as they have presented it. I’ve changed the email addresses, the phone number, the store name and the source URL for the logo.

Back in the admin panel, give your template a name. To keep things simple, I’ve used ‘Newsletter Subscription Confirmation’ for the name and the subject. Now here’s where you can modify the template to suit your specific needs. One of the key features of Magento is the ability to have multiple stores within one installation. Therefore you can load the same template in the first half of this step, then modify it for each store in the second half.

Click the ‘Save Template’ button on the top right and you’ll see your new template in the list of Transactional Emails. Now lets move on to implementing it into your site.

Step Two: Using Your Template

From the top horizontal menu, navigate to System > Configuration.

Scroll down to the Customers section on the left menu and select Newsletter.

In the drop down box for Confirmation Email Template, choose the new template you just created. The option just above it should be set to Customer Support. Click the ‘Save Config’ button on the top right and you’re done.

Step Three: Testing Your Template

Now navigate to the public version of your site to the Newsletter box.

Type in your email and click ‘Subscribe’. Sync your email client and you should see a new email from ‘[Site Name] – Customer Support’ with the subject of ‘Newsletter subscription confirmation’.

Check all the text, make sure the logo shows up and the email addresses and phone number is correct. Make any changes back in the admin at System > Transactional Emails (second image in step one).

Conclusion

Magento Commerce, the open source ecommerce solution, can be very intimidating to those of us coming from Wordpress. Its configuration options are very intricate, allowing you to customize designs, layouts and almost every other piece of the site on a per-page basis. Hopefully I’ve shared some useful knowledge on how to create a new email template in Magento.

Make sure you test your emails extensively. They are acting as your host/hostess, concierge and valet. You want them to be as professional as possible. No typos, easily readable text, and please, be sure to quadruple check your email address and phone number.

A key nugget to remember about HTML emails is you have to put your CSS styling inline. You can’t reference an external CSS file or even have it in the HEAD. All HTML emails are contained within the BODY tag. Also, don’t even try using DIVs for your layout. Go old school. Bring out the TABLE tag and party like its 1999. Just look at the example templates they have to get a feel of what is or isn’t acceptable. If there’s enough interest, I’ll write a post on my experience with HTML emails.

I will be adding more quick tutorials like this for Magento as I wade through their user guide and forum. Please feel free to comment or ask a question in the form below.

The goal is to get rid of the generic-looking display of each article’s date. The visitor to most sites would want to know when the article is written to see how relevant the ideas, data or techniques are. A bold display of the date lets the user quickly scan and find the publish date.

Step One: The Image

For quickness, you can download the png file I’m using here, download the full source file at Graphic River, or build your own. Just make note of the dimensions since we’ll be using it as a background image.

You can use most anything as a date icon. Common metaphors include a calendar like I’m using or the piece of paper that Web Designer Wall uses.

Step Two: The WordPress Code

We have to create a few new elements to house the date code. This will take the place of the stock date implementation so we can put or own spin on the look and feel. The following is how I’ve done it here at Mesmer Lab. I’ve modified the code in the Main Index Template (index.php).

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<div class="post">

<p class="date">
     <?php the_time('M'); ?>
     <span><?php the_time('d'); ?></span>
</p>

{your post code goes here}

</div>

<?php endwhile ?>

I’ve created a DIV with the ‘post’ class inside the loop. There’s a tiny bit of CSS applied to this div and I’ll explain it in a few minutes.

I’ve used a paragraph element for the main container. The paragraph seemed to work better than a typical DIV, in regards to ease of modification and cross-browser compatibility. This is where I put the month for the article.

The span element works perfectly inside the paragraph tag, simply because I added the ‘display:block’ designation. It seemed to play along better instead of a DIV. The numerical date (with leading zero) resides here.

Step Three: The WordPress CSS

.post {
position:relative;
}

The wrapping DIV is set to position relatively. This allows absolute positioning inside for the paragraph element. If you don’t do this, all the dates on the home page will be on top of each other. Don’t just copy and paste this code into your theme files. If you’re not using my specific image, your results will not look right.

.date {
background:transparent url('your-image.png');
position:absolute;
left:-80px;
top:8px;
color:#fff;
width:56px;
height:61px;
padding:14px 0 0 18px;
font:bold 12px Arial;
}

Next you’ll need to link the image to the paragraph and position it absolutely inside the div.post element. The padding and width/height are tied together in the box model. You’ll have to adjust the width and height depending on how much padding you need for the text to show up properly. Typical font styling is present.

.date span {
display:block;
width:100%;
text-align:center;
margin-left:-7px;
margin-top:1px;
line-height:26px;
color:#000;
font: italic bold 24px Georgia,"Times New Roman",Times,serif;
}

To push the numerical date on a second line, I’ve employed ‘display:block’. Span by nature displays its contents inline. The margin code is for simple positioning. The line-height is so IE will display the whole number. And we round it out with typical font styling.

Step Four: Adding to Single Posts

The next step is relatively easy. Open the Single Post (single.php) file and repeat the code you used in Step Two. This goes in the same place, so it should be easy for you to find.

Conclusion

Customization will make your Wordpress site unique. You can add a sense of branding by efficient use of colors, icons or other visual elements. By adding a custom date graphic to your Wordpress site, you are on your way to standing out in the crowd.

I hope you enjoyed this tutorial. Comments, suggestions and how you’ve implemented this on your site are welcome.

Usability is key. You can have the best information and product, but if there’s a problem with catching your visitors’ attention on how they can benefit, then you need to rethink your design. David describes how your wording, the positioning of your call to action links, and even the size, will help you convert your visitors into users.

You’ll create two images, throw a little CSS code in the mix, and end up with a very flexible system that will grow with almost anything you throw at it. You can use the already present colors to help your lists tie in with the design. I’ve used this on a project and the client really liked how it turned out. So continue reading and I’ll guide you step by step on how to add this customization to your toolbelt. Your clients will love you for it.

View the demo.

Step One: Create Two Images

Open up your image editor of choice and create a new file 16px wide by 100px tall, or however tall you think a single list item will be in your situation.

You can get a little creative with it, but I drew a simple 1px line. Setting the background transparent will keep your images future-proof if you ever want to change the background color of the site.

So you will end up with two images, one relatively tall with the horizontal bar at the top and another relatively square with the horizontal part ending where it meets the vertical.

Step Two: Write the CSS Code

Now open up your code editor of choice. I’ve used Dreamweaver forever, but I’m starting to use Notepad++ more often.

Clear All Inherent Styling

The first part of the CSS code is extremely important because Internet Explorer still has the majority of the browser share. It is good practice to have a reset file like this one. If you’re not going to use a reset.css file, you must clear the layout of your list.

ul {margin:0;padding:0;}

Create The Menu Container

This is optional, in case you already have a home for your menu. But all subsequent code assumes that the ’submenu’ class is applied to your list’s parent.

.submenu {
	width: 200px;
	border: 1px solid #555;
	font: normal bold 12px Verdana, Arial, sans-serif;
	padding:10px;
	color: #3877C4;
	}

UL Code

This code will format the unordered list. Add a little top and bottom padding for spacing. The left padding offsets the list from the header text.

.submenu ul {
	padding:10px 0 10px 20px;
	}

LI Code

The first line puts in a little breathing room if/when your text expands into multiple lines. Setting the ‘list-style-type’ to none gets rid of the stock icon. To end up, we apply a little bottom padding for visual goodness.

.submenu li {
	line-height:15px;
	list-style-type:none;
	padding:0 0 8px 0;
	}

Second Tier UL Code

We are now into the second level of the menu. A little top padding pushes this UL down from its LI parent. The left padding indents the UL and can be modified to your taste.

.submenu li ul {
	padding: 5px 0 0 18px;
	}

Second Tier LI Code

Now we’re into the good stuff. Most of your second tier list items will use this piece of code. Make sure you use the correct path to your image file. This is the tall graphic I had you create earlier. Of course we don’t want it to repeat. And the left padding pushes your LI text over so we can see your shiny new image.

.submenu li ul li {
	background-image:url(ul-long.gif);
	background-repeat:no-repeat;
	padding-left:18px;
	}

Second Tier LI Code – Last LI

So up until this point we have only used a single class, the one applied to the container. To be compatible with all browsers we must employ a class to put the endcap on the list. Now we use the smaller graphic of course. We reset the bottom padding to zero because the second tier UL code does this already.

.submenu li ul li.end {
	background-image:url(ul-end.gif);
	padding-bottom:0;
	}

Second Tier LI Code – :last-child

This code is not suggested for deployment. This is only for demonstration purposes.

So as you might know, Internet Explorer likes to employ its own dialect of CSS. One piece of very useful code that is missing in all IE flavors is the :last-child pseudo class. To be fair, :first-child works fine. When not in demonstration mode with three different menus you’ll want to use the code below. To facilitate the demo of :last-child alongside two other menus I have dropped a ‘lastchild’ class on the second tier UL on the demo page, third box.

Open the page in Firefox, Chrome and Safari. You’ll see no difference in the far right menu. Open in IE and you’ll get the standard LI code with the tall graphic on the last LI. Maybe they’ll add it in IE 8.1?

.submenu li ul li:last-child {
	background-image:url(ul-end.gif);
	padding-bottom:0;
	}

View the demo.

Final Thoughts

Try out some of these ideas to spruce up my simple design.

• Arrow on the right side of the images
• Curve the vertical line into the horizontal line
• Use an animated gif to make your list more dynamic
• Use a single sprite instead of two images.

If you’re going to use alpha transparency in your image, you’ll want to save as a PNG-24. Doing this will skew your colors slightly in Internet Explorer. This is because of the gamma correction saved in the image. Every browser except IE disregards the gamma value. I’ll show you how to correct this in an upcoming article.

Let me know how you liked this tutorial. Any comments and suggestions are welcome.