Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 18 – Question and Answer Session 2

Difficulty Level -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

We’re going to stop now. Obviously, there’s more that could be done. There’s more transferring that needs to be done but at this point, it seems to me like it’s just repeating stuff that I’ve already done here so I think you understand how this works but I am going to take some questions now.

How to Upgrade to Thesis 2 Without the Site Being Down?

First question, what is your suggestion if I want to upgrade to Thesis 2 but don’t want to let my website down for anytime? The answer to that question is, you should clone your site. You should take a clone of the site you want to upgrade and put that on a development subdomain then once you’re setup on the development subdomain, make all your customization there and just export it to the new site.

That’s how I would do it say on my site or on a site that was mission critical, a site that you didn’t want to lose while you’re doing the work. I would set up a development server or development sub domain, clone my site on that sub domain, change the clone then essentially just zip up that revised skin and install it on the existing site.

Where to Find Videos About Cloning a Site Using BackupBuddy?

Member: Just a question of whether you’ve actually got a demonstration video on how to clone a site using BackupBuddy and then I guess the second question, while doing up the upgrade, is there any merit in using the full width framework as oppose to the page framework?

Rick: Well, I have a couple of seminars on copying a website. First of them is how to manually clone your WordPress website then actually, the other one is inside of the case study. We have a case study on How to Convert a Static HTML Site to Thesis. What we do is we create it on a development server and clone it in BackupBuddy and bring it to the live server so it’s kind of the reverse but it’s still the same idea so I have that stuff in a couple of different places.

Member: Great, thanks.

Full Width Framework Versus Page Framework?

Rick: And then your question was, what’s the relative merits of the Full Width Framework over the Page Framework? It’s just stylistic. The Full Width Framework lets you do stuff like this page where you’ve got a background style that stretches all the way across the page and happens up in the header but is different in the content then a whole new different one in the footer. That’s what the Full Width Framework lets you do.

The Page Framework has one body area and one page area and you can put some body background in and you can change the background up in the page but your hard press to change the background in several different places in the page version versus the full width version. As a practical matter, I never work in the Page Framework, I always work in the Full Width Framework and any skins I ever create are always going to be in the Full Width Framework because it’s just more flexible. Anything you want to do in the Page Framework, you can do in the Full Width Framework but the reverse is not the case.

Member: Okay, thank you.

Rick: You’re welcome. Have a good evening.

Member: You too.

How to Get Rid of the Text Box that Appears in the Classic Skin?

Rick: Carolyn asks, will I review again how to get rid of the text box that appears in the Classic Skin? Well, you just drag it away. It’s already gone from here but let’s create a new backup and we’ll say, End of Session 2, import some skin data and just get one of those Thesis Classic Skins, import it and now we’ve got this little text box up here. If you want to get rid of that text box, absolutely once and for all everywhere, you just grab it, drag it down near to the trash can and save your template.

If you want to use it some places but not others, you just drag it out of the templates you don’t want to use it. If it’s sitting over here on this side of the editor, it’s going to show up in the template. If it’s sitting over here, it’s not going to and if you never want to use it then you can just drag it to the trash, save the template and it will delete it from any instance that it exists.

This is a fundamental concept in how the skin editor works. Each one of these things is able to drag them out and once you dragged them out, they’re not going to show up in the template. If there’s any point in time when you don’t want something in the template, the answer is, you drag it out of the template and if you ever need it to be deleted, you just drag it down here to the trash. Now, let me just make sure I answer the question. So Carolyn, I’ve just unmuted your microphone. Hey, Carolyn.

Creating Widgets in the Widget Area

Carolyn: Hi there. That explains to me the getting rid of the text box, thank you. But then, to add a new widget area there then the next step would be?

Rick: Why do you need a new widget area?

Carolyn: Well, perhaps you don’t. Perhaps all of the plugins that you want you could put in that singular widget area you have, I guess.

Rick: Yeah.

Carolyn: So there’s really no reason why I guess why we need that. I guess I’m reverting back to the previous, before Thesis 2 where there were multiple widget areas that were on that column but I guess you truly don’t need that.

Rick: Well, it depends. This widget area or sidebar if you will, this is part of the confusing WordPress terminology but this widget area is going to be in the same place and can only be in one place on a given template so this is one sidebar. If you’ve got 3 column layout and you want a widget area in one sidebar and a widget area in the other sidebar, then you have to create a new widget area but you can have as many widgets in this widget area as you want.

Carolyn: So just a matter of creating another widget area for anytime you need that. Okay.

Rick: Well, that’s what we did here, right? I have to go back to my manager, restore End of Session 2. Remember yesterday, we put this widget in the widget area in the header.

Carolyn: Right, okay.

Rick: So what we did was create a widget area and put it in there.

Carolyn: Got it. That makes sense, I appreciate it.

Rick: And today, we just created 4 widget areas and put each one in the column.

Carolyn: Right.

Rick: It’s that procedure.

Carolyn: Okay. No, that makes sense and I appreciate you reviewing it for me. Thank you.

Using the 1.8 Version of the Site in Photoshop

