I typically use the Contact Form 7 plugin to create forms in WordPress. It easily creates forms using shortcodes to generate the input fields. One of the only limitations is that the shortcodes don’t allow you to add javascript behaviors like onClick, onBlur, etc., nor does it support the relatively new “placeholder” attribute. This becomes a problem when I want to set up a form that displays text in an input field that disappears when a user clicks on it. I do this when I don’t want to use a separate label and instead put that information in the text field itself, like “Name” or “Email” etc.

Outside of Contact Form 7 you can achieve this behavior in a few ways. You can use the “placeholder” attribute along with a script like this to add support for legacy browsers. You can also add onBlur and onFocus actions to each input field. Or you can use a jQuery script to add blur and focus behaviors.

If you stick to using Contact Form 7, there’s a way to alter the plugin code to support this feature, but I don’t like to do that because the changes get erased if you update the plugin, which a client might do. The jQuery method I mentioned above can usually be used with Contact Form 7 to make text appear and disappear. However, I ran into a problem when I tried executing this in a Woo Theme. The form code caused the code for the slider in the theme to break. After spending a lot of time trying to fix it, I found a pretty simple solution. You don’t have to use the shortcodes to get the form to work!

First, I used the shortcode to create the HTML for the input field I needed. I then replaced the shortcode with that HTML and added the javascript onBlur and onFocus actions to it. I tested the form and was surprised to find it worked! Here’s the code I used for the text field:

The only downside I can see is that there’s no way to make the field required if you set it up this way. Otherwise it works!

LinkWithin is a popular widget that not only displays links to your related blog posts at the bottom of a blog entry, but also includes thumbnail images pulled from those posts. The images make the links more enticing than plain text ever could. As a result LinkWithin has become popular among bloggers who use lots of images, particularly food bloggers.

The problem? The creators of LinkWithin seem to have moved to a shack in Montana that is completely off the grid or they just don’t care about answering support emails. Their widget is not without flaws, the biggest one being that if you change the domain name of your blog you’ll start seeing duplicate links—one for the old address and one for the new. It appears that the creators of LinkWithin manage a database or index of these links that users don’t have access to, so there’s no way to remove the duplicates. I’ve emailed them multiple times over the course of a year on behalf of several clients and not once have I received a response or even an acknowledgement that they received my email.

That’s why I’ve stopped using LinkWithin and now recommend that my clients use the nRelate Related Content widget instead. nRelate offers all the same features as LinkWithin but offers you much more control over the widget, including:

• Thumbnail image size
• Several different display options that have different borders, shadows, title palcement etc.
• Editable widget title
• Number of posts to display
• How many years of archives you’d like to pull for links
• Maximum title length
• What pages the links should appear on
• Several other options

There’s also a sidebar widget available and advertising options. If you create an account with nRelate you can access tracking stats that let you know how many people have been clicking on your links. The best part is that if you have a question their support staff actually answer you and help.

You can download the nRelate WordPress plugin here and visit their web site to grab code for Blogger or other platforms.

I recently moved a client from WordPress.com to a self-hosted WordPress installation. After I imported all her entries, I noticed that the shortcode WordPress.com had used to display her YouTube videos was no longer working. Instead, the shortcode itself was appearing, like this:

