Beverage Superstore of Grayson: A new site for a new store

New Website for a new location: Beverage Superstore of Grayson

Beverage Superstore was opening a sister location in Grayson, Georgia, and needed a new website. Although the original locations had a website, it was dated and difficult to maintain. We took this opportunity to update the branding, design a new website that was as fresh as the new store. Features a rotating front page specials section, as well as Facebook page news integration prominently displayed on the front page. New branding was extended to a new mailing list (using Mailchimp) as well.

A Brand New Red Rocket Farm! (Art, Animation, and Webcomic site)

Red Rocket Farm is the main site for Jason Thomas, artist, creator and animator of Cradle Me Sky, and author of Free Drawings for Total Strangers. This site features Jason’s wonderful artwork, rotating front page billboards highlighting content throughout the site, and a Cradle Me Sky subsite. Our first stage of this project was simply to build the Cradle Me Sky site. Phase 2 was just completed, adding the main Red Rocket Farm site, as well as a webcomic-like section for Free Drawings for total strangers, and the Farm Blog.

 

 

Using the WordPress Media library to store images to be used in multiple posts.

One of my new years resolutions is to start sharing more WordPress code tips here, so here’s one!

I’m working on a “Customer Portal” for a landscaper client.  One of the features is using the wordpress Media Library to store photos of various plants, including care information which would be stored in the Description field of the image.

This way, a collection of plants could be displayed in a single post for the customers review, and she can use the plants over an over again in different communications with customers.

There were a couple of things I had to do to make this workable for her, and I thought sharing here would help others!

For one thing, reusing the images multiple times means you can’t easily use the built in WordPress Gallery functionality, since the images are NOT attached to the posts (they are just Inserted it them).

We also wanted to display the description in the image caption.

Finally, this needed to be very easy for the client to do, and fast.

Improve Usability of the Image Insert functionality in WordPress

Since we are using images that may or may not be attached to the posts (some may be uploaded at the time the post is created, but others will be pulled from the media library) we can’t easily use the Gallery function.*  So for each image you have to insert the image you want, then open the dialog up again to insert the next one, and so forth.

Also, I find that if there is one thing that will screw up the formatting of a wordpress post it’s using the Caption in the Visual Editor, so I generally steer non-techie clients away from it.

But in this case, we did want to use the Caption, and I foresaw support calls in my future if we didn’t make it super easy for the client.

Solution: Faster Image Insert plugin

This plugin adds checkboxes next to the images on the the Upload/Insert image dialog.  So to insert multiple images at a time from the Media Library, just confirm the settings (size, caption, etc) for each of the photos, click the checkboxes of the ones you want inserted, and insert them all at once!

So much easier than inserting them all individually, and less prone to errors because the user clicked in the wrong place and inserted his next image into a caption!

*If you wanted to use the Gallery functionality, you would have to specify the # of the attachment each time using the gallery include = syntax, but that was ruled out as too complicated for the user.  We needed a way to let her just choose the images she wanted and insert them.

How to add the description to the image caption (WordPress)

The next problem to solve was showing the description in the caption area.  She didn’t want the user to have to click on the image to get to the Attachment page to see the image description.

This one I found by a little Googling, and it works like a charm.  Thanks Web Citizen Mag!

Recently for a project, we needed to utilize the description field to dump in additional photo information, while the caption field was used to provide the regular text caption.

To get WordPress to display the description inside the post we had to override the the default image shortcode function WordPress used to generate the final HTML output for the images inside posts.  Then we needed to make some changes to our stylesheet and we were set.

Go there to read the how-to!

Basically go to the link above and copy the code provided to your functions.php file.  The example provided is excellent.

The only change I made to the code was that I wanted to show the description under the caption, instead of on top, so I made the following change to the return:

So now I just added some formatting to the css for the Description info, and we are good to go!

Easy peasy.

Final Product – Media Library (non-attached) Images displaying Descriptions within a WordPress post!

Artist Portfolio Website

