First off, I’ll just say that today list management goes hand-in-hand with sending newsletters. If you’re a busy person, you don’t need to be managing a mailing list in one place and sending newsletters from another.  I’ve spent much time recently migrating lists from email address books and contact management programs to online emailing services, so this article is written from that perspective and after much experimenting and experience with a number of the most popular email marketing services, I’ve decided to stick with MailChimp for the time being, since they currently offer the most options for the least money (not to mention great customer service).

E-news scenario

A typical fan/member mailing and list management scenario :

• visitors sign up for your mailing list directly on your website
• they are welcomed with a confirmation email (an “opt in”) and can subscribe/unsubscribe themselves at any time
• you visit the online service to send a newsletter, manage your mailing list and view the statistics on your mailings

While many sites (Bandwagon, ReverbNation, SonicBids, Marcato) offer some flavor of these functions, along with a slew of other artist services, I personally prefer a service that specializes in email marketing as the former tend to have limited, often quite generic options; I’m a fan of using the most customizable tools possible, which usually means a tool that is dedicated to a particular function. As a developer of websites my approach is all about my clients having as much ease-of-use and control as possible over their own content and the functionality of their site (most of the client sites I create are for musicians or cultural organizations). I also don’t want to spend my time supporting (sometimes) hard-to-understand tools at these various services when it is so easy for them to create their newsletter just like they create a Post or Page in WordPress.

So why can’t I just send from my own email program?

In an nutshell : because of spam. The bad guys have forced the server who hosts your email to add aggressive filters to prevent you from being overwhelmed with offers for questionable products. If you send a mailing from any email program to a large list, you risk being identified as a spammer. And if your email address reply-to contains your domain name (i.e. you@yourdomain.com), your domain could be blocked, meaning that emails from that domain would not be accepted, period! If a lot of your fans have common email domain addresses like hotmail.com, this could mean that nobody at that domain would receive your email and you’d be in the difficult position of trying to get un-blacklisted by those servers.

A mailing service essentially “authenticates” your message; proof of your identity is furnished via the message’s “header” (details about where it is coming from) as well as using other techniques like “keys” (unique identifiers that can’t easily be spoofed by a spammer). To comply with current laws, a good newsletter also contains a snail-mail address, an unsubscribe link and information about how the recipient got on the list.

If you really want to know more, you can read about CAN-SPAM email regulations here : http://business.ftc.gov/documents/bus61-can-spam-act-compliance-guide-business.

Mailing service features

Most of the popular emailing services offer :

• a limited number of free subscribers to your list (varies widely)
• choice of free or custom templates
• HTML and text-only versions of the mailing
• signup form code you can embed in your website
• analytics detailing new subscribers, unsubscribes, clicks on links in your email
• detailed list management (add, remove subscribers manually or via file import)
• ability to create custom fields and segment lists (options, “how you found us”, etc.)

Some services additionally offer :

• ability to import a newsletter from a URL (template on your website)
• rss-to-email (people sign up for your RSS feed which is delivered as email)
• social network integration (simultaneous send to Facebook, Twitter, etc.)
• identification of subscribers’ social network affiliations
• scheduled sends
• API (application programming interface), special code or “hooks” that can be used to display or interact with your account and its data

Doing it my way

My approach to e-news is to use a page in the website (for my clients, usually WordPress, but any site offering backend access to code will work). The page uses a specially designed “template” (HTML coded layout) that is optimized for display in common email programs (width, fonts, etc.). The sender adds a message and any photos to the page and then pastes the URL (web address) of that page into MailChimp, who imports (amazingly!) everything on that page and voilà, a ready-to-send-out newsletter!

One of the coolest things about doing it this way is that the custom template can also include basically anything that your WordPress site can generate, like recent posts, gigs and other site content. Sometimes we even create two different “newsletter” templates : a more complex one for monthly mailings and a smaller, simpler one for newsflashes. Just give each template a different name (Newsletter, Flash) and select the appropriate model from the Page Attributes dropdown list of custom templates. If you need to keep an archive of your newsletters (which won’t happen if you re-use the same page all the time), you’ll need to create a “newsletter” category and write a new post (instead of a Page) every time you do a mailing; then your template will be a single Post template rather than a page template (ex. single-newsletter.php).

You can make sure your newsletter uses that template by creating a custom single.php that looks something like this :

<?php
$post = $wp_query->post;
if ( in_category('newsletter') ) {
include(TEMPLATEPATH . '/single-newsletter.php');
} else {
include(TEMPLATEPATH . '/single-default.php');
}
?>

