How To Add A vCard Download To A WordPress Site

SHARE THIS ARTICLE

vcardRecently a client asked us if we would add links to their staff’s vCards to the WordPress site that we had just designed and developed for them. We had never done it before, but it didn’t seem like a big deal. In the words of Indiana Jones—“How hard can it be?” We’ll just add the vCards to the Media Library and link to them.

We soon found a fix that wasn’t a hack and didn’t involve a plugin, but, in our case, it required several steps and there was no one place on the internet (well, we couldn’t find one) that mentioned all the steps in one article. So we decided to write one.

Step One

The first thing we found was that you cannot upload vCards (.vcf files) to the WordPress Media Library. WordPress only allows certain file types to be uploaded and .vcf is not one of them. Regardless of the method used trying to upload a vCard results in the error message “This file type is not allowed. Please try another.”

After a little research we found that by adding some code to a theme’s functions.php file we could add functionality that would support uploading a .vcf file. We added the following code to the functions.php file:

// Allow .vcf files to upload to the media library
 add_filter('upload_mimes', 'custom_upload_mimes');
 function custom_upload_mimes ( $existing_mimes=array() ){
 // add your extension to the array
 $existing_mimes['vcf'] = 'text/x-vcard'; return $existing_mimes;
 }

It worked, but not as we expected.

Step Two

In some situations, if you click on a link to a .vcf file, the vCard isn’t downloaded. Instead its contents are displayed in the browser window as text. We found that in order to force these files to download correctly we needed to make changes to the site’s .htaccess file.

We added the code line below to the site’s .htaccess file. (If you can’t find your site’s .htaccess file click on the link in the paragraph above for help.)

AddType text/x-vcard .vcf

It didn’t work.

Step Three

Refresh you browser. As simple as it is if you don’t do this stuff every day it’s easy to forget the power of a browser refresh.

After a browser refresh everything worked as expected. We are now able to upload a .vcf file to WordPress, and visitors to the site are able to download them.

Save

Save

Save

SHARE THIS ARTICLE

7 thoughts on “How To Add A vCard Download To A WordPress Site

  1. Thanks for this. Before I started messing with htaccess code, I tried uploading my vcf to my image uploads folder via FTP. This did the trick without having to mess with the htaccess file. Just copy the full url of the “image” .vcf and when the card automatically downloads.

  2. Tom,

    interesting read, and it’s certainly not only an issue for WP users.
    Looks like there’s many people looking for solutions to add .vcard files to their (not only WordPress) websites. We’ve come up with a little tool to help them do so. It would be great to get some feedback: http://gethellobox.com

  3. Hey thanks! this worked on the desktop version of my website!

    But the .vcf file wont automatically download on my cellphone..

    Do you know why?

      1. Hi Javier, glad it worked out for you. Not sure what your setup is but with Apple products contacts can be set to sync across multiple devices. Sounds like maybe it just took a little time for yours to sync with your phone. Thanks.

Leave a Comment

Your email address will not be published. Required fields are marked *