Another recent project that I hadn’t gotten around to blogging about…  David Joel of One Eye Opens is a wonderful Seattle artist who needed a website that showcased his work professionally and flexibly.  His works are large scale pieces, so presenting them on the small scale of a website was challenging.  This portfolio site is simple to keep updated with new work, and allows him to announce upcoming shows and connect with his fans easily.

OneEyeOpens - Art Portfolio Website for David Joel

Email send stops working on a WordPress site: Troubleshooting

The other day we had an issue where emails just stopped working on one site.  Emails from Contact Form 7, Event Espresso, and even standard WordPress functionality like notification email for new user sign up.

We finally got it fixed – turned out to be a problem on the host side – but I thought I’d share the troubleshooting we did, because it really helped to narrow down the possible problem and save us some time.

The first thing to do in troubleshooting is to narrow down the possible causes of the problem.

First, is it happening throughout all mail functionality on the site?  If you aren’t receiving emails from, for example, Contact Form 7, is it a problem with your contact form, or is it ALL mail functionality on the site.   Try testing other mail functionality – like new user signup, comment notifications, etc.  In our case, it was first reported as a problem with our Event Confirmation emails in the Event Espresso plugin, but a quick test revealed that our contact form wasn’t working either.

Obviously, if you’ve just installed something, like a new plugin, that would be the first place to look.  Plugins can conflict with each other and cause problems.  Or, if you’ve just done an upgrade of WP.  But in this case, we hadn’t made any significant site changes in the previous few days.   And we checked to make sure the emails for the site were functional (eg you can send/receive emails at @yoursite.com email addresses, particularly your admin email) .  [As an aside, I did run across info that some servers (GoDaddy?) are picky about what your admin email is — one thing to try when you’re having problems is to set your admin email to something like info@yoursite.com, and set up that email address to forward to your yahoo or gmail type email address] But in our case, our emails were functioning correctly, so that wasn’t the problem.

Most  WordPress mail funtionality uses php mail() as the way to send messages, so if you’re unable to receive emails sent from the site, a good test is to see if php mail is working on your server, outside of WordPress.   If you can’t get php mail to work outside of WordPress, you can pretty much rule out WordPress or any plugins as your problem, and go straight to technical support at your host with that info.

To test php mail is really simple, you don’t need to be able to code to do this, just know how to create a file, copy/paste, and ftp the file to your site.

1. Create a new file (use Notepad if you don’t have a better text editor) and call it emailtest.php.
2. In the file, minimally you’ll need something like this (obviously replacing the email address below with YOUR email address):

If you want even more information it’s a good idea to add something like this, which will echo back the from and to, and also allows you to specify the “from” . (Again, replace the email and the from email with actual emails-a good test is to use your personal email as the $email, and your site admin email as the $fromemail)  :

For my test file, I actually included both of the above, plus the second test again with different emails that were not from my site’s domain–I changed the email to my gmail account, for example.

Save the file and place it on your server, in the same location as your wp-config.php  file for your site.

Then in your browser, go to http://whateveryoursite.com/emailtest.php

When you load the page, it will attempt to send your emails.  If it works, you should get success messages for all 3 tests, and receive 3 emails to the specified accounts.

If everything succeeds, then your problem is likely to be within WordPress, so return to troubleshooting there, looking for conflicting plugins and such.

If everything fails, or even more interestingly, parts of it fail, then you have more information to work with, and to take to your host’s support folks.

In our case, we had the bizarre situation where the simple case (no from specified) failed, and the only way the more complex test would pass was if we sent to an email address on our domain. This definitely looked like a host issue, so we passed our results on to support, including pointing them to the test file we’d created, and they fixed it very quickly (kudos Bluehost!).

But having this information up front helped to get us to the right people in support and avoided any pushback that it was something within our control that we had broken.

Source for the basis of this script: http://wordpress.org/support/topic/sign-up-not-working-properly-on-my-site and also support on the Bluehost forums

Search bar results different in Firefox 4