In addition to these types of newsletters, MailChimp lets you import content from a custom RSS (XML) template just like the aforementioned Page or Post templates. The “feed” will automatically be sent out as email (RSS-to-email) on a scheduled basis – people receiving it won’t even know that they’re actually reading an RSS feed. This is an especially nice feature for those who post often and thus have a steady stream of content to share. One of my clients, a not-for-profit, sends their montly newsletter out this way; it is configured to grab the latest five posts from the site and send them on the first of the month. Talk about streamlined! No more cutting and pasting and duplicating existing content… It’s not too hard to create an XML template – copy the default WordPress rss.php template into your theme, mess around with it and do some tests. The only caveat is that if your content doesn’t change between tests, you can run into some confusing caching issues on MailChimp. I had to do a bit of hit-or-miss sending to perfect this, including changing publish dates in WordPress and making some tiny edits to get it all right before activating the schedule but all went smoothly after that. Stand by for a more detailed post on creating custom RSS templates and in the meantime, see XML/RSS resources below for more info on this.

Of all the services I’ve used, I love MailChimp best and their price, analytics and social network features can’t be beat. A close second is Campaign Monitor, who are actually in a way responsible for my “inventing” the MailChimp/WordPress system… because Campaign Monitor also lets you paste in a web URL (i.e. the newsletter page in WordPress) and then magically brings all the CSS inline (into the template) even if you are using an external stylesheet, which MailChimp does not currently do (although they say they are looking into it). I also use Campaign Monitor regularly for certain clients who also use more traditional email templates (that live on the Campaign Monitor site) as I like their simple, clean and easy-to-understand interface a lot.

Visit a sample newsletter here to see what it looks like on the web. You can view, copy and paste the source code if you want to try it out yourself. Note that the MailChimp “unsubscribe” and other proprietary tags aren’t filled in with the recipient’s email address, etc. until they are viewing the newsletter in their own email inbox.

Resources

• http://business.ftc.gov/documents/bus61-can-spam-act-compliance-guide-business
• http://mailchimp.com/resources/guides/spam-lawsuits/
• http://vizou.com/hotflash (Vizou sample newsletter template)
• http://crapo.qc.ca (another sample newsletter)
• http://www.wprecipes.com/creating-user-defined-rss-feeds-in-wordpress
• http://emailuniverse.com/ezine-tips/?id=788
• http://mailchimp.com
• http://campaignmonitor.com
• http://graphicmail.com
• http://verticalresponse.com
• http://mymailout.com (formerly Groupie Corral)

An abridged version of this article was  published in the 2011-12 winter edition of Local 1000 (American Federation of Musicians folk branch) newsletter “New Deal”.

Over the years I’ve installed and tried out countless CMS, CRM and similar applications, usually open source.  In the end, I’ve usually come back to WordPress  for a whole variety of reasons, the biggest being my need for multi-linguality and client ease-of-use.

I am still learning Expression Engine which I like very much but for me, the tradeoff between these two is that overall I find WordPress easier to understand both in the backend and from a theme design standpoint. While Expression Engine is more structure-focused and granular, I feel that it is not as intuitive when building a site. I also DO NOT like having to work directly in the backend for theme design as I have a great Coda- CSSEdit workflow that is not easily made compatible with Expression Engine’s  built-in process. If they could fix that, I’d be using it more often.

I’ve also been doing themes lately for online services like Shopify, which has a very impressive theming setup BUT the problem that everything is stored across worldwide servers so caching is a big problem for using my own workflow. It’s very frustrating to try to edit CSS with CSSEdit in realtime when the page is continually served up by a different server (the stylesheet overrides stop working from one minute to another).

And of course, you must know about the wonderful http://php.opensourcecms.com site where you can read about and try hundreds of apps! It’s almost like going shopping!

Top picks

• WordPress
  Open source, free. My favorite choice by far (and now pretty much the most popular everywhere). Easy to install and update, multi-lingual (important for me working in Québec), tons of plugins available in both languages, the client easily gets how to use it, uses the wonderful jQuery by default. Depending on client needs, can be too plugin dependent (but as I learn to code better, I reduce that dependency); sometimes targeted by hackers because it’s popular and in widespread use).
• Expression Engine
  Annual fee to keep it up-to-date and have support access (but this is NOT the reason I prefer WordPress at the moment). Based on the wonderful, free CodeIgniter PHP development framework. Super well-designed app, great admin interface, structure-focused and granular. Ideal for complexe sites, excellent security features, easy to customize for the client, a lot less finag. Not as easy to learn as WordPress . Not super-compatible with my own Coda/CSSEdit workflow.

