Build Your Own Business Website header image

Website Review – – Part 9 – Convert the Site to Thesis 2.1

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some protected content!

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

The final thing I’m going to do now that the website review is done is demonstrate how quickly Faris’ site can move from the Headway theme into the Thesis 2 Theme. I believe that 15 minutes from now this is going to be a Thesis 2.1 site and look essentially the same as it looks here.

Faris will get access to all the stuff that he needs in terms of Search Engine Optimization and that sort of thing and then he has control over how the site looks but it’s not going to be a big graphic change.

Deactivate Plugins

We’re just going to come on over here to the dashboard and the very first thing I’m going to do is come over to Plugins and deactivate a couple. I’m going to deactivate All in One SEO Pack, it wasn’t being used anyway. Actually I’m going to deactivate these other things that aren’t being used, I’m going to deactivate all of those.

Download, Install and Activate Thesis

So now that plugins are deactivated, we’ll come on over to Appearance and Themes and oh, there’s a bunch of stuff in here. At your leisure Faris you should just go through and delete most of this stuff. Don’t delete Twenty Twelve or Twenty Thirteen but you should delete pretty much everything else because those are all potential security risks so I would delete all the rest of that.

Then we’re looking for Downloads and Thesis. So we’ll install Thesis, we’re going to activate it, we’re going to go ahead and update to the latest version since we don’t have that currently. In fact, while we’re at it we’re also going to come over to WordPress and update it to the latest version.

Install the Carta Skin for Thesis 2

Then we’re going to come over to Manage Skins and we’re going to install the Carta skin for Thesis 2. Okay, choose the file and then let’s go over to Carta’s latest version. We’ll activate that skin and now let’s just see what it looks like.

Adjust Column Layout and Header

Okay, so I should have looked at that green color before we did thi Let’s go over to the Editor and in our Typical Header, we are going to say 2 columns where it’s three quarters one quarter, header image and then this one is going to be a widget area, okay save that template.

Actually, I forgot we need to go back over to the site and go to our Media Library, come down and to the header, let’s see this one looks like it maybe the latest, 940 by 252. Let’s see, what are my other sizes, 983, 934. I think this one is closer to the size we want so we’re going to copy this one.

We’ll come over here again back to Typical Header, paste that there and save our template. Let’s refresh our template. Okay, holy smokes, why would that happen? It almost looks like the front page is using a different header. It’s not, so my browser is just showing me the browser cache.

Dynamic page generated by WP-Super-Cache, you know I got that stupid thing deactivated. It is preventing me from seeing the uncached page. Let’s go to Plugins for a second, make sure I’ve got it deactivated. Let’s update WP Super Cache see if we can purge the cache. Okay, Settings, WP Super Cache, caching off, delete the cache.

Adjust Color Options

Now we should see what this really looks like. There we go. So we may as well make this our dark color and this our light color, let’s see what is that color, 1319074. So if we come back over to Skin Design, grab our ColorScale, let’s look at the system status for a second just to make sure okay, it’s writable.

Okay, everything’s working fine so back to Skin Design, ColorScale and let’s see what is that color really like here? Okay sort of a darker green, see if we can find that here. I don’t know maybe one like this? Let’s see how that looks. Okay, maybe that little too bright.

Then we’re going to take this Main Menu and make its submenu width 250 pixels and maybe what we’ll do is just grab these two colors. So that color right there is going to be my medium background and then this color right here will be the light background. Let’s see how that looks. I do like that though so we’re kind of close here.

Here’s the call to action. We could choose to lighten this background up quite a bit, we could just take that. Actually I’m going to get Faris back on the phone here. Faris? I just unmuted your microphone again.

Faris: Yes. I’m here.

Rick: Yeah, so is this close to okay?

Faris: Yes, very good.

Add Clickable Phone Number

Rick: So what we’re going to do then is just do you already have a phone number you want to put in here for a clickable phone number?

Faris: Yes I do, my own.

Rick: Okay, let’s do that. Let’s go over to Appearance and Widgets and we are our in Header Right Widget Area and we’re going to come over to grab a Text Widget. Then we’ll say a href=”tel:+ and then it’s 44 or 044?

Faris: Well because it’s a UK so 077

Rick: That’s the UK, 077?

Faris: No, the UK is 44

Faris: Put brackets or do you want to do straight 77?

Rick: Yeah so 77

Faris: 53, 922, 538

Rick: Okay and then we’ll add that actual phone number in here which is 77 in a bracket, is that what it is like this?

Faris: No bracket. 077

Rick: Oh, 077 okay. So I need to come over here to that too. 077 okay and then what?

Faris: 53

Rick: Do I have any brackets or anything like that now?

Faris: No, no

Rick: A space?

Faris: You know, 53

Rick: 53

Faris: Space 922 538

Rick: Is that another space or is this the same one?

Faris: No, no space.

Rick: 538.

Faris: Correct yeah. 0 will be in the bracket if you want you know, where 0 is in the brackets.

Rick: So like this?

Faris: Yeah. Is this going to be clickable.

Rick: It will be clickable, yeah.

Faris: Don’t put brackets there.

Rick: Okay.

Faris: Just 0, yeah.

Rick: Well, because this section of it is the part that the human reads so it should be formatted just like a typical UK phone number.

Faris: That’s it, that’s right then yeah.

Rick: Then we’ll just say Call for an Appointment. Well actually Call for a Free Evaluation.

Faris: Call for a Free Evaluation, that’s correct.

Rick: Okay, let’s see what it looks like now, Call for a Free Evaluation. Then what we’re going to do is come down to this Header Widget Headings and let’s make it 24 pixels. We’ll center it. Let’s just see what happens here. I want this phone number to be centered also so what I’m going to do then is come down to my layouts, down to my two column header right column and I’m going to say center align that content. Say okay to that and save design options. I suppose we’re just going to make that phone number larger too actually.

Faris: Larger yeah.

Rick: We’ll just come back down to widget areas and header widget text and we’ll make it 20 pixels. So there you go that’s now on every page and we can dress that up other ways but in terms of being set up here, it’s ready for you to add to it now. I don’t think you’re going to use a feature box so I’m just going to take that out of the front page.

Faris: Right.

Create a Backup Template of Old Front Page Layout

Rick: Because you don’t really need the feature box there anyway. Actually, what I’m really going to do here is I’m going to create a custom template, “Old Front Page”. Create the template, oh select the front page, copy that template into it so now we have the old front page set up if you want to ever get back to it but then go to the front page and just drag the feature box out of here, Save the template.

Faris: I’m going to have virtual office telephone number very soon so I’ll be able to edit the “Call for a Free Estimate”.

Rick: Okay let’s see, somebody else in the UK says, “You drop the 0 if you’ve added the 44”.

Faris: Oh, right okay.

Rick: So thank you Angie I appreciate that, so no 0 there and no 0 there. There we go.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment