How to change the width of an automatic WordPress embed
One of the superb things about WordPress is that it will automatically convert YouTube URLs into embeds (as well as URLs pointing to Vimeo, Flickr, Hulu etc.)
For example, the video you see embedded on this post was supplied from within the WordPress post editor like this:
How to set the size of automatic embeds for your entire WordPress site:
Login as the WordPress admin and go to Settings: Media. There you’ll see boxes for setting your maximum embed height and width. This will change the width of your embeds throughout your whole site. It’s retroactive so if you change theses settings, they’ll impact embeds even on posts and pages you authored before making the update.
Login as admin, look for Settings: Media
How to change the size for an individual embed:
If you need to make an embed bigger or smaller for a particular page or post, you can override the global media settings by adding a little code to your post, like this:
[embed width="390" height="300"]http://www.youtube.com/watch?v=XYZ[/embed]
Breathe Free Tibet
Every year, I agree to build one or two non-profit websites at a discounted rate. This year, I was especially honored to be given the opportunity to design and launch BreatheFreeTibet.org. The purpose of this organization is to “save an ancient culture from extinction” by improving health care available to Tibetans in exile. This population suffers from one of the highest rates of tuberculosis in the world.
Please consider making a donation to this organization, whose fundraising is conducted by The Tibet Fund (a four star charity as rated by Charity Navigator) and whose mission is personally endorsed by His Holiness the Dalai Lama of Tibet.
www.breathefreetibet.org
Website Redesign for Unity Woods Yoga
Unity Woods Yoga hired me to design and build a modern website for their four yoga studio locations in the Washington DC area. The client is able to edit 100% of the pages on the website using WordPress, including all homepage content, instructor bios and the blog. Additionally, class schedules are automatically synchronized to a 3rd party yoga class registration web service via XML and attractively rendered using AJAX for super-speedy navigation.
www.unitywoods.com
“I engaged Canton for a complete redesign of the website for Unity Woods Yoga. It’s hard to know what to praise first. His expert technical knowledge of WordPress and his creative design advice made the site far more attractive and user-friendly than before. His skill in automating a connection to the studio’s online registration system will save the staff many hours of work each month. I especially appreciate the value he consistently added above and beyond my expectations with extra tweaks and improvements that I didn’t even know to ask for.”
– Sue Lyn Schramm
Marketing / Outreach for Unity Woods
Website & blog redesign for Round Mountain
Round Mountain is a “Two man singing folk orchestra” based in Santa Fe, New Mexico. When musicians Char and Robby Rothschild received a last-minute invitation to play at the Folk Alliance conference in Memphis, they asked me for an emergency meeting to see if it would be possible to build them a brand new website in short order. The website you see below was designed and built in 10 hours using “The Station” WordPress theme as a starting point.
Highlights from this marathon design session included:
- Creating the two minute promotional video featured on the home page
Because a good video is essential for promoting a band - Automatically importing over six years of blog posts from blogger.com
Because splitting your content across 2 sites hurts your Google ranking - Promoting Facebook and newsletter signups (via iContact)
Because having a website is not enough: you need to ‘push’ your news to your audience because they may not return to your website on their own
www.RoundMountainMusic.com
The Asia Foundation wins Non-Profit Standard of Excellence Award
Our work helped The Asia Foundation earn a prestigious Non-Profit Standard of Excellence Award in the 2010 Web Marketing Association WebAwards. Congratulations to the asiafoundation.org web team including David Hirschi, Donovan Watts, and Keith Mitchell. It’s notable that most of this award-winning design work was completed almost three years ago, proving that our work remains relevant and fresh long after launch-date.
This website is powered by our custom CMS which allows Asia Foundation staff to edit virtually every page of the website without any special tools. Certain areas of the website are seamlessly integrated with WordPress, YouTube, and SlideShowPro to take advantage of these industry-leading tools for news, video, and photo publishing.
Does Gmail support HTML imagemaps?
Thank you Gmail!
Short answer: Yes!
I ran a test myself because if you search for email client support of imagemap-clicking, you’ll see everyone pointing to this article from 2007 which sadly reports that Gmail is the only significant email client that does not support HTML imagemaps.
Sometime between then and now (July 2010) Gmail added HTML image mapping support, so those of us who are in the business of designing email newsletters can rejoice and take advantage of this useful oldschool feature.
By the way, if you are an email newsletter designer and you had given up on using background images because of Outlook 2007′s terrible support in this regard, have a look at this interesting workaround.
Podcasting website for Future Primitive
Joanna Harcourt-Smith has been recording her interviews with visionaries and innovators for almost five years, so the most important part of this website redesign was to reorganize her 150+ recordings into topics and collections using WordPress. This also presented the opportunity to create a striking graphic design and logo to reflect the earthy and ambitious spirit of the project.
www.FuturePrimitive.org
To extend the reach and audience for FuturePrimitive.org, the website is now connected to Facebook, Twitter and Feedburner (email) so that followers are automatically notified whenever a new episode is broadcast. Furthermore, fans can embed individual episodes as streaming audio widgets on their own websites by copying and pasting a single line of code (as is done with YouTube videos). For example, the episode you see below was embedded by inserting this single line of code:
<script src="http://futureprimitive.org/embed.php?show=142" type="text/javascript"></script>
Using the TGFI SEO plugin for WordPress
Here’s my response to a client asking for guidance about filling in the fields offered by my favorite WordPress SEO plugin, TGFI.net SEO:
1) No need to set the TITLE if it’s the same as the name of the page. Only set it if you want to make a bigger fancier more keyword-rich TITLE. (Not a bad idea.) at the top of the page than the name of the story itself.
2) In my opinion, you can leave the KEYWORDS field blank; consensus seems to be that these are pretty much ignored by search engines at this point because of abuse.
3) Instead, make sure your most valuable keywords appear in the TITLE and DESCRIPTION fields. This counts for quite a lot with the search engines. Don’t worry about making the description field read like a really nice sentence. On the other hand, don’t turn it into keyword salad. Strike a balance.
4) If you have particular keywords you’re aiming for (e.g. Arizona Immigration) then make sure that the PERMALINK (URL) contains those keywords, even if they’re not in your title. Keywords appearing in your URL make a huge difference, so don’t just accept the WordPress-generated URL without giving it a look-over.
And just to go all meta on you, look below for the TGFI settings used on this very post with which I am trying to attract web visitors searching for tips on using the TGFI.net SEO plugin. Notice I’m using both “plugin” and “plug-in” to account for both searches.
The TGFI SEO settings for this post
Drinking chocolate recipes and building a site in 4-hours
Lately I’ve been trading Internet business consulting for exquisite chocolates made by my friend Mark Sciscenti, the man behind World Tree Chocolates.
Mark had purchased the domain name for WorldTreeChocolates.com some time ago, and last week in a frenzy of chocolate-induced mania, we planned, designed, and launched his new website in under four hours. (We cheated some by starting off with one of my favorite off-the-shelf WordPress templates.)
The site doesn’t have a shopping area yet, so you’ll have to be patient before you can purchase your own soul transporting confections from Mark. However, the website we put together does include a blog, essays on chocolate history, and best of all: chocolate recipes. You can also subscribe to his blog via email so that each of Mark’s missives are delivered directly to your IN box.
"The Ancestral Puebloan peoples (commonly known as the Anasazi) had drinking chocolate brought up from Mesoamerica for use at Chaco Canyon. The medicine people, who were also astronomers and astrologers, used this chocolate elixir only in a ceremonial fashion..."
Click here to continue reading Mark’s post on how to replicate Mesoamerican or Ancestral Puebloan styles of drinking chocolate.
Website redesign for MMD France: MindManager experts
This project involved redeploying an extensive static HTML site as a WordPress site with a brand new look and feel. MMD France is made up of a team of experts in MindManager, software used for “Mind Mapping” ideas.
www.mmdfrance.fr
To distinguish MMD from its competition, the goals for this redesign included:
- Becoming content-driven: Focusing attention on MMD’s 10 years of expertise by deploying a blog made up of tutorial videos, tips, and free “maps” for download
- Making the human connection: Demonstrating that MMD is operated by real and approachable people with unequaled experience in their field.
- Simplifying content management: Using WordPress, MMD can easily update nearly 100% of their website content using a web browser. Adding new training videos or products takes minutes.
Tutorial: How to crop images within WordPress
WordPress is great for resizing the resolution and file size of images you upload using its editor. If you upload a huge 3000 x 2000 pixel 8MB digital camera snapshot, WordPress will do the work to reduce the image to a web-friendly 600 x 400 pixel 100KB file.
And now (as of WP version 2.9) it’s also possible to crop and rotate your images from within WordPress. No Photoshop required! Watch this video to learn how.
Website for Earth Treasure Vase
For Thanksgiving Day 2009, the official website for the Earth Treasure Vase Global Healing Project was completed and published. Visit EarthTreasureVase.org to see how this interesting and profound spiritual practice was illuminated using an unusual circular introductory video and an interactive geo-tagged google map.
This site is 100% WordPress powered, meaning that as new Earth Treasure Vases are buried, the client can edit the content, photos, videos etc. without assistance.
www.EarthTreasureVase.org
Website for “under the rose”
Today I designed and donated a simple website to launch under the rose, an album featuring master oud player Rajim AlHaj and nouveau flamenco pioneer Ottmar Liebert. The musicians who recorded this album are giving it away for free in support of Direct Aid Iraq.
Click above to listen to under the rose
Website for Green Psychology
This website was designed for Jake and Hannah Eagle, co-founders of Green Psychology™. The content management system for this site is based on WordPress so that the client can easily update web pages, articles, and hosted discussions.
www.GreenPsychology.net
How to search for ‘backdoors’ in a hacked WordPress site
If your WordPress site has been hacked, then you’ve probably already been advised to:
- Backup your WordPress database and wp-content directory
- Reinstall WordPress from scratch (the latest version, of course)
- Restore your database and wp-content directory
Next, you need to make sure there are no ‘backdoors’ installed in your wp-content directory. Here are a couple of tips. They all require that you have shell (SSH) access to your server, and at least a little familiarity with the command line.
If a backdoor has been installed on your site, it is almost certainly located in your wp-content directory. The reasoning behind this is that once you discover that your site has been hacked, you will most likely wipe out every single file on your server except for your wp-content directory, where your uploads, plugins, and themes are installed.
Begin your investigation by logging into your website via SSH and changing to your wp-content directory:
cd ~/public_html/wp-content
Here’s what to do next:
1. Search wp-content for every instance of an ‘eval’ command
grep -R eval * | more
A number of plugins have legitimate uses of the eval command but if you see anything like this (especially at the very top of a .php file) OR if you see an eval anywhere in your uploads or themes directories, then you should be suspicious. And if the contents of the eval command are hidden inside of a base64_decode and/or gzinflate command like you see in the example below, then you’re definitely looking at a backdoor.
Actual example of backdoor hack inserted into the PodPress plugin
Really, the best thing to do regarding plugins is to delete your plugins directory, and reinstall your plugins from scratch.
2. Search the uploads directory for any .php files
find uploads -name "*.php" -print
There is absolutely no reason for a .php file to be living in your uploads directory. Delete any you find.
.php files should not be in your uploads directory
3. Delete any inactive themes
Backdoors may have been installed in your unused themes so delete those, including the wordpress ‘default’ and ‘classic’ themes.
If you have a local copy of your theme, delete your themes directory altogether and re-upload your theme anew.
4. Investigate all recently modified files
While it’s possible to fake the modification time of files, many hackers won’t bother. What this means is that many backdoor exploits will have a timestamp that sets them apart from your regular files. In most cases, I advise running the following command from your html root directory (usually “public_html” or “www”):
find . -mtime -10 -print
Replace 10 with however many days you want to look back. I advise going back at least 14 days beyond when you are certain your site was hacked, since a vulnerable site may be compromised multiple times in the same time period.
What you are looking for is any files that you don’t remember uploading or updating (e.g. the footer.php file in your theme) or anything like what is described above (e.g. a PHP file living in your wp-content/uploads directory, or your wp-config.php file, where exploits are often inserted).
5. Scan your WordPress database for exploits and spam
Exploits such as rogue PHP functions and new administrative accounts may live in your database, as well as spam (e.g. hidden ads for pharmaceuticals). If you’re not experienced with digging through your SQL tables with a tool like phpMyAdmin, then you will have to rely on plugins like this one.
6. Erase and re-create your .htaccess file!
In 2011, for the first time I found a WordPress hack that was completely outside of the WordPress install. This meant that even a completely clean WP install (with no themes, no content, etc.) would still contain the hack. The magic was in a couple of nefarious ‘RewriteRules’ added to the main .htaccess file that routed all traffic to the site through an innocuously named “images.php” file.
The safest route is to delete your .htaccess file (after taking note of any additions you’ve put in there like 301 redirects) and then go to WordPress Settings:Permalinks to recreate your .htaccess file anew.
7. Visit your site using a ‘google’ user agent
The .htaccess hack described above was re-writing the HTML for any page on-the-fly to insert spam links, but only if the visitor was the ‘bot’ responsible for populating Google’s search results. This meant you could only see the spam links in Google search results. If you looked at the same page using Firefox, your page and source code looked fine. To make sure that Google is seeing the same thing that you are, figure out how to change your user agent on your browser, otherwise your site may still be hacked.
How to wrap text around an image in Photoshop (Video Tutorial)
Wrapping text around objects
I just recorded a quick screencast video tutorial for a colleague on how to use paths or shapes to wrap text to avoid objects or circumscribe shapes (curve text around circles, etc.) using Photoshop CS. This is something more often done in Illustrator, but PS does the job pretty well too.
When mocking up websites in Photoshop, this is a great way to illustrate how text will flow around an inline image.
(Click here to watch. 1 min 35 sec)
Help for “bablooO” hacked / attacked WordPress Sites
Hopefully, this information will be of use to some people out there who are unlucky enough to be hit by the “bablooO” wordpress security exploit. I believe this hack can impact anyone using WordPress version 2.8.0 and earlier. See this recent advisory, which I believe is related.
If you do a ‘view source’ on your WordPress blog and you see a bunch of spammy links beginning with the comment code:
<!-- bablooO-start -->
…then here are some tips for how to recover from this problem:
- Make sure your theme is okay. If you have a backup of your theme, restore your theme from backup as your theme files themselves may have been molested. In this particular exploit, footer.php may have been rewritten.
- Don’t trust your WordPress installation. The actual core files may include injection code / backdoors. (wp-blog-header.php for example may have an obfuscated ob_start();eval(base64_decode()) call in it. The safest thing to do is:
- backup your wp-content directory and your WordPress database
- wipe out your entire installation
- reinstall the latest version WordPress from scratch
- restore your wp-content directory and database, and then examine both for any suspicious content. Here are some critical tips on how to search your wp-content directory for “backdoors”.
- Make sure your database is okay (posts/pages). One tip I read about here is to use the export function (under the WordPress admin Tools menu) to save a giant XML file of all your posts/pages/comments to disk, and then you can use a text editor to search for strings like ‘viagra’ and ‘casino’ — two words which probably do not appear on your own blog, but are very likely to appear in the hidden content of these spammy links. You will have to fix these by hand.
- Password-protect your admin directory using the .htaccess method to protect yourself from similar future exploits.
Related discussions:
http://ckon.wordpress.com/2009/06/05/bablooo-spammer-attack-on-several-wp-blogs/
http://wordpress.org/support/topic/280748
http://milw0rm.com/exploits/9110
How to remove ‘Web Hosting Provided by Bluehost.com’ WordPress footer
The Culprit
Recently bluehost made an update to their “SimpleScripts” installer so that when you install WordPress, no matter what theme you’re using, your site gets a “Web Hosting Provided by Bluehost.com” footer advertisement.
This can be pretty aggravating at first, especially since it seems like the only way to remove the promotional message is by commenting out the wp_footer() call in your theme. (Bad idea, will break some plugins.)
Fortunately, the fix is pretty easy once you know where to look:
- Go into your WordPress admin page
- Click plugins from the sidebar
- Deactivate “SimpleScripts Footer“
Shame on BlueHost for (a) forcing its clients to switch to SimpleScripts by not providing WP updates via Fantastico anymore, and (b) automatically installing and activating a plugin that ads a promotional message on the websites of paying customers.
Using free WordPress templates for fast & affordable redesigns
Here are two beautiful, highly functional, self-editable websites that were launched on shoestring budgets by making good use of off-the-shelf WordPress templates:
Deva Foundation
www.deva.org
I started off with this freely available WP theme. Then my client found a nice stock image of clouds on iStockPhoto.com that I converted into an ephemeral background. Finally, I popped in a new header graphic, improved the font styling (and IE compatibility) and integrated iContact for email newsletter signups and and PayPal for ecommerce.
Ta-da! Deva Foundation’s brand new site was completed in less than 20 hours, from concept to completion.
Maria Benitez
www.MariaBenitez.com
This website for the legendary Santa Fe flamenco dancer Maria Benitez was completed in even less time by taking advantage of the excellent — and freely available – “Yoghourt” WordPress theme.
Strip www off URLs at GoDaddy using .htaccess mod_rewrite
Here’s how to remove the www. from your domain name so that Google won’t “split” your pagerank as a result of some inbound links going to www.foo.com and others going to foo.com. (Google will see this as two separate sites.) This tip is tuned to work at GoDaddy, where using mod_rewrite can be a real pain because GoDaddy has some unfortunate default Apache settings that prevent ordinary rewrites from working properly out-of-the-box.
Add these lines to the top of your .htaccess file:
# Override GoDaddy defaults that inhibit URL rewriting
Options -MultiViews
rewriteEngine On
# Rewrite URLs to remove www from domain name
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]