There are three methods of moving the content from the HTML site here into WordPress and they all involve cutting and pasting. We will discuss all three methods but the final third method being presented is my preferred method.
First Option for Copying Content to New Site
The first method is to copy the HTML from the source, paste it into a code editor, clean it up, manipulate it and then once it’s ready to go paste it into the WordPress text editor. This is the method you would use if there was important HTML that you wanted to retain.
View HTML Site Page Source
We’re going to take a look at that right now on this site by viewing the page source. We’re not going to paste the whole source because the whole source doesn’t really matter. Right now we’re working on the content of that front page so we’ll scroll through till we get down to that part. Here it is, it starts with this div right here.
You can see in this source there’s just a ton of inline styles and HTML and my guess is you’re going to want to clean up most of that. But we’ll begin by selecting the source for that front page content and then copying it.
Use HTML Editor
Then open up an HTML text editor. Those of you who have seen me present similar tutorials know I like to use Netbeans for a text editor. It’s a free resource but there are all kinds of HTML editors available.
You just open up a blank HTML template in Netbeans and then between the body tags paste this content. Here is where you would go through the process of getting rid of some of the miscellaneous stuff.
Remove Unwanted Content
For the time being I think we will get rid of all these special class names. So copy that class name, use the ctrl H function to find them and then replace them with nothing. So having replaced those we end up with a bunch of these tags with a little bit of space but that’s okay. It doesn’t really matter, it will still continue to work.
Obviously we don’t need to have this line break in WordPress, so delete that and we’ll do ctrl+H again. I’ve got to get that closing double quotes and then replace it with nothing. So we got rid of all those and then I’m going to do the same thing with this here. We’ll replace all of those with nothing
We obviously don’t need this so we can delete it. Then as we work our way down here you can see we’ve got some more classes. Let’s do another control, copy and then search and replace all with nothing.
As we go through this process of getting rid of all of these extra classes we can delete this whole list of spaces. We’ve got some more classes yet to remove and we can just delete that span and then another class.
As you can see this is a time-consuming way to solve this content transfer. But let’s just finish it up. There’s just the last one yet. It’s not uncommon in these older HTML files to have a bunch of inline styles like that and to also end up with a whole bunch of these elements that are empty.
Now we’re going to come along here and delete these things too. Get rid of all the span tags and all the closing span tags and then all the br tags. And then we’ve got some parent.
So we have gone a long ways to cleaning this up. These are all these empty paragraph tags too. And we can get rid of all of these non-breaking spaces. They’re just going to get in the way in WordPress because WordPress automatically adds those. We’ll get rid of all of these empty heading tags.
Unfortunately, having everything be an h2 tag doesn’t work for SEO. H2 tags were used on this page for styling. It’s not appropriate use of HTML any longer so this isn’t how I would do it but if you were going to do it this way, you can now copy from the opening div and the closing div because you don’t want to insert a body tag in there.
Once you’ve got that copied, come back over to your WordPress editor. Switch over to the text view and paste it. If you paste it in the visual view, it’s got all kinds of weirdness because of image mapping and some other things that this actually doesn’t deal with very well. Plus it’s got absolute positioning which makes it all move around funny.
Let’s get rid of that div at the bottom. Parent closing divs can be a problem. It’s starting to look like something but still, it’s got all those other inline styles that are total pain in the butt. Pardon me, I’m just going to delete all that go back to our visual view that’s one way to get rid of those styles.
Now if there’s HTML that is critical for you or that you feel like it would take you longer to replace than it would be for you to clean the file up, you’d still probably use this method.
Second Option for Copying Content to New Site
A second method would be to use the HTML editor to clean up the HTML. You don’t actually have to view the source in that situation.
Use HTML Editor to Clean up HTML
Let’s copy that because that’s our text. Come back over to and we’ll do this in the visual view now. Paste it in the visual view and then come back over to the text view and clean it up.
Obviously cleaning it up in the text editor is a way bigger pain than cleaning it up in HTML editor because you don’t have the same functions for search and replace in the WordPress text editor that you have in your HTML editor. So that’s the second way.
Third and Preferred Option for Copying Content to New Site
The third way is the way I prefer and that is to copy the content from this view then open up a text-only text editor or plain text editor. In Windows that can be notepad, Mac users have something else, textwrangler or something.
Why Using a Plain Text Editor Is Preferable
You just paste it in without any of the HTML. This is just straight text, no HTML, no formatting, no nothing. This is actually what I prefer because I think cleaning up the HTML is way more difficult than simply replacing it especially since so much of it we want to be different.
Structure the Main Page
We’ll just start that way. The other thing i want to do here is change the name. I don’t want this to be called the homepage. I want the heading for this to be Help Solve Your Problems with Hypnotherapy. So instead of home page, I’m going to do that with it. And I’ll use that as my h1 tag.
So now that I’ve moved everything over, we need to look at what it is she wants to do. So we get down here and we go to top of page. Let’s view our source for go to top of page. You can see it’s got this link system in here so what I’m going to do is copy this, just the link not the h2 or the span and come over to here and replace that.
We’re not going to use this ID for our link, what we’ll do is we use ID header. Most Thesis Skins have a box at the top that has the ID of header. Well let’s get rid of the style also.
View the page, get down and go to top of page and it takes us back up to the top. Because at the very top we’ve got this div class container and then inside of div class container we have div ID header.
Eventually our menu is going to be elsewhere so it doesn’t really matter that it’s not the top. We could always add an ID to the container instead, but since we haven’t decided what Skin we’re going to use, I think we are better off just using the ID header that’s already in place.
Now that we’ve got that in place I’m going to copy that and everywhere we’ve got go to top of page. I’m going to replace it with that and actually since we know they want it to be aligned center, we may as well just go ahead and add alignment center to this while we’re at it. Alignment center and now I’m going to copy it again and from now on automatically have the alignment center in it.
Add Headings and Links in Main Page
Next let’s come back over and look at this. She’s got this “for a free phone consultation” and she has that as an h2. I don’t think I would make that an h2 because that’s not a good heading. We’ll style this text when we style Thesis so we’ll just leave “for free telephone consultation call” alone for the time being.
And then “What can Hypnotherapy do for you”, that is an h2 tag and that is an appropriate h2 tag. All of these headings about what hypnotherapy is and can do are all going to be h2 tags. So we’ll come back over here and we’ll look for those. And we’ll make all those h2.
Really these here are headings and I would make those headings 3. We’ll take these and make them heading 3s. So we’ve got our big title and then we’ve got our h2 tags and h3 tags. Now we’ve got all our headings set up correctly.
Then let’s take a look at what else we’ve got that need work. Let’s look for any other links on this. We missed the go to top of page here at the bottom. And then it looks like we also missed this free telephone consultation.
And that just about covers it. I think we’ll put this content in the footer when we start building it out so we’ll let that go.
Let’s see this page. It looks like everything that is happening here really should be styled. None of this stuff should really have heading tags in it. This should be a link, right? It’s a link to page 2, our clinic locations page. Okay, let’s create that.
Let’s come back over here and edit. We’ll create that with CSS. Come back over to this view and we’ll make those into a list. So we’ve got that as a list instead and all of this text will end up being styled next week. So let’s see, let’s upload that.
Ally seems to think that you can do a search and replace in the text view. Let’s see, ctrl+h, nope that’s not there. You know, Ally, I think the only way you can do a search and replace inside the WordPress editor, is if you’ve got a plugin that adds that ability to the text view of the editor.
If I use ctrl+f I can definitely say ul and my browser will take me there but that’s not a search and replace function. It’s just a find function and it finds it all over, not just inside the body of the content.
There may be plugins out there that give you that ability in the text view. It doesn’t do any good to do it in the visual view even if you could have it because the visual view doesn’t read the HTML. It’s not one of the default buttons in the visual editor. The last way I showed you is probably the fastest way to handle this kind of thing but whichever way works for you is fine.
Add No Index to Duplicate Content
There are two things I wanted to do with these pages that I haven’t done yet. Let’s go back over here to all pages.
The first thing I want to do is make my front page above the fold no index because it’s going to be represented on the front page, so its content will be indexed on the front page. So I don’t want this page to be indexed. They don’t want it to show up in a sitemap. So we’re going to say no index, nofollow, noarchive for this page and we’re going to do the same thing with the blog page because at this point we don’t really have blog posts.
Come down to noindex, nofollow, noarchive of this page and since this is the blog we’d probably better come over to Thesis and do that in the Thesis. That’s going to be a blog page SEO. No, there’s no place to put that no index, no follow in the blog page SEO. Let’s go look and see whether or not it actually does have it anyway.
Go to blog and view the page source. No those meta tags do not show up in the blog page so we’re going to have to use our sitemap page for doing that. We’ll be working on that coming up later. So we’ll have to remember to use our sitemap plugin into to block off the no tags for the post page since we’re not using it.
We could come over here to hello world though, and edit that post and make that no index. I’m not going to get rid of hello world because I think it’s better for WordPress to actually have a post in there even if it’s never viewed or used. The underlying assumption in WordPress is that there’s always one post.
Add Clinic Page and Content
Then the last content we have is the clinic’s page and we haven’t even created that page yet. So we’re going to add a new one. This is going to be the Clinic Locations. I’ll publish that.
Let’s copy the content for Clinics. Again, I’m going to put it here in the text editor. And paste it. I really think the only thing that we need to do with this is add those click for maps. We’re not going to put these in boxes currently. I’m going to show you how to do that in an upcoming session.
Then we come back over to the live site here and copy link address. Return paste it. We’ll just repeat that process for the rest of them. We can just update this. Let’s view the page and see if it works. Yes, it does.
We have more styling to do and we still need to create some boxes and that sort of thing but we’ll get to that in an upcoming lesson.