I just upgraded to FF 4, and I noticed that I no longer get google results (or google ‘i feel lucky’ results) when I type something in my address bar that isn’t a full web address.  Like I might type just sluggy and that would go straight to sluggy.com.  I basically use my address bar as an extra search bar, and have forever, so it’s a hard habit to break.

But it’s an easy fix to get it back to that functionality.

Just type about:config in your address bar.

It will give you an ‘are you sure’ warning.  Say you are sure.

Then find Keyword.URL, and double click on it.

Set it to http://www.google.com/search?ie=UTF-8&oe=utf-8&q=

if you just want it to return google results.

Set it to

http://www.google.com/search?btnI=I%27m+Feeling+Lucky&ie=UTF-8&oe=UTF-8&q=

if you want it to try to go to the most likely site.

More here: http://kb.mozillazine.org/Keyword.URL

Why don’t my blog photos show up on Facebook when someone Likes a post?

..and other amazing  facebook mysteries…. REVEALED!

It’s amazing to me how often you’ll get a bad image when you try to link to a particular blog post or website page on facebook, even from major sites.

I’ve been researching the ins and outs of this for the last few websites I worked on–both setting up the facebook Like button, and also testing what happens when a user links to a page–, and so I thought I’d share some of my findings, in the hopes of helping others.  Please feel free to add to or correct anything, in the comments.

Facebook uses something called Open Graph protocol to get all the information to display. And if there are multiple images to pull on a page, many times it will just pick the last one (which might be your twitter icon, or something else totally random) Not the actual image you were wanting to display next to the link on facebook. The same process happens when you are Linking to a page from facebook, or when you click a facebook Like button on the page.

To test what facebook will read off your page, you can paste the url for your overall site, or a specific webpage, here:  Facebook URL Linter.  It’s a more reliable way to test your link than just by posting on your facebook, as facebook will cache things.

For more about this, with examples, see: How to get the right images when Liking on Facebook

How to get the right image to show up when a page is linked or Liked in Facebook:

There are a few different options, depending on what type of site you have, and your level of technical expertise.

Simple Answer (specifically for WP bloggers):

If you’re a WordPress blogger:

  • Try this plugin:  FetenWeb image_src Metatag.
    I’ve used this one on a few sites, and it will pull the featured image (if you’re using that functionality) or the image attached to the post for facebook links.  You can also set a default image.  It’s simple, and seems to work quite well.

If you have a basic wordpress blog, that may be all you need.

Sort of Advanced answer – Setting Open Graph in your header:

As I said before, facebook reads the Open Graph tags on a page.  If it can’t find them, it tries to figure them out from the other information on the page.  To test what facebook will read off your page, you can paste the url for your overall site, or a specific webpage, here:  Facebook URL Linter.

So if what you see in the Linter is not what you want the user to see, you can set the Open Graph tags by adding them to the head section of your website.

To start off, Facebook has a tool here (“Step 2“) that will generate basic OG tags for your site.  (if you’re logged on to facebook when you use it, it will pull in the right Admin ID for you).

