Thesis Tutorial: Switching from a theme that uses a custom field for post images

Did you just switch to Thesis theme and now you’re having problems seeing thumbnail images on your teasers or other blog features? There could be a problem with your urls (if you also relocated your blog to a new domain or directory when you switched to the Thesis theme), or you might have had an old theme that stored your post image urls in a custom field, which Thesis knows nothing about (because Thesis uses its own, different snazzy custom fields). This tutorial will show you how to fix that latter problem, no matter what level of skill you have with mysql database administration. 

Fixes like this are easier than they look, and this tutorial will work for beginners and non-programmers. But remember to backup your database first! Seriously, it takes a minute or two to dump your database into a backup .sql file, and it’s the ONLY way to undertake any database changes safely. 

What’s a Custom Field and Why Did It Break My Post Images?

I recently had a client who needed me to migrate their WordPress blog to the well-known Thesis theme from another theme called Arthemia. Like many themes using the timthumb image resize script to generate cropped and resized images, Arthemia stored a post image url (the location of the image that should be the thumbnail picture for each post) in a wordpress custom field. When a user created a post, they uploaded an image and copied the url into a custom field (called “headerpix” in this particular theme) which was used by the theme’s internal php scripts to call timthumb and resize the image into a thumbnail for use in blog features like home page teasers. The problem with this approach is that loading a new theme that also uses a custom field for this purpose will require you to edit the wordpress database or else you will lose all of those urls that were hand-picked to be the main post image for all of your previous posts. 

Thesis wants your post image url to be in a custom field called “thesis_post_image” so it can grab that image url and use it to create your post thumbnail images. You could manually go back and copy/paste your old custom field value into the new Post Image field in the Thesis post administration panel OR you could enter 2 commands via the shell or phpmyadmin on your web hosting server to automatically find/replace all of those old custom fields with the field name that Thesis wants. If you want to do it the smart way, read on. 

Confirm the exact name of your old theme’s custom field

It was a simple fix once I figured out what I needed to change. The key was confirming where the old theme was storing the post image urls. WordPress custom fields for each post are stored in a table called “wp_postmeta” (if you chose a different prefix for your database tables than the default “wp” prefix, then substitute your custom prefix for “wp” in that table name). By looking at your previous posts, you should be able to find the name of the custom field with your image url in it. 

Keep in mind that a “custom field” in wordpress is NOT a field name in the database table but rather it is a pair of values stored in the meta_key and meta_value fields of the wp_postmeta table. So when we find and replace our custom fields we are actually going to be setting values in the meta_key field rather than editing the structure of the table itself. For people new to mysql, this can all sound complicated but trust me, it’s very easy. Just follow along and leave a comment if you have questions. 

Fix your Thesis thumbnail images via the command line

Step 1: Login to your web hosting shell (command line)

If you don’t have shell access, you probably have phpmyadmin (a graphical interface to manage mysql databases). Look for it in your web hosting control panel. You can’t do this stuff from within the default wordpress administration page itself. Feel free to skip ahead to the phpmyadmin instructions if you’re not using the shell at all. 

At the prompt, type this command to login to mysql: 

mysql -u username -p databasename

Press enter after that line. Don’t put a semicolon at the end of this command. Just type it like that, substituting your wordpress database user name and wordpress database name (both of which can be found in your wp-config.php file). You will immediately be prompted for a password, so enter your wordpress password and press the Enter key again. If you logged in successfully, you will get a welcome to mysql message and the prompt will change to this: 

mysql>

If it gives you some kind of warning and says Access Denied, just try again and type carefully. The command line is very unforgiving of typos so always give your commands a quick look-over before you hit the Enter key to avoid screw-ups. It’s not rocket science but does require some attention to detail (if you’re comfortable with the command line, just skim past my detailed instructions meant for newbs). 

Step 2: Replace your old custom field name with thesis_post_image using the shell

Now we just need to enter one command that will replace all instances of the old custom field name with our new field name for Thesis: 

update wp_postmeta set meta_key = replace(meta_key, 'headerpix', 'thesis_post_image');

First up, use your own table name (the default will be wp_postmeta if you didn’t change the prefix in your wp-config when you installed wordpress). Second, replace headerpix in the above command with your old theme’s custom field name (which you already confirmed the exact spelling of). Don’t forget that semicolon at the end of your sql statement. Press Enter after you’ve checked your command over. 

You should get a message that you changed a certain number of rows (each instance of the custom field, called ‘headerpix’ in our example code, will be in its own record also known as a row in mysql parlance).  Reload your blog and you should now see your image thumbnails. If you go into the post administration pages for your old posts, you will now see that there is a custom field called “thesis_post_image” which contains your image url. Congratulations! You fixed it in 2 commands. 

Fix your Thesis thumbnail images using phpmyadmin

Step 1: open phpmyadmin and get yourself to the right table

Ok, if you’re doing it this way, there is a good chance you need screenshots and will want to make SURE you are messing with the right table before you run any commands in phpmaydmin. So first we are going to get you to the correct database, the right table, and the Search tab so we can verify that the custom field name you THINK you need to change is actually there (basically we are making sure you are in the right place before we run the fix). 

Use this screenshot to help you navigate to the right place: 

verify custom field name in phpmyadmin
verify custom field name in phpmyadmin

 

The next step won’t work unless you are in the right database and table AND you have the exact spelling of your old theme’s custom image field. 

Step 2: Replace your old custom field name with thesis_post_image using phpmyadmin

This part is easy if you don’t make any typos. One crappy thing that might happen in phpmyadmin is if the script times out because it’s taking too long and your server is configured to abort mission even before the script is done updating your database. That’s just one of the many reasons I use the mysql command line interface more than phpmyadmin. 

Use this screenshot to help you navigate to the SQL tab and enter the right command. Substitute YOUR data as needed (see the command line instructions above for details about what you might need to change to make the command work for your wordpress blog): 

Fix thesis post images custom field with phpmyadmin
Fix thesis post images custom field with phpmyadmin

 

Reload your blog and you should now see the image thumbnails from your old theme showing up in Thesis. 

Please Add a Comment if you have questions, corrections, or find this tutorial helpful.

2 thoughts on “Thesis Tutorial: Switching from a theme that uses a custom field for post images

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s