[youtube=http://www.youtube.com/watch?v=1LLls4hPEfM&w=500&h=311]

This is actually pretty easy to fix once your figure out the regular expression that can grab the YouTube video id, width and height from the shortcode. Then you add a shortcode definition to the functions.php file of your theme by copying and pasting this code:

function youtubeSC($atts) {
	$posttext = substr($atts[0],1);
	preg_match('/v\=([a-zA-Z0-9]+)/', $posttext, $youtubeID);
	preg_match('/w\=([0-9]+)/', $posttext, $width);
	preg_match('/h\=([0-9]+)/', $posttext, $height);
	
	return '<iframe width="' . $width[1] . '" height="' . $height[1] . '" src="http://www.youtube.com/embed/' . $youtubeID[1] . '" frameborder="0" allowfullscreen></iframe>';
}

Hope that helps!

Today it goes without saying that you need to put a row of social media buttons at the top or bottom of your blog posts. There are plugins and code snippets to do this for most of the major sites like Twitter, Facebook and StumbleUpon. Lately I’ve had clients ask me how they can do the same thing for Pinterest, an increasingly popular social bookmarking site that lets users pin images to their personal boards.

The Pinterest Goodies page includes code for a button, but you must individually set the image and web address to be pinned. This doesn’t work well if there are several images in a post because you’d have to make a different button for each image.

Thankfully, there is a much easier way to create a working “Pin it” button. The trick lies with the “Pin it” bookmarklet that is available at the top of the same Goodies page. A bookmarklet is just javascript code that you save as a bookmark or favorite in your web browser. When you’re visiting a web site with an image you want to pin, you click the name of that bookmarklet in your bookmarks folder and you’re magically presented with the standard pinning interface:

Since the bookmarklet is just javascript, you can use that same javascript in place of the link in any web link. The only other thing you need is a “Pin It” button, so I made one based on the images Pinterest made available on their site.

When inserting this button on your own site, please download the above image and host it on your own server. You can do this by right-clicking on the image and selecting “Save Images As…” If you try linking directly to the image on my site, the image won’t display and you’ll get an error image instead.

Once you’ve downloaded the button, here’s the code to use to make it work. Just replace YOUR-IMAGE-SRC-HERE with the address to your button:

<a href='javascript:void((function(){var%20e=document.createElement(&#39;script&#39;);e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39;+Math.random()*99999999);document.body.appendChild(e)})());'><img alt='Pinit' src='YOUR-IMAGE-SRC-HERE'/></a>

That’s it! Here’s an example of the button working right here:

One note: It’s possible that Pinterest might update their bookmarklet code in the future, so please check that you have the latest version by visiting the Goodies page. If their developers are on the ball, any old code will be compliant with future updates. But developer aren’t always on the ball, so make sure you are.

Adding custom smilies and emoticons to your phpBB forum is an easy way to insert personal style to your boards. It’s also rather easy to do once you know how. Unfortunately for me, when I searched for how to do it I got outdated information that applied to phpBB 2. I will never, ever, EVER accuse the phpBB interface of being intuitive, so figuring out how to do it in version 3 was a lot more painful than it should have been. If you’ve found this post, I hope to save you the trouble I ran into. Here’s how to add custom smilies in phpBB 3.xx.

• First off, make the actual smilies. Typically each smilie should be a 16×16 gif file. They can be animated. It helps if the file name is the same as the emotion the emoticon is expressing.
• Upload the smiles to the “images/smilies” directory of your phpBB installation.
• Log into the admin panel for phpBB.
• Click on the “Posting” tab.
• Click on “Smilies” in the left hand menu.

If you’re only adding a few smilies
If you’re only adding a few smilies, it’s probably fastest to do this individually through the phpBB interface. Click the “Add multiple smilies” button at the bottom of the page. You’ll then be taken to a page where you can select any image in the “smilies” directory and assign it a shortcode.

Hint: It’s best to create a shortcode surrounded by colons or some other marker to distinguish them from regular text, like :smile: If you just use a word, like “smile,” then anytime a visitor uses the word “smile” in a post it will be replaced by the emoticon.

If you’re adding several smilies
If you’re adding several smilies, it’s faster to create a .pak file that will import all the settings at once. You can create the proper file using Dave’s and Mykee’s *.pak Generator for phpBB 3.xx that’s hosted on RapidShare. (Click the green button in the middle of the page to download. I think they make it confusing on purpose.) According to this forum post you need VB6 runtime installed for it to work.

If you want the emoticons to show up on the right side of the screen when people are writing a post, be sure to uncheck the “Hide” checkbox on the left. Otherwise visitors will have to click a link under the regular emoticons to get a pop-up showing the extra emoticons, which sounds like a total pain. Check the “Click here!” box and you will be prompted to choose the directory that has your emoticon images. Your code will then be populated in the white box. Click the “Generate File” button to save the .pak file.

If the generator doesn’t work for you, you can make the .pak file by hand. Each line in the .pak file gives phpBB instructions on how to insert the emoticon in this format:

ImageFileName, ImageWidth, ImageHeight, Show on posts screen (0 or 1), Emotion, Shortcode

So an example line from my .pack file looked like this:

'angry.gif', '23', '19', '1', 'angry', ':angry:', 

Upload the .pak file to the “smilies” directory on your server which also includes all the smilie images. Go back to the Posting -> Smilies screen in the admin panel and click the “Install smilies package” link at the top right of the page. Your .pak file should be available to select from the dropdown. Select how you want to handle duplicate files. If you select the “Delete All” option, you will delete all other emoticons from the listings, whether they are duplicates or not. The images will still be on the server, they just won’t be listed. When you’re ready, click “Install smilies package.” That’s it! The smilies will now be active.

If you happen to accidentally delete the default smilies (not that I would ever do that), you can reimport them by selecting “smilies.pak” from the dropdown. If that’s missing from your installation, you can download the default emoticon pak here.

If you ever need to edit and delete smilie, this can also be done on the Postings -> Smilies page.

Have fun, and don’t forget to smile while you’re at it!

Today I got the phone call I always hate to get from clients. It was Stephanie O’Dea telling me her site was down. Whenever someone reports a site outage or hacking I drop everything and get on it immediately. In this case her web site had been replaced with a message saying her account had been suspended.

I immediately got in touch with the support team for her hosting company. These are the times when learn if you made a wise hosting decision, because no one wants to be left hanging when their site is down. I got in touch with a representative right away as I always have with Quality Host Online, which is why they’re one of my preferred hosting companies. It turns out they’d shut down the account because a script had sent a flurry of emails all at once. They assumed someone had hacked the account and was sending out spam.

I had a clue they didn’t though. Stephanie was particularly stressed because she’d just tweeted a link to a giveaway she was hosting on the site. You entered by posting a comment. WordPress automatically sends Stephanie an email notification when someone comments. Stephanie has a large Internet following, so hundreds of people were commenting at once, causing the blogging software to send 400+ emails in a matter of minutes. The hosting company assumed this was spam and shut down the site.

I explained what was going on and got Quality Host Online to turn the site back on, after which I immediately logged into WordPress and turned off the email notifications under Settings -> Discussion. Problem solved, all within 45 minutes.

The site crash was both good and bad. Bad because the site went down, obviously. But it was good to know that the hosting company monitors security issues like this and will be sure to shut down the site quickly if it ever does get hacked. You want to be alerted to a security breech as soon as it happens so you can minimize the damage. I’m glad to know Quality Host Online is on top of that. Now I also know to tell a client to turn of email notifications if they expect a flurry of comments to be submitted all at once.

If you are interested in my Diaryland to WordPress conversion service, you will need to get a copy of your Diaryland entries. Instructions on how to do that are included below thanks to Weetabix!

1. Log into the Diaryland account that you want archived.
2. Look at your Profile. That will tell you exactly how many entries that account has posted. I charge $0.10 per entry to be imported.
3. If you’re no longer a Gold member, then pay for a 3 month Gold membership (it’s $12) which is the cheapest tier, and then wait an eternity for Andrew to flip the switch on your account and send you the email that you’re Gold again.
4. Go to the Gold Member resources.
5. Select Download Diaryland Backup or something like that. That will trigger a giant file that may take a very long time to build. When it finishes, save that file as an .html on your harddrive. It might be helpful to rename it (YOUR NAME) Diaryland Backup.html.
6. Send it to me (via my email address on the contact page) along with your WordPress admin address and log in information. I’ll invoice you for half the fee before I start and the other half once it’s complete.

I’ve helped several clients move their sites from Blogger to a self-hosted WordPress blog. In some cases, they’ve already got their domain pointed to the Blogger blog. This makes it a bit trickier to set up the WordPress site on another host. If you try entering the domain name in the “General Settings” area, when you try to access WordPress you’ll be sent to the Blogger site instead.

Sometimes you can get around this by using the news host’s IP address amended with a folder that includes the user name for the hosting account. Such a link would look something like this: 128.128.128.128/~myusername However, not all hosts are set up like that. Some require that you have the domain pointing to the host before you can access the account via the web. Unfortunately, you don’t want to point the domain to the new host before the new blog is set up, and you can’t set up the blog until the domain points there, locking you in an endless loop.

There is a way to escape, though! You can edit the hosts file on your computer. Before daring to do this, be sure to back up a copy of the file. It’s not something you want to screw up. Your hosts file is located in a different location depending on your operating system and edition. This Wikipedia entry tells you where it’s located. I use a Windows machine, so that’s the process I’ll explain.

Windows doesn’t want you accidentally mucking around in your hosts file, so you have to open your text editor with admin privileges. To do that, right-click on the Notepad icon in your start menu and click “Run as administrator.” Then open the hosts file from the location linked to above. You might need to select “All files (*.*)” from the drop-down to be able to see the file in the list. Your hosts file should look something like this:

Editing this file will tell your computer (and only your computer) to look for the domain at an IP address of your choosing. Do this by entering the IP address of the site and then the domain name in the format displayed in the file. Hit save. That’s it! You don’t know the site’s IP address? It should have been listed in your host’s welcome email. If not, ask customer support for it.

Now when you visit the domain in question you should be pointed to your new site. You might need to clear your browser cache before you’ll get this result, or you can open up a different browser where the site isn’t cached and visit the domain there. You should be able to set up WordPress now just as if the domain were already pointing to the new site. No one else will see it until you update the domain servers via your registrar.

This can save you a lot of hassles because you can include the proper domain name in all the site settings instead of having to substitute it with the temporary IP address link which you’d have to change back after launch. Once your site is ready to launch, remove the new line from your hosts file or just comment it out. It’s pretty easy and it saves you a lot of trouble!

A client recently sent me an email asking why her RSS feed suddenly looked different. Previously her feed had displayed several buttons at the top which linked to different services she could use to monitor her feed. Now she was just seeing a drop-down box for a few services and wanted to know what the problem was.

This is a question I get from clients a lot, and the solution is one of my favorites because it doesn’t require any work on my part. All you need to do is look at your feed in a different browser. As you can see from the screenshot below, different browsers display your feed in different ways.

The feed itself is an XML file which looks something like this when you view it in a text editor and NOT a web browser:

This plain text file is pretty incomprehensible to most web users. The programmers of your browser know that, so they decided to hide the naked text and dress up the feed a bit so you can better understand it. So fear not! Your feed is fine. It’s your browser that needs adjustment.

Recently a client wanted to know if we could have the same blog appear on two different sites with two different domain names. I told her yes, we could. Then I had to go figure out if we actually could.

Yes, kids, your web designer often doesn’t know how to do something until they surf the web and teach themselves how to do it. Self-instruction and a sense of adventure are a big part of this job. The technology field is always changing and there are always new things to be learned. It’s part of the reason this job is fun, because you constantly get to solve new puzzles and do things you didn’t know you could do.

My client was Erin Bried, author of How to Sew a Button: And Other Nifty Things Your Grandmother Knew. That book was so successful that her publisher signed her to write a sister book (er, brother book?) called How to Build a Fire: And Other Handy Things Your Grandfather Knew. Erin already had a blog for the “Button” site, and since both sites have the same how-to theme, she wanted the same blog to appear on both of them.

When I’m trying to learn how to do something new, I start by Googling keywords I think will lead to the answer. This led me to discover three possible ways to solve the problem:

Option #1: Modify the database prefix

This solution required that you install two copies of WordPress on the same host using the same database. (Note: This is not the same as setting up WordPress’s multi-blog option. Instead, these are two independent WordPress installations in separate folders on your web server that are using the same database.) You can install two copies of WordPress in the same database if you specify that they use different table prefixes. By default, all the tables in a WordPress installation start with “wp_” but you can change it to whatever you want in the wp-config.php file.

After you’ve installed both copies of WordPress, you then go into your second installation’s wp-config.php file and rename the table prefix to be that of the first installation. The second WordPress blog will now draw on the data from the first installation, but will remain separate.

This solution seemed way too risky for me to try on Erin’s sites since her first website was live and receiving steady visitors. Messing with the database and the configuration files in this way left a big opportunity for things to go horribly, horribly wrong. I also wasn’t sure if such a modification might screw up any WordPress updates I’d have to install in the future. So, I continued Googling.

Option #2: Crossposting plugin

If you activate the Xpost plugin on your blog, whenever you write a post it will also be posted at another blog that you specify, as long as that blog supports posting via XML-RPC. If someone comments on that post at either site, the comment will be posted on both sites. Having two sets of duplicate data can lead to problems if things get out of synch, but this seemed to be the best solution to the problem that I could find.

I installed the plugin, but because Erin’s sites are both managed within the same WordPress installation using the multiple blog option, the plugin wouldn’t work properly. Thus, I abandoned this approach.

However, as I was Googling for the link to that plugin to include in this post, I found another plugin called Cross Post which claims to work with WordPress MU, though I can’t verify whether it works or not. Regardless, I’m glad I hit a roadblock because it led me to ultimately find a better way to solve the problem.

Option #3: Theme switching

Stumped, I went to the kitchen and made a peanut butter sandwich. By the time I was done chewing, I had thought of another approach to the problem—theme switching. The Theme Switcher plugin allows visitors to use any theme installed on your site by adding the string ?wptheme=ThemeName to the end of the query string. I installed the plugin, visited the original blog with the “Button” theme, added the proper query string to the end of the URL to display the new theme, and voila! The original blog was being displayed with the new theme!

One problem: Now all the pages on the original blog were being displayed with the new theme. Not good. Once you switch the theme, it remains switched until you change it to something else or delete the cookie stored in your browser. I didn’t want visitors of Erin’s “Fire” site to head over to her “Button” site and see the wrong template.

To overcome this issue, I wrote a snippet of code to insert into the header of the new theme that made sure to load the proper theme at the right time:

if (is_page() && ($_SERVER["SERVER_NAME"]=='www.originalThemeSite.com') ) {
	if (! empty($_COOKIE["wptheme" . COOKIEHASH]) && $_COOKIE['wptheme' . COOKIEHASH]!= 'Original theme name') {
		$expire = time() + 30000000;
		setcookie(
			"wptheme" . COOKIEHASH,
			stripslashes('Original theme name'),
			$expire,
			COOKIEPATH
		);
		$redirect = remove_query_arg('wptheme');
		wp_redirect($redirect);
		exit;	
	}
}

This code first checks to see if you’re visiting the original site (not the new one) and if you’re on a page in the site (not a blog archive, search results page, individual entry, etc. which should display the new template). This checks to be sure you’re on a page that should display the original theme, not the new one. If that’s true, it then checks to see if you’ve got a cookie from the Theme Switcher plugin and if that cookie is not set to the original theme. If that’s true, it resets the cookie to the original theme name and reloads the page.

Once those changes were uploaded, the theme switching ran perfectly. To make the link to the blog a bit easier to remember, instead of http://www.domainname.com/blog?wptheme=ThemeName I used the Redirection plugin to send any visitors of http://www.domainname.com/blog to the theme-switched address instead. The same can be achieved by editing the .htaccess file, but I like using the plugin because it allows you to make changes within WordPress without having to FTP.

One other thing to note is that if you have more than two themes installed on your multiple WordPress installation, someone could hypothetically switch the theme of the blog to any of the other themes if they know their names. In that case, it’s good to only install the themes you need, and if you want to be extra safe you can add the code I listed above into the templates of all the themes on your installation.