You’ll need to paste your tags in the <head> section of your website.  (In WordPress, that would be in header.php, before the end of the head section (before the </head> tag)

Note that you may not want to set all the open graph tags – you may want some of them to be generated based on the page content.

Note the difference between “article” and “website” for the og:type property.  For blogs you should use ‘article’ not ‘website’.  From the Open Graph site: Use article for any URL that represents transient content – such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.

Since the big thing we are talking about here is images, if you want a standard image to appear on any page linked from your site, like your logo for example, you’ll need to set it in the image tags.  Create a jpg file of your image (a square image works best for facebook), and (for simplicity’s sake) store it in the main directory for your site (the www directory, generally).  {If you’re on WordPress, this would be the directory where your wp-admin and wp-content directories are located.}

Then we set the og:image tag to that file:

There are more tags you can set (list here: Open Graph) too.

Advanced Answer: using conditional tags

So, for many sites you may want to have different open graph tags appear depending on what page you’re on.

Take for example a website which includes a home page, multiple content pages, and also an integrated blog.

For my home page, I may want to set the description, rather than have it generated based on the page content.  And on my content pages, I may want to show just my logo, or I might want facebook to pull an image from the page.  On blog pages, I probably want to show the image attached to a post.  So I need different rules:

Here is an example from company website, with integrated blogs, developed in WordPress.  I use something like this in conjunction with the Fetenweb plugin above to get the appropriate results.

The first section is for the home page, where I’m setting specific text I want to appear as the description.  The second part is for single (blog) pages, so if someone links to the article on facebook it pulls up the article specific information.  The third is pretty much like the first, it just doesn’t set the description (and if I removed the image tag, it wouldn’t set the image.)

You can see the effects:
Here is my results for linking to the homepage: https://graph.facebook.com/?id=http://dabbledstudios.com/
Here is my results for linking to a blog post: https://graph.facebook.com/?id=http://www.dabbledstudios.com/a-fun-and-retro-kids-salon-website

Hope this helps!

Nancy

Best simple poll for WordPress? Testing the Democracy Plugin

A client wants to be able to add some simple polls to his website, so I’ve been researching which are the best poll plugins, from both an ease of set up and use standpoint, as well as being visually appealing. We want something that can primarily be added to posts, but also can easily be displayed in a sidebar if desired.  We don’t need anything extremely fancy, just a nice, simple poll.

I tried WP-Polls first, but it looked pretty complex for a novice user, so I’ve moved on to Democracy. I figured I’d document how it goes for others who might be looking for something similar.

Here is an example of the poll in action (feel free to try it yourself!):

{democracy:2}

________________________________________

My thoughts:

Installation: The plugin installs easily, no problems, but I did have an issue with a strange case of it inserting a random “n” before a poll.  Google is my friend, though, and I found this post which addressed the issue.  Modifying line 331 of democracy.php to change the single quotes to double quotes in this line did the trick

Styling: The default styling seems nice, and if you know some css, you can customize the styling.  The only css change I made to the example above was to remove the bullets from the list by adding this to my style.css:

ISSUE: The bars on the results don’t display the same in IE as in Chrome and Firefox…

I had to add a width to the .democracy to get the bars to show up in IE.  By default it’s max-width:250px, but I changed it to 300 and added a width setting.

For mine,

Features:  It includes a widget for sidebar use, and is easily inserted into a post with one simple line.  It also (optionally) allows users to add their own poll options.  Can enable IP tracking and cookie tracking to prevent ballot box stuffing (though those options are disabled on this test poll).  The only thing I didn’t see was some sort of option to run the poll for a set number of days, but it does give the option to manually deactivate a poll.  All in all, everything I needed for this simple application.

Poll set up and Maintenance:  Seems simple enough.  A new section is created in the Posts section of your Dashboard, and you manage your polls from there.  Name your poll, add your choices, and you’re good to go.  Insert a particular poll in a post by using:

(where x= the ID of your poll)

All in all, I’m quite happy with this as a solution thus far, now that I’ve fixed the IE display issues.  I’ll update as I attempt to integrate it into the client site…

Update:  It looks like the Add your own answer option doesn’t work in IE.  Uh oh.

How to Backup your WordPress Website

I have an article up today at Dabbled on backing up your WordPress site or blog.

Go check it out:  Don’t Panic! Understanding and backing up your blog

Excerpt:
So last week I get an urgent message from blogger friend Carissa (GoodNCrazy.com) – She’d had problems with her host, and her blog was down, and she needed help getting a new host and getting her blog back up. Since I’d done her blog theme design, I was familiar with her stuff, and had a backup of her theme.  I also recommended my host, Bluehost.com – since I’ve been very happy with them*.

She had a pretty good scare that she’d lost her entire site, so I figured it would be a good idea to share how to avoid going through that kind of panic!

The advice that follows is specifically for self hosted WordPress blogs, but no matter where you host, you need to be doing regular backups!

Read the whole thing

Contact Form 7 Fix (what do try when you get the Failed to Send Message error)

One of the WordPress plugins I like to use is Contact Form 7, but it seems half the time I install it, I end up with that “Failed to Send Message” error, and it takes me a while of trial and error to remember how to fix it.

Well, I just fixed it on the website I’m currently building, so I figured I’d document the fixes for you guys, and for myself the next time!

A caveat- this is what works for Bluehost hosted sites, using Contact Form 7 Version 1.9.5.1, WordPress 2.9

1. Set up a admin@yourdomain.com email address on your server. (I forward that to my email while I ‘m testing the site, then that can be forwarded to the administrators current email later)

2. Ensure admin@yourdomain.com is set up as the admin email in WordPress (General settings: Email Address)

3. When you set up your form, Make sure the “To: ” email in the contact form settings is set to admin@yourdomain.com

(the key to all this being that I think the site domain needs to match the email address domain – it doesn’t have to be admin@, I just use that.)

Another thing that might help as well that I found in my research:

  • Set up a wordpress@yourdomain.com email address on your server.

Best WordPress Plugins for a new site..

For a site I’m finishing up right now, I went through my list of WordPress Plugins that are really nice “must haves” for a new website.  Since I  was documenting what I was recommending for the client, I figured I’d share it with you guys as well.  There are tons of great plugins out there, but these are a few that provide some great value…

Simple Trackback Validation Eliminates spam trackbacks by (1) checking if the IP address of the trackback sender is equal to the IP address of the webserver the trackback URL is referring to and (2) by retrieving the web page located at the URL used in the trackback and checking if the page contains a link to your blog.

Version 2.1 | By Michael Woehrer | Visit plugin site

(This one solved my Trackback Spam problems)

Shadowbox JS A javascript media viewer similar to Lightbox and Thickbox. Supports all types of media, not just images.

Version 3.0.0.3 | By Matt Martz | Visit plugin site

(I like this particular viewer best out of the ones I’ve tried)

FD

Feedburner

Plugin

Redirects all feeds to a Feedburner feed

Version 1.41 | By John Watson | Visit plugin site

(Recommended for integrating feedburner)

Microkid’s

Related Posts

Display a set of manually selected related items with your posts

Version 2.4 | By Microkid | Visit plugin site

(I like that it lets you choose the posts that are ACTUALLY related!)

Twitter for WordPress Displays your public Twitter messages for all to read. Based on Pownce for WordPress by Cavemonkey50.

Version 1.9.7 | By Ricardo González | Visit plugin site

(Good basic integration.)

Ultimate Google Analytics Enable Google Analytics on your blog. Has options to also track external links, mailto links and links to downloads on your own site. Check http://www.oratransplant.nl/uga/#versions for version updates

Version 1.6.0 | By Wilfred van der Deijl | Visit plugin site

(I like that it gives you a GA Dashboard on your WP Dashboard)


WP

Captcha

Free

Block comment spam without captcha.

Version 0.7 | By iDope | Visit plugin site

(Simple and effective)

WP-

PageNavi

Adds a more advanced paging navigation to your WordPress blog.

Version 2.50 | By Lester ‘GaMerZ’ Chan | Visit plugin site

(Very nice feature)

Sociable Automatically add links on your posts, pages and RSS feed to your favorite social bookmarking sites.

Version 3.4.4 | By Joost de Valk | Visit plugin site

Exclude Pages from Navigation Provides a checkbox on the editing page which you can check to exclude pages from the primary navigation. IMPORTANT NOTE: This will remove the pages from any “consumer” side page listings, which may not be limited to your page navigation listings.

Version 1.51 | By Simon Wheatley | Visit plugin site

(Not useful for all site, but really nice for the more complex ones.)

Got others?  Let me know!

Tips for Websites for Writers

Since one of the things we focus on at Dabbled Studios is websites for creatives, today we’re going to talk about websites for writers.  A writer (particularly an aspiring to be published writer) needs to present his or her best face to the world.  A good, professional website is key to this.

Style:

  • Research:  Take a look at other authors, particularly successful ones.  Note what you like, and what you don’t.  See how easy it is to bookmark a page within their site, or find their contact information.  Do they seem to connect with their readers?  Do they blog?  Get a good idea of what you would like to see on your site.
  • Think about style.  If you are published, the cover art from your most recent book can be a great cue to use for the design style of your website.  The marketing department has all ready done half your work for you, and you can use that as a starting point for the look and feel of your site.  If you’re not published yet, you’ll want to try to figure out a way to distill the feeling from your most recent work into your website.  Think about your target market – a website targeted at teenage girls is going to look very different from one targeting spy thriller fans.   If in doubt, keep it simple and professional.
  • Keep it simple.  Don’t overdo on the bells and whistles.  Just like your writing, everything you do on your website should be for a purpose. Use white space effectively.
  • Avoid music.  You’re not a band.  Remember people may be reading your website at their desk at work, and having to struggle to find the mute button is not a good first impression

Content:

  • Minimal Categories:  Books/writings (include synopses / reviews of published or future novels), Bio, Contact (email + social networking), a blog or ‘news’ page.  Others: Articles/Essays, Media, Purchase
  • Keep it focused – your website should be about you and your writing.  If you write about a particular subject, then your website can focus on that as well.  And it should go without saying, but unless it’s relevant to your writing, avoid the big 3: sex, politics, and religion!
  • Show your best stuff.   Any samples of your work on your website should be good, representative samples of your work.  If you wouldn’t want a prospective publisher to be looking at it, it shouldn’t be on your website.
  • Although I’m not an expert in publishing, most of what I’ve read recommends you not include unpublished works that you are trying to sell, like a chapter from your new novel.

Resources:

Here are a couple of good articles:  what needs to be on your website… and what doesn’t!

And other resources:

Related:

Coming up…

  • What the heck do I do with Twitter?

2 More Useful WordPress Plugins

An update on some of the new (or at least new to me!) wordpress plug-ins I’ve just found.

WP Greet Box – This is a great idea, though I’ve just installed it on my Arts/Crafts site, Dabbled.org, to try it out. I’ll keep you posted on how I find it to work. Thus far, I’m liking it. It determines where your visitor is visiting from, and displays a greeting message to either point them in the direction of more related posts (in the case of a Google search) or (in the case of Twitter) suggests they re-tweet and offers up how to follow you on twitter. In general it will remind them to follow your RSS feed. Which is pretty nifty.

Tweetsuite – I installed this on on Dabbled.org today, because I use Twitter a great deal with that site, and I was interested in displaying ‘tweetbacks’ (ie where other users had tweeted my posts). It appears to still have a few bugs (I got an error message when I tried to install some of it’s widget capability) but the core functionality seems fine. It’s a great idea, so I’m hoping it works well!

Update:  Neither of these I’m keeping… both didn’t quite work as I’d hoped.

How to clean up after an iframe hack

Hackers apparently never sleep, so I spend much of yesterday cleaning up from a hacker attack on several of my sites. This particular hack is quite “successful” since there is very little to indicate to the site’s users or administrators that a hack has occurred.  In the background your site could be spewing porn or gambling links to Google, or serving up malware to your customers.

At the Dabbled blog today, I did a writeup on symptoms that your site has been hacked in this manner, solutions for cleanup, and resources you can use if this happens to you.

Read the article

And everyone:

First off, everyone should do regular spyware checks on your computer. Yes, even if you have a mac.  Yes, even though you already run a virus scan.   There are a bunch of programs out there, but I typically use Spybot Search & Destroy and AdAware. They are both free for personal use. And if you use IE I recommend switching to Firefox. The ad blocking and script blocking add-ons will save you headaches. Also, if you’re using version 8 or below of Acrobat Reader, upgrade to version 9.