Notable

I’m not going to go into depth on all of these but I’ve made a few notes here and there and these are the apps I felt deserved to be at least mentioned.

• ModX
  I started really getting into CMS with this app. It is a bit more like Expression Engine in the admin interface but wasn’t too difficult to use. I just fell in love with WordPress and stopped using it…
• Joomla
  Very popular, very widespread use, lots of nice features… but not the easiest setup and.
• Drupal
  Ditto. For me, both of these last two were a bit “PC versus Mac” with regard to installation and comprehension of the theming systems. Since I didn’t end up using them extensively, I don’t want to make further comments as I’m not qualified!
• Gelato
  The original system that gave birth to Tumblr. Very simple, easy to install and a neat little blog engine.
• FrogCMS
  Very nice, clean, uncomplicated system. Didn’t have a lot of add-ons at the time I tested it but might be a nice option for some folks.
• Elgg
  Calling itself a “social networking engine, it is focused on community and education. All the bells and whistles, didn’t have any problems installing or testing. Might be overkill for smaller organizations.
• Pligg
  The original system behind Digg.com. Designed around community blogging and promoting posts to the front page.
• Concrete5
  Very nice CMS that seems to be gaining in popularity, active development and add-ons.
• SilverStripe
  Another fast-evolving, well-designed CMS that seems to be taking on Expression Engine-type frameworks.
• Omeka
  A CMS for museums and collections. I didn’t have trouble setting it up but I think it might be a little confusing for the uninitiated.
• Pixie
  Simple and friendly, more suited to traditional sites than blog format.
• GetSimple
  Currently testing this and liking it! Simple (as the name indicates), no database required so a good option for those without access to that on their server.

Also worth a mention

I don’t claim to have put them through all their paces; but the ended up on my list of decent or promising options.

• EggCMS
• LilCMS
• Exponent
• E107
• Chyrp
• Plume

So many apps, so little time…

I’ve also tested wikis, media gallery apps, ecommerce apps, RSS aggregators, project management apps and mailing list managers… but I’ll save those for additional posts!

Click on the image to see a demo. The demo is in my own site and is a slightly adapted version (different height, content; doesn’t really go with my site!) than on the client site as their site is not yet live.

Objective

My goal was to have a “featured” area on the home page where weekly specials would be displayed in a continuous horizontal slider, each one a Post in a category titled “featured”. Only the last 3 items would be displayed.

Ingredients

These are the files you’ll need to either create or edit.

js folder (create it in your theme folder; although it could be elsewhere)
easySlider.js (download and put it in the js folder)
slider.php (create this document in your theme folder)
index.php (or whatever page you want to display the slider on)
header.php (in your theme)
style.css (in your theme)

Instructions

Before I start, I want to mention that I’m first and foremost a designer and my years of scanning things that are neatly lined up to the left prevents me from being able to efficiently read (or write) indented code. I’ve tried and tried, but it just doesn’t work for me, so my apologies to you hard-boiled coders! So, here’s what to do if you’re trying to do this kind of implementation :

1. Download the slider code from CSSGlobe at http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

2. Creat a folder called js in your client WordPress theme and copy easyslider.js into it. I took the version number off of the script title because I wanted to be able to easily update it without changing the link in the WP header to reflect the newer version.

3. Open header.php in your theme (or create a custom header if this is just for use on one page) and add the following just before wp_head (after your stylesheet and RSS links). This is really, really important to getting it working in WordPress as this code makes sure that WordPress’s jQuery is queued up for use by the javascript function we’re about to add. This way, we don’t have to add ANOTHER link to ANOTHER instance of jQuery (which you would need to link to if your site didn’t already have it activated). I also discovered that WordPress includes the latest, streamlined version of jQuery and uses what is referred to as “no-conflict” mode so that (hopefully) it won’t clash with plugins that try to use a different version. Or something like that. Google it.

<?php wp_enqueue_script("jquery"); ?>

Then comes…

<?php wp_head(); ?>

Followed by the link to the plugin. Please note that I used the full path to avoid additional queries being made by WordPress template tags, but you could do it that way (i.e blog_url and template_url). And notice that the only link is to the easySlider script; I’ve left off the link to jQuery which Alen includes in his instructions (which are not for installation on WordPress)  :

<script type="text/javascript" src="http://yourdomain.com/wp-content/themes/yourtheme/js/easySlider.js"></script>