Rick: You’re welcome. You bet. Have a good day. John has a question. So the question you wrote was to be clear, you’re looking at the code on the site in Thesis 1.8 and Google developer to see what style needs to be transferred to the new site in Thesis 2. Well, actually I wasn’t looking in Thesis 1.8, I was in Thesis 2. I could have switched to Thesis 1.8 but the only time I looked at the 1.8 version of the site was in Photoshop when I was looking at my screenshots.

This is the Thesis 1.8 site, I never really switched to Thesis 1.8 when I was doing this, when I was trying to figure out what thing should be, I was always in Thesis 2 here. You can in fact, switch back and forth between Thesis 1.8 and Thesis 2 if that is what you need in order to figure out what’s going on.

If we go back over here to Appearance and Themes and activate Thesis 1.8.5 then refresh it, it looks a bit different here and this is the Thesis 1.8.5 version so I could very well have said, “Okay, well let’s see. What would that really look like?” and I could’ve have inspected that element, figure it out then gone back and reactivate Thesis 2 but I didn’t do that. I just used the Photoshop file to just refresh my memory.

How SEO Settings are Carried Over When Switching from Thesis 1.8 to Thesis 2?

Okay, next question. Are there any red flags that might be bad for SEO? Well, not in switching between themes. I mean as long as you’re content is the same, if you’re switching from Thesis 1.8.5 to Thesis 2, Thesis 2 is going to carry all of the SEO settings that you made in Thesis 1.8 over to Thesis 2. And all of your custom post meta and all that kind of stuff is going to come along with it so your custom title tag and your custom meta description.

All the stuff that you’ve added to, maybe added to categories and all that kind of stuff, that’ll all come along with it including the category intros, category titles and all the category SEO stuff, all that stuff is going to stay in place when you switch from 1.8.5 to 2.

To the extent that you have the kind of site that wants to take advantage of the schema, once you’re in Thesis 2, you can do that but you aren’t going to lose any of the SEO customization that you did in Thesis 1.8.5 when you transfer over to Thesis 2. Besides that kind of thing, besides meta description and title, there really isn’t anything that is bound to the theme that affects SEO so change in the style of course isn’t going to change it.

Somebody sent me an email a couple of days ago saying, “I can’t believe this site is ranked number 1, it’s ugly”. Well, that has absolutely nothing to do with SEO, it doesn’t matter how ugly it is, it matters what the content is and that’s the same case here. Fortunately, everything you did in Thesis 1.8.5 carries across. Any other questions?

What Do I Use the Photoshop For?

No, John I was not looking at the code in Photoshop, I was just using Photoshop as a reference. I was looking at it and I was saying, okay well let’s see, what color is this thing? I mean I check the color of that for example so I use an eyedropper to grab the color so I would have that color. It’s not a question of looking at the code in Photoshop, it was a question of looking at the screenshot in Photoshop to remind me of what the site looked like in 1.8.5. It’s just a way of making it so I don’t have to switch to 1.8.5 in order to refresh my memory. I wasn’t in 1.8.5 at all when I was doing this inspecting of elements, I was always in 2 when I was doing that.

Using the Tools of the Trade

BJ asks me if I could explain how I got the code again with the Chrome tool. This tool here is the Chrome Developer tool and I believe it comes automatically in Chrome. I don’t think there’s anything you have to do to get it but the way you activate it is by right clicking on something then selecting inspect the element. Now, I have a whole series on how to do this kind of stuff with Firefox using Firebug and Web Developer.

Chrome is my preferred browser generally so I use this tool quite a bit this way but this is very similar to Firebug and Web Developer and if you watch the Tools of the Trade videos, you’ll see me demonstrating how to do this kind of stuff but essentially what this is, is this displays the HTML hierarchy so you can see each of the divs and all of those things.

As you hover over them, the screen you’re hovering over changes color and there are a couple of colors associated with it. There’s the blue which is the actual content itself, there’s the orange which is margin and there’s yellow which is padding so you can see yellow and blue there and orange and blue there. Those are the 3 colors that show up as you move your mouse around here.

How Inspect the Element Works in Identifying Page Wrappers?

What I do, I mean if you right click on this element right there, the key elements of the eCommerce site, it highlights for you down here the thing that you clicked on so it’s telling me that that’s an h2 then all I do is look at what’s wrapping it and post_content is wrapping it and what’s wrapping post_content the post-12 and div class=”content” is wrapping post-12 and div class=”columns” is wrapping content and div id=”container” is wrapping columns, div id=”content_area” is wrapping all of that stuff. That’s how this works.

I know that it takes some people a little while to get used to it but once you get used to it, it becomes pretty second nature for you to identify the thing that you’re trying to figure out, what’s its class or what selector is controlling its appearance then it also shows up pretty nicely over here on the righthand side. It shows you the actual selectors and the code that are being applied to it. This h1 headline now shows you that it’s got h1 headline, color such and such and that it’s in the css.css file which is what the that file Thesis creates.

You can see all the different parts of the code or different code definitions that are being applied to it and as you scroll down, you can see that there are some conflicting styles. There is the .post_box h1 and the .post-box .headline that are being superseded by this .post_box h1 and .post-box .headline up here so it’s just the way it works.

0 Comments… add one
0 comments… add one

Leave a Comment