I recently started using the Nextgen Gallery on a project I just completed at exquisitecutandfashion.com.  If you haven’t used Nextgen before, it’s an excellent image organizer that let’s you do things like automatic thumbnails, gallery metadata, and more.  Have a look at some samples to get a better idea.

I have come to love Nextgen so much, I decided to use the plugin once again with another client, coastexpressions.ca because it supposedly gave me flash gallery capabilities. Integrating both together is normally a straightforward process inside a blog post.   According to instructions, all you are supposed to do is use [simplegallery id=x] and you should be able to show the flash viewer.  That wasn’t working for me.  When I tried that same short code in the page header of a site nothing happened, and I wasn’t surprised. I assume it’s because the above short code only works inside the Wordpress loop (and probably where the plugin does some run time magic).  Anyways, I found a different approach that works outside the Wordpress post loop and will almost certainly work for you anywhere on your site (including inside a Wordpress loop or in your blog post/page.  Below are complete instructions:

What you will need

• Wordpress web site
• Wordpress Admin access and advanced coding skills
• Nextgen Gallery
• Nextgen Flash Plugin
• Flash Photo viewer from AirtightInteractive

Step 1 – Install the Nextgen Gallery Plugin

Go to Wordpress admin, click Add Plugins, search for “Nextgen”, and Install the Nextgen Gallery plugin.  If you haven’t installed a Wordpress plugin before, the rest of these instructions here aren’t going to make any sense to you at all.  I suggest, you put this tutorial on hold, and learn a bit more first from here, here, and here.

Download the 1st plugin

Step 2 – Create a Gallery and add some Images

Once the plugin is installed and activated, find the new Gallery menu in your Wordpress admin. Create a new gallery (name it whatever you like), and add as many images as you like.  Click the image above if you need some help.

Step 3 – Install Flash plugin

If you haven’t seen it before, a company called AirtightInteractive has some really great flash photo viewers you can get for free.  In combination with one of those flash photo viewers (I’m using Simpleviewer in this example), we can show our Nextgen gallery on our site.  In order to do that, we need a second plugin.  Download and activate it.

Download the 2nd plugin

Step 4 – Download and Install the Flash files

Now that you have the 2nd plugin installed, you will need some flash files installed in your Wordpress Plugins folder.  See below for detailed instructions (original instructions located here)

1. Create a folder in your Wordpress plugin folder called “nggflash-swf”. 

2. Go to the web page http://www.airtightinteractive.com/ and download the SimpleViewer & Tiltviewer & AutoViewer & PostcardViewer

3. If you intend to use PostcardViewer, rename viewer.swf in the PostcardViewer folder to pcviewer.swf

4. Upload the file viewer.swf, TiltViewer.swf, autoviewer.swf and pcviewer.swf to the wp-content/plugins/nggflash-swf folder

5. Activate the plugin

6. Go to Gallery->FlashViewer.  Enter the location of your SWF file.

Step 5 – Embed your Gallery

If you have gotten this far, you are doing well. You should have the following done:

• Nextgen Gallery plugin installed, activated, and at least one gallery populated with images
• Nextgen Flash plugin installed, activated, and configured (see Gallery->FlashViewer in Wordpress admin for configuration)

1. Now, get the ID of your Nextgen gallery as show below

   

2. Using the above ID, enter the code below anywhere on your site where you want the Flash viewer to appear. 

   1: <div id="gallery">

   2: <object height="480" width="950" type="application/x-shockwave-flash" class="simpleviewer" name="so1" data="/wp-content/plugins/nggflash-swf/viewer.swf" id="so1_1" style="visibility: visible;"><param name="wmode" value="opaque"/><param name="allowFullScreen" value="true"/><param name="bgcolor" value="#E2F0FD"/><param name="flashvars" value="preloaderColor=0x999999&amp;xmlDataPath=/wp-content/plugins/nextgen-flashviewer/xml/simpleviewer.php?gid=1"/></object>

   3: </div>

3. In your code above, change gid=1 to the number of your Nextgen Gallery ID where 1 is replaced by your gallery id.

   1: ....php?gid=1"/></object>

   2: </div>

4. Change your flash object width and height as well.  I tried a few different sizes, and it seems that Simpleviewer doesn’t like anything smaller than 480 pixels in height.

   1: <object height="480" width="950"

5. If you are using Simpleviewer as I am, change your background color as well

   1: <param name="bgcolor" value="#E2F0FD"/>

If all goes, well you should have a functional flash photo viewer connecting to your Nextgen gallery.  Got problems?  Let me know.

Demo my Gallery

Tweet This Post

Minimum Requirements:

1. Wordpress website
2. A form built with Cforms which is already running on the page you want (I’m using version 11 in this example)
3. A Paypal account of any kind

Limitations:

1. You can’t take in subscription or recurring payments with this tutorial as far as I can tell, unless you fiddle some more with the PayPal Link Generator

Instructions:

Install the Cforms plug-in into your Wordpress installation – if you are stuck at this stage, this tutorial probably isn’t for you.  How about hiring us to do the installation for you?

Build your website form in Cforms to your satisfaction

Integrate the form into your page or post using the Wordpress Page/Post editor

Visit the Paypal Link Generator at http://www.codetransit.com/generators/paypal_link_generator.php and create a link of your liking

Once you click “Generate Link” you will get two boxes.  One is a form you can use on any page, and the other is a Link for Email – which is the one we want here.  Grab that code and copy it.

Visit your Cforms configuration page for the form you’re using and go to Core Form Admin/ Email Options

In this area, look for Redirect options and past the Email Link into that option and also Enable this option

Now, if you did everything correctly, you should be forwarded to this link automatically after submitting a form! 

Tweet This Post

I’m writing this post for a client I have just started working with in the hopes that it clears up some of the mystery around this topic and perhaps you will also learn a thing or two from my 2+ years of working with Wordpress.

If you spent any time at all with Wordpress, you eventually run into the dilemma of When to use Posts vs Pages for new content.  Sometimes the path is very clear when your theme design makes the choice self-evident (as with this blog theme for example where every content item is a Post).  Other times, it’s not as clear-cut (like with some of themes at Woothemes like The Station)  When it’s not as clear-cut, and your theme design doesn’t necessarily dictate which one you should use, you need a framework like the one I describe below.

Now, before we go any further, let’s learn about the differences between posts and pages for our less experienced users.

Difference between Post and Page from a Wordpress point of view

Well, let’s consider the possible areas that the Posts and Pages might differ:

• Editing and Embedding Content?  Definitely not.  Both are equal in their ability to render HTML.
• Commenting?  Nope, both can accept them and you can turn commenting and pinging off any any page/post you feel like (including adding aging rules with various plugins so that commenting eventually gets turned off on schedule)
• Publish Date?  Nope, both have this too
• Content Hierarchy?  Well, yes and no. You can’t say for certain really without considering your theme and how you implement the site.  For instance with pages, hierarchy is clear-cut with page and sub-page inheritance and that’s easy to put into a menu structure with just a few lines of code.  However, with posts, you can implement hierarchy as well via categories and sub-categories and creating a menu system to display this hierarchical structure.  I would caution that you face more constraints this way (especially if you implement page and post hierarchy on the same menu). Let’s just say for now, that content hierarchy is more suited to page content and if a deep menu structure is called for in your design, consider using pages for easier coding of your menu system, or (god forbid!), use a different content management system more suited to complex content hierarchy like Joomla or Drupal.
• Tags?  Only with posts (well unless you install a Technorati plugin for your pages but that’s another discussion). Tagging is something that accompanies all posts nicely and can be accessed in the Wordpress loop for each post entry.  It’s meant to be used with Posts alone and if you need tagging on your page content, consider some custom programming or re-thinking your content strategy
• Categories?  Again, only with posts.  If you want to implement categories with your page content, you are likely going to face an uphill battle and will eventually resort using posts anyways.

Tags and Categories are the difference

Yep, tags and categories.  So now that you know, we are done right?  Not so fast.  You see, what you also need to understand is that both tags and categories can be implemented freely during content writing.  They can both be created on the fly with each of your posts and if you don’t consider the implications on your theme, you might run into troubles. 

For example, let’s say you have a design from your client that requires the following:

• Spa Services (not added to often, but updated sometimes)
• Hair Services (not added to often, but updated sometimes)

Now there is nothing inherently wrong with the structure here.  The client needs the ability to update different areas of their site and they want the menu system to show content in each area respectively.  Nothing wrong with that.  However, as the designer it’s my job to implement their goals in an effective way, and that means understanding how the menus are meant to look and what kind of content belongs where. 

Thinking a little further ahead into the challenge presented to me, I already know that some of the menu items are going to be pages and some are going to posts. 

• Spa Services (Page)
• Hair Services (Page)

Update Frequency

In addition to Tags and Categories, Update Frequency plays an important role in the decisions I made above.  When there are areas of your site that need content updates on a regular basis, Posts are almost always the way to go, not Pages.  Posts are easier to constrain within the confines of a Wordpress theme in regards to menu and content hierarchy because you can shunt all Post content off into a specific area of your site quite easily.

Finally, a Decision Matrix

So in summary, I think your best bet when you don’t know is to follow some simple rules below:

If you don’t know when to use posts vs pages, do this:

1. If you haven’t picked a theme, think about the kinds of content you want to produce. Consider your update frequency, whether you would like freeform categories and tags, and what types of content will be where. Make those decisions first.  Any good designer or programmer that knows their stuff can bring your ideas into reality.
2. If, however, you already have a theme (and are limited to working within it), look at your theme design first to determine what type of content fits where.  Like this theme for example where all content is clearly a Post. Of course, themes can be changed (again, like I did here), and if necessary, you can always hire an engineer like me.
3. If you need freeform categories and tags, you can ONLY do that with Posts
4. If you have a section of the site that is added to frequently (like a News area), it’s better to use Posts
5. If you have a section where new content is only updated but not created (like for example a list of your clients on one page, or your about page like I have here), that may actually be done using a Page.
6. If your content has no requirement for tags and categories, it’s probably telling you that you need a Page, not a Post (again like my about page)

Tweet This Post

Out of the blue, I was contacted today by a local business owner seeking Wordpress theme customization from a theme they purchased on Themeforest (by the way, read about how I was able to provide everything the client wanted in my other blog post)  At first, I thought someone referred them to me, but after asking I was told they found me by searching for the phrase Wordpress Theme Customization Vancouver on Google where I rank #6.  

As you might guess, I’m extremely pleased by the first page ranking considering I have had my new site, Full Motion Group, out for less than a year, and that I only recently installed a new theme from Themeforest.  I’m going to share with you what I believe are the key factors in getting the ranking, and why I believe it’s partly attributed to the single page design I decided to implement.

Before I list my reasons, let’s get clear on WHAT a single page web site is:

1. A theme or design where all of your primary keyword rich site content is loaded into the client browser when they hit your domain name root
2. No frames, iframes, or fancy post-backs to load content in-line. 
3. Flash is NOT your primary content vehicle (can be used for headers and non-keyword rich content).
4. Any sub-page content or blog posts can be linked to, but those pages are not your primary keyword-rich content

As mentioned, I recently implemented a single page theme on my business portfolio web site, Full Motion Group.  The theme was from Themeforest called Personal Landing Page. I made many modifications to the theme (which i discuss at length about in the comments to the theme) to suit my needs like adding testimonials and making it possible to link to individual posts in the portfolio section. 

If you visit the site, and then view the source code, you will see that the site’s primary content is loaded when you visit the home page.  The only content that doesn’t appear on-load are the in-depth profile case studies (like this profile).  In future, I might enhance the design further to load this content as well but for now I’m happy with the way it is.

After purchasing the theme, and playing around with source code, I knew that the theme had potential for good search engine ranking, but I never guessed it would produce results until today.

How I got to be #6 on Google for “Wordpress Theme Customization Vancouver” and why a single page web site is better for your search engine ranking

1. Reason #1: All site content is loaded when a search engine crawler visits the site.  No additional links need to be followed that contain keyword rich content. 
2. Reason #2: If keywords are repeated unnecessarily (like in site footers), they pollute crawler statistics.  For example, let’s say you have a page footer on every page that contains a short description of your business and some relevant keywords.  Keywords used in that description appear for each page of your site and that forces crawlers to make some guesses about what that page could be about
3. Reason #3: You only need to maintain meta-tag information for one page.  I used the All-in-one seo plugin whenever I launch a Wordpress site, and one of the first things I do is enter the home page title and description.  With a single page theme, I only need to do this once and I can carefully monitor my analytics results and tweak those keywords to match the results I’m looking for.
4. Reason #4: Content deeper within your site might not get crawled.  With traditional multi-page web sites, you need to hope that a crawler will index your entire site. Who knows how search engine crawlers behave, and it might not always be the case (as anyone that has tried to search the Microsoft site can attest to). Single page web sites on the other hand, are crawled and indexed completely, that you can be sure of.
5. Reason #5: Single page web sites load more quickly. Well, this isn’t always the case, but certainly a single page theme creates less total traffic than say 10 individual pages of the same content (barring content that is cached in browser).
6. Reason #6: Single page web sites that are updated are re-indexed completely. I’m sure that every time I updated my web site, a search engine eventually revisits and recrawls the site eventually.  Having all my content on a single page load also means that all my content is re-indexed which is even better because I can carefully tweak my entire site’s keywords without too much fuss.

I have yet to prove for sure that a single page theme is better for you from an SEO point of view, and certainly this doesn’t always apply for all sites (as you get larger, you will need to split content into multiple pages), but if you can get away with it, I suggest you give it a try.

Like this post?  Leave a comment or link to me!

Tweet This Post

About 7 minutes.  That’s all the time I took to write this blog post.  I didn’t login to the Wordpress admin pages, and I didn’t visit my blog to post this blog entry.  How did I do it?  Read on for more.

1. Tip #1: Write about anything.  You think you need to write about something you just learned?  Well yes, but also write anything you already know, especially the knowledge you take for granted.  Newbie’s just starting to learn what you already know will appreciate what you see as common sense knowledge.  This blog post for example, highlights knowledge I already take for granted but it’s entirely possible someone out there doesn’t know it.
2. Tip #2: Get yourself a desktop blogging tool.  Windows Live Writer is my personal favourite and it’s a huge timesaver.  I’m writing this blog entry with this software now.  What I like most about using it is that I can copy/paste from other programs (like Photoshop) and image insertion is dead easy.  The Wordpress admin screens just don’t make the cut when compared to a desktop blogging tool
3. Tip #3: Go nuts with keywords and categories.  With a blog like this one, I’m able to get away with lots of categories. It’s a well designed theme and the layout lends well to many extra categories.  The additional time spent with categories and tags also let’s you get some good Google Juice too.
4. Tip #4: DON’T BE PERFECT!  I put this in caps because perfection will kill you.  You don’t need to be perfect, just post often.  I have a few customers that sit on a single post for days and that’s just time wasted.  Unless your audience are book publishers, you don’t need grammatical perfection.  Quantity is great but not without substance.  For example, it’s senseless to break this blog post into 10 individual blog posts with one item each.  It’s not going to get your Google Juice doing that.  Don’t sacrifice readability for quantity but also don’t worry about perfection. 
5. Tip #5: Use spell-check and revise at least once.  I use Windows Live Writer which has spell checker built in.  Spelling mistakes are bad and show a lack of care and attention.  I also revise the post once just to see if it’s readable.
6. Tip #6: Post a link in Facebook, Twitter, and Digg.  Blogging is great, but if nobody reads it, it’s energy spent for nothing.  Let your network know about your blog by posting links in your social networks.
7. Tip #7: Provide at least one image.  At least one, and perhaps even 2 or 3 if your post is long. Images help readers by breaking up long posts into sections that are scannable and easy to read.  Take a minute and visit Google Image search to find relevant imagery. Besides, images also just look purdy. 
8. Tip #8: Provide links.  The web is a hyperlinked world and links are what people like to see. Take the time to find one or two useful links to other sites if that’s called for but don’t overdue it.  For example in this post, I have linked to “Windows Live Writer” above, but only because it’s relevant to this blog topic and someone might find the link useful.  Sometimes, links to relevant content are appreciated and a nice blogger will leave a comment behind.
9. Tip #9: Use short paragraphs, bullets, and lists.  Online content is easier to read when you employ creative use of lists, bullet points, and short paragraphs.  Studies show people tend to scan screens rather than read in full.  As well, use bold/italics and colors to break up long text into readable snippets, as I have done here using bold and numbering the tips.
10. Tip #10: Write for a target audience.  If you have a blog about dog training, don’t put in blog entries about your recent vacation to Mexico.  Keep your blog content specific to a certain business, a service you provide, or one of your “personas” (I talked about personas in a blog entry about branding. Read that entry). I find that personal blogs about every single thing happening in a person’s life tend to get polluted with irrelevant content.  This blog for example is about my business, technology, and online marketing ideas and I will create a separate one about my vacations and non-business affairs if I intend to blog about those activities.

Enjoyed reading this post?  Leave a comment!

Tweet This Post

Get Post Image is a plugin I recently found that let’s you you place an image from a post into your home page to entice visitors to read your post.  I found a trick to OPTIONALLY show an image if it’s found, and not show one if it isn’t.  I used the PHP command “strpos” which allows me to search for the default.jpg and not show it if my post doesn’t contain an image.

Installation Instructions:

1. Download the plugin from http://www.andrewgrant.org/get-post-image
2. Install and activate the plugin as with any other Wordpress installation
3. Determine where you want your image thumbnail to appear (usually on your home page as I have done here), and find your post loop (the

<?php
    $image_tag = gpi_get_image(0,http://www.site.com/default.jpg, "portfolio-image");
    $url = get_permalink();
    $pos = strpos($image_tag,"http://www.site.com/default.jpg");
    if($pos === false) {
        echo "<a href=’$url’ class=preview>$image_tag</a>";
         // string needle NOT found in haystack
    }
    else {
         // string needle found in haystack
    }
    ?>
<?php the_excerpt(‘Read the rest of this entry &raquo;’); ?>

If you need more help with installing/configuring this plugin, let me know.  Just shoot me an email if you like.

Tweet This Post

I just got off a call with a potential client that asked me for help.  They initially contacted me via email (I have no idea how they found me and will post in the near future about that) and I replied back to the site owner with a quote and time estimate. 

I then did something few other web designers do in these situations: a follow up phone call.  This is good practice in creating confidence with your potential clients and it helps a LOT in persuading potential clients to work with you.

Why?  Well, let’s start with an understanding of what customers expect from their web designer:

What every Customer Wants from you

1. On time.  Being on time is simple.  Don’t promise if you can’t deliver.  There is no shame in being up front and honest about what you can and can’t do and in stating the absolute truth.  At worst, you might have to admit you can’t deliver when they expect you to, and at best, it shows a great deal of honesty.  Your customer counts on you for delivering when you say do.  Their business and internal activities rely on you being on time.  So promise a time you are able to stick to and don’t compromise.  If you fall behind, let your client know right away so they can accommodate the additional time you may need.  Be honest and be real about your time commitments.
2. On Budget.  This one is tricky.  As a web designer, I often run into a situation where a customer will keep asking and asking for changes not realizing the amount of work involved.  Something benign like changing text is perfectly fine but when you are asked to move things around on a page or change the site layout in some fundamental way, the time involved can be significant. Customers just don’t understand the web development process and perhaps that’s an area you want to spend more time explaining when meeting clients.  My suggestion when costing out a project is to quote by the hour initially and estimate total time required – being exact isn’t always necessary but some clients need this.  You can also adjust your hourly rate depending on the size of the client (yes, you really can charge more to larger firms and companies and that’s ok in my book). This last tip goes against popular opinion.  Some designers think they should set an hourly rate and stick to their guns no matter what.  I don’t agree.  Consider lower paying jobs as experience earned and mark it off as that.  If you help a client out in the short term with their needs, and you meet their budget requirements, they will appreciate it and remember you when their budget improves.
3. Technical Expertise.  It goes without saying that if you follow the rules above, that clients will tend to put your name in good light.  However, you need to actually do the work as promised and this won’t happen if you over promise your skills.  If you CAN do the work, then great.  If you can’t, however, propose to the client that you bring in a skilled freelancer you will need to hire to get their work done.  Think of the client’s perspective.  They just want to hire someone that can get their work done so they can move on to the next area of business they are concerned with.  They don’t have the time or energy to go out and hire someone else in addition to you, so bring the solution to the table.  If you need a programmer, add that into your quote and say you have a programmer you work with.  Become an expert at finding out what clients need and present solutions that fit their business requirements and continue honing this investigative skill.  If client’s ask you for a skill you don’t have, go out and learn it and then next time a client calls, you will be ready.  Skills learned are always beneficial if for nothing more than perfecting your craft.

Now let’s talk about that follow-up phone call. 

The best way to communicate with clients

Understanding human behaviour is a great skill to acquire and learn and thankfully I have spent a lot of time figuring my own patterns of behaviour through personal development and taking courses.  A side effect of this is that I have learned a lot about communication as well.

1. Best: Face to Face. Studies show that the best way of communicating (regardless of audience) is face to face and in person.  Why? Because it’s real, and it can’t be faked.  It’s honest, and non-verbal communication has a power of it’s own.  It’s not a coincidence that more and more companies are leveraging video streaming on their web sites.  The smarter marketers have just figured this out and many marketing companies are jumping into online video streaming (like these guys).
2. Better: Phone call. If you can’t meet a client one-on-one, give them a call.  I can tell you from the phone call I just had that there is a whole series of messages being played “under the surface” in phone conversations.  If you make the call, pay attention to what customers are saying and show them how you can help solve their problems and reduce their fears.  In my case, the customer mentioned that they had attempted to work with others designers in the past but most of them had overpromised, and under delivered.  Having made that follow up phone call, I’m cogniscent of this concern now and will be extra careful with this client if I win their contract.
3. Good.  Email.  If you can’t meet clients face to face and a phone call isn’t going to happen, email is good enough.  Email, however, doesn’t let you “speak”.  It’s cold and formal and it’s difficult to show your personality and energy.  If you must do email, at least include a link to a sound byte of yourself on your web site so potential clients can hear and see you.  Some clients don’t mind email.

Regardless of the above rules, each client is different.  Some prefer face to face, long lunches, dinners, drinks, and others prefer precision, and email.  Figure out what client’s want and give it them.  As my friend Eddie says, “Learn to adapt and conquer”.

As web designers, It’s too easy to sit behind email and not learn the art of face to face communication but leverage it whenever you can.  It’s real, and it shows who you are.  Few other web designers go as far as following up with phone calls and sending thank you cards, etc.  It doesn’t take much to be different.  Try it, and you will be surprised by the results.

Tweet This Post