Note that the easySlider instructions tell us to use the following code  following the link to the script :

<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true,
controlsFade: false
});
});
</script>

But this wasn’t working for me, so I went looking for the answer. A comment from reader Otto (no link given, but THANKS, Otto!) in response to this fantastic article by Chris Coyier in the CSS-Tricks forum about properly loading jQuery suggested employing this different structure, which is what I did, and it worked like a charm! Apparently it prevents conflict with certain plugins that use the $ variable.

jQuery(document).ready(function($){
// your $ code here
});
So here's what I did  after reading that :

<script type="text/javascript">
jQuery(document).ready(function($){
$("#slider").easySlider({
continuous: true,
controlsFade: false
});
});
</script>

The easySlider plugin has a ton of options, including automatic scrolling, continuous (endless carousel), option to fade out next/previous controls when they’re not useful, numeric slide navigation and more. I opted for continuous and didn’t want the disappearing controls since I created a design that lets users click on arrows to go forward or backward (or just forward or backward, endlessly!).

4. Visually speaking, in my client’s theme the slider is positioned across the top of two righthand sidebars, so I had to mess with the original CSS to adjust to a different width as well as a li containing more than a simple image of exactly the right size! I added it to the appropriate template in their theme with this :

<?php include(TEMPLATEPATH."/slider.php");?>

5. The CSS is without a doubt the hardest part of all this. A tip I can offer is that you need to understand up front that Alen has configured the javascript to handle layout and navigation using unordered lists (ul, li) so EACH SLIDE is a single li. This is easy if your list item will always be a single image or a few lines of text. I couldn’t do it the easy way, of course; I wanted each li to be a complete post with a link to the post. I started out by trying to do this using the handy Simple Image Grabber plugin and the_excerpt and got frustrated by problems with the math that manages the “continuous” option. It didn’t like my floating two line items next to each other to fill the (actually double) space in a single “slide”. Finally, I opted for a WP query that grabbed 6 posts from the appropriate category and put the entire content, including image, into a single line item as intended. If I was any good at javascript I’d probably figure out how to change the selectors and customize the easySlider script but I’d already spent an entire day trying to get this working, so I’ll leave that ’til another day!

Here’s what the CSS looks like for the demo version here on my site (you’ll likely be messing with the #slider li width and height and the padding around the post text). The text for the buttons (which I’ve included in the demo but not in my client’s site) is in the easySlider.js itself.

#featured {
width: 450px;
height: 290px;
background: #fff url(images/featured.jpg) no-repeat -8px -12px;
border: 1px solid #ccc;
overflow: hidden;
margin-top: 10px;
}

#slider {
}

#slider img {
float: left;
margin: 0 10px 0 0;
padding: 5px;
width: 150px;
height: auto;
}

.slide-title {
color: #fff;
font-weight: bold;
line-height: 100%;
display: block;
text-align: center;
margin-bottom: 35px;
}

#slider p {
padding: 0 15px;
}

#slider ul,
#slider li {
list-style: none;
overflow: hidden;
margin: 0;
}

#slider li {
width: 440px;
height: 290px;
padding: 5px 0px;
overflow: hidden;
}

#prevBtn,
#nextBtn {
display: block;
width: 80px;
position: absolute;
top: 92px;
font-size: 0.8em;
}

#prevBtn {
left: 53px;
}

#nextBtn {
left:418px;
}

#prevBtn a,
#nextBtn a {
color: #fff;
display: block;
width: 80px;
height: 32px;
padding-top: 5px;
text-transform: uppercase;
}

Resources for this post

Download zipped text file containing above code | Download easySlider 1.7

Help and research for this project.

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles

http://css-tricks.com/forums

http://digwp.com/book/

This article will show you how to create custom category templates that are automatically used when specific categories are selected from the site menu, via a conditional statement in the category.php file. While it is possible to have categories default to using a custom template named with the category number (i.e. category-12.php), this is a simple, logical technique for displaying specific categories using custom templates, based on a conditional statement in the category.php WordPress template. Another advantage to using this technique over the category/number approach is that you may have multiple categories that can share a single template (i.e., “products” and “books” might use the same layout) so you can avoid creating extra documents.

How it works

If a site visitor clicks on “books” she will be served a unique layout, directed by the category.php file in the site theme, that grabs all of the posts in the “books” category and presents them in a specific way. If the visitor clicks on “tutorials”, that same category.php file will grab a different template to present the posts in the “tutorials” category. When rolled over in the site menu, the browser status bar (bottom left of your browser window in Firefox) would show the link to these “pages” : http://domainname.com/category/books. The link in your theme template would be : /category/books. Same thing for the menu link to the tutorials category.

