Good afternoon everybody and welcome to this special seminar on how to upgrade the Thesis theme from 1x to Thesis 2 using the Thesis Classic Skin and that’s what this next 4-6 hours is going to be about. It wasn’t necessary to have an extended conversation about how to upgrade from Thesis 1.8.4 to Thesis 1.8.5 because they were essentially the same piece of software. 1.8.5 was just a maintenance upgrade and all you had to do is install it and everything work exactly the same.
Upgrade to Thesis 2
Obviously in the Thesis theme 2, it’s not that way because it’s is an entirely new piece of software. When you install Thesis 2, it doesn’t adopt any of the old settings and there isn’t any automated way of making it take those settings. Again, there’s no automatic upgrade process.
If you’ve been watching my videos here for awhile and have a fairly simple site, you probably have already figured out how to customize it but what we’re going to be looking at today is how to upgrade a 1.x site that’s quite a bit highly customized to Thesis 2..
This the thesisestore.com site that I created as a demonstration for the eCommerce series that I taught and this is a fully customized version of Thesis 1.8.5. What we’re going to talk about here is how to convert or upgrade this site to Thesis 2.
Some of the customization will be done using the standard Thesis 2 tools and those things that don’t convert or upgrade easily will have to migrate. We’ll be doing that with custom.css, custom.php and our settings. There’s going to be a lot going on as we work our way through this.
Upgrade Resource – Design Options Checklist
The way we’re going to start off the Thesis 2 upgrade is by taking an inventory of our site. Now, I’ve created a couple of resources for your use here. One of them is this Design Options Checklist. We’ve got that in Excel format and a PDF format and this is a copy of it here, what we’re looking at.
The purpose of it is for you to be able to go through your design options on your 1.x site and essentially, write out all your design options. That way, you have something easy for you to refer back to when you are trying to transfer those options to Thesis 2 in this upgrade. That’s the first resource I’ve given you, is this Design Options Checklist both in PDF and in Excel format.
Upgrade Resource – Thesis 1 to Thesis 2 Classic Cheat Sheet
The second thing I’ve created for you is this Thesis 1 to Thesis 2 Classic Cheat Sheet. What this does is it takes you to the design options in 1.x and shows you where in Thesis Classic those options are changed.
I’ll try to remember to refer back to this throughout the course of the class but you’re going to hear me say, “we’re going to change our columns, we’re going to pop over here to the columns thing” and if it’s not clear to you, how we figure that out, that’s what this Cheat Sheet is for. It goes through all of the Design Options and shows you exactly where each of those options are set in the Thesis Classic Skin.
Obviously, this is applicable only to Thesis Classic so if you’re using somebody else’s skin, then these settings may show up someplace else. Anyway, these are tools that I’ve created for your use while you’re doing this upgrade process.
What to Inventory for the Upgrade?
In terms of taking an inventory, there are a number of things we have to inventory. The first thing is just taking a look at this theme layout. This is a two-column layout and it’s got some no-sidebars templates being used but otherwise, it’s a two-column layout.
The next thing to inventory is to take a look at your Site Options so we’ll come over here and go to Thesis and the Site Options. I didn’t do any customization to Title Tags and Robots Meta Tags are left in their default conditions, the same thing is true with Canonical URLs and the Syndication/Feed URL. To the extent that you have something there, you will need to extract it but really, all I have is additional scripts.
I have this Favicon, I want to copy that, open up in notepad and paste it there so that is my Favicon. I also have this software stat tracking scripts, that is the Google tracking scripts. I’m going to go through there and copy those and paste them in this Notepad form as well. Otherwise, I’ve got a navigation menu and I’m using the Thesis Nav Menu. Obviously, in Thesis 2, I’m going to have to convert that to a regular menu but we’ll do that here in later section.
My Home Page SEO, I left alone in this case and Windows Live Writer and Change Save Button Text are irrelevant here so really, it’s just these kinds of things that you’re going to want to copy. Once you’ve got that copied, then the big task is the design options. What I recommend that you do is open up my checklist here then just walk through step by step each of the design options, that’s how I have this laid out.
Creating a Layout Checklist
I have this laid out starting at the top, working all the way down to the bottom and going over another column, working down then over another column. So you can just work your way through this. In fact, you can open them all like that and just start filling these things out as you work your way down. This is going to speed you up considerably when you’re doing things like colors and font sizes and that sort of thing.
You may or may not need to actually write down what framework you’re using or what columns you have and that sort of thing. In any case, we’re doing a two-column layout with our content column at 600 pixels wide and our sidebars 320 pixels wide and this is our order, content on the left, sidebar on the right and we are using the Full Width Framework.
I actually have already created my own copy of this checklist for the upgrade so we’re not going to do that together but that’s what this checklist is designed for so you can go through here and get your font sizes, colors and everything else and put that in the checklist.
Header Area and Images
The next thing you want to do if you’ve got a header image is make sure you get a copy of that header image for the upgrade. In this case, I’m not actually using the header image feature. My header image here is a background image so we’ll be getting that in when we download all of our background images.
But if you’re using the Thesis Header Image function, then this is going to be the place for you to get that, it makes you download a copy of it to the computer so you have it ready or put it in your media library so that you can reference it as we move on.
Now, this site has a number of images that are being used to style it and in particular, what we’ve got is a header area background image then we’ve got this orange image that overlays over the top of that as my logo. Then I’ve got this search button image and my footer image.
Those are the images that I’m using on this site to style it. What you’re going to want to do is make sure you have access to a copy of this. What I did when I came to do this was simply, find the images on the site then open the image in a new tab and once it’s there, save that as top-background.gif.
You’re going to want to go through and do that for all the images that you have on your site and if you’re in Chrome or FireFox, you can open up your site, inspect the element and look at resources and you can see all of the images that are there.
We’ve got the footer background, they’ve got a free book although I believe that’s part of this frames, I don’t have to worry about that. I’ve got the logo, I’ve got the search button and these images here are already captured elsewhere so I don’t need to get those.
There are a number of ways that you can copy these images but you just need to make sure you have them at your disposal when it’s time to start styling.
Custom Template Configurations
Now, one of the next things you’re going to want to do is take a look at your custom template configuration. In my case, I’m using a couple of different custom templates. So first is this, No Sidebars template. I’ve got this custom template here and I also have another custom template which is this books. This is essentially a catalog page and I have another custom template which is the products page that has things like the price, shipping and a buy now buttons and everything.
So, I have 3 different custom template configurations that I’m going to need to address in this upgrade. You’ll want to take note of that as well, which custom templates you have because you have to migrate all of the settings for those custom templates as well.
Copy Original Custom PHP and CSS
But the next thing we’re going to do is get our custom.php and custom.css off of the site. I’m going to come over to the custom file editor, this is the Thesis custom file editor and go to custom_functions.php. I’m not going to make any changes here, all I’m going to do is copy all of the content and paste it.
You can see how much PHP there is in this site so there’s going to be plenty to migrate for the upgrade. I’m going to copy that. If you don’t know what this means, if you’re looking at this and you’re saying, “Holy cow, how do I know if I have custom functions on my site?” If you don’t know what this means, you don’t have any. This is the old Thesis way of customizing any.
Let’s copy that and I’m using NetBeans for this. I’m going to open up the file or create a new file and I’m going to call this my thesis-18-clipfile. All I’m doing is just cutting and pasting from this. You’re not going to want to paste this code directly into one of your active files because there are things in here that aren’t going to be appropriate so you want just some place where you can store your it while you are making it.
While I’m here, I might as well do the same thing with the CSS file. We’ll create a new CSS file and call it thesis-18-css-clip-file then come back over to the site, switch back over to custom.css and just copy all of it.
Now, you will be happy to know that the majority of this stuff is all handled easily with just Thesis settings so we’re not going to be transferring this much code in the upgrade but this will allow us to come back and reference it and see what some of our settings may have been. I’m just going to save those documents here.
Take Screenshots of Original Site
Finally, there’s one other thing that I recommend that you do and that is to take some screenshots. I use Snagit for my screenshots and I’ve taken screenshots of my home page, of a product category page, of my main catalog page and of my blog page. That way I’ll have a quick reference for what these actually look like on the original site.
We can switch back and forth between Thesis 2 and Thesis 1.8 during the upgrade so if you need to switch back and forth, it’s certainly possible. But I recommend that instead of doing it that way that you just take some screenshots and have them available for your own use while you’re doing the work. With that, you should have a full inventory of your existing site.