How to set it up

For the sake of this example, we will assume that you have three categories in your WordPress installation – News, Books and Tutorials. We want a custom template for the Books and Tutorials categories and we want the News category to use the default category template. If your current theme doesn’t have a category.php template, you can grab it from the WordPress default theme.

1. Make four copies of category.php and name one of them something like “category-original.php” just in case you want the original back later on down the road.
2. Rename the other three copied files category.php, category-default.php, category-books.php and category-tutorials.php. The hyphenated files will be your new templates – you can actually name them anything you like; I just prefer this naming convention because I think it’s easy to understand and the files show up together when viewed alphabetically. Please note that these templates do not require the opening php “template tags” that Worpress uses for custom Page templates; those are only for Pages where you select which page template you want to use. All the work here is done by category.php, which decides which category template to use. I agree that using the word “template” in so many different ways could be confusing…
3. Edit each hyphenated template as necessary to present the content intended for it.
4. Now, in category.php, delete everything and replace it with this  (you’ll need to remove the extra space after the beginning of the php tag question mark) :

   <? php
   $post = $wp_query->post;
   if (in_category('books')) {
   include(TEMPLATEPATH . '/category-books.php');
   } else {
   if (in_category('tutorials')) {
   include(TEMPLATEPATH . '/category-tutorials.php');
   } else {
   include(TEMPLATEPATH . '/category-default.php');
   }
   }
   ?>

What this script tells the server is :
- If the link to the books category has been clicked, use the template category-books.php to present data from that category
- Else if the link to the tutorials category has been clicked, grab category-tutorials.php to present that data
- Otherwise, use  category-default.php to present the data from whatever category has been selected for viewing

Extras

A similar technique can be applied to the single.php template and you can also employ conditional statements to doing neat things like changing header graphics or page layout based on the page or category being served. More on that to come in another article…

If you are using a wonderfully handy plugin like Improved Include, you can also include a page – like intro text – at the beginning of the custom template rather than adding that content to the template itself. This is a good way of ensuring that you keep the content and structure separate, and enabling changes to the intro text to be conveniently made in the WordPress admin area. If you are using this plugin, you would simply add the following directly before if (have_posts)) :

<? php if(function_exists('iinclude_page')) iinclude_page('6','displayTitle=true');//use your page number ?>

In my search for a way to : a) easily generate a list of a large number of PDF documents in a folder on the server; b) automatically show links to each document for easy download, and of course c) display this within a WordPress Page or Post (whew!), I discovered the WP Include File plugin from http://AmberPanther.com and this directory lister script (thanks to http://www.totallyphp.co.uk).

How I did it

With a bit of experimentation, I was able to do it like this :

1. I created a folder for the PDFs at my client’s site root and named it logically (i.e. “pdf”)
2. Inside this folder, I put the PDF files and added the script as a file called index.php
3. I then created a WordPress Page for the list and used the WP Include File shortcode to include index.php file with the plugin. The shortcode looked like this (I’ve added an extra space after/before each bracket so you can view the code in this page) :

   [ include file="MyCustomFile.php" masterpath="/home/myusername/myrootdirectory/thefilefoldername" ]

The hardest part was figuring out the proper path for the shortcode and adding hooks/html to index.php to style the list of PDFs. WP Include File has several settings options, but I ended up using what they call the “masterpath” option directly in the shortcode (as shown above). You can download my adapted version of the script here and see how I did it, and view a page with a list of PDF documents generated using the script (it could be other types of documents or images, too).

I’ve been looking high and low, for a client, to find some way to easily  upload and link to PDF documents. I came across the Apture plugin for WordPress, which interfaces with the Apture website (http://apture.com) and lets you pick from uploaded documents of all types (multi-media, pdf, xls, pp, etc.). Click on the sample link below to give it a spin!

Sample PDF

I’m into my second year of using open source survey software Lime Survey to manage voting for one of my client projects. If you don’t know about it, stop by http://limesurvey.org and check it out. In addition to a downloadable, self-installed version for your server, they have begun to offer a hosted version and will soon release Lime Survey 2.0. I have very much enjoyed this highly stable, easy to figure out application that promises to be even better with the upcoming version.

Turns out that there’s a way to do it. No software required, the result is immediate and it is shockingly easy to reveal the hidden password.