148 – Copy any website to a new WordPress site

I recently needed to move my New Google Sites website to WordPress.

At the current time (March 2021) and after many days of research, I could find no export/import script available.

Here are some notes on how I did it.

1. Download the original site files

You first need to download all the files used by your original site. In my case New Google Sites did not provide any way to do this but here is how I did it using Google Takeout.

  1. Go to the Google Drive used by your Google Site. Make sure your are logged as the correct site owner
    https://drive.google.com/drive/my-drive
  2. Find the website at the top level – in my case this was called ‘RMPrepUSB – Converted from Classic Sites’
  3. Right click and choose ‘Make a copy’ – wait for it to complete
  4. Use Google Takeout to make a zip file from the copied site
  5. Download the takeout zip file
  6. Examine the ZIP file – The Zip file needs to contain the html files at the top level –
    Extract the ZIP file to a new folder on your PC/Notebook and find the home.html file in the new folder
  7. Double click on the home.html file.
  8. IMPORTANT: Ensure that the embedded images point to the local files on your hard disk and NOT to Google Drive locations
  9. Finally, make a new ZIP file by selecting all the files and folders in the new folder (use Ctrl+A) – e.g.
    G:\Downloads\RMPrepUSB21022021\Takeout\Drive\RMPrepUSB Backup\Copy of RMPrepUSB — Converted from Classic Sites\DRAFT
    The new ZIP file should have all the page html files at the top level and not in a subfolder

    \home.html
    \page1.html
    etc.
    \xx\fred.jpg
    \xx\doris.jpg
    \yy\jim.jpg
    etc.

    I used 7Zip for this.

At the end of this stage, you should have a single .zip file containing lots of page html files at the top level and lots of sub-folders which contain the graphics files for each page

You will also need to download Attachments because Takeout only includes graphics files not download files or other attachments. For me, these were in a folder called ‘RMPrepUSB – Attachments from Classic Sites’ at https://drive.google.com/drive/u/2/my-drive. Note: You need to be logged in to Google Drive as the owner – e.g. xxx@rmprepusb.com (i.e. not your gmail account).

Note that any links to download files, attachments, etc. on the Takeout pages in the zip file will still point to a Google drive folder as the attachment files are not included in the zip file, even though the images will point to local folders within the zip file..

2. Upload files to WordPress

Now login to your new WordPress site and go to the File Manager from the host hPanel/cPanel (or use ftp)

Create a new folder at the same level as the wp-admin and wp-content folders – e.g. old-site or rmprep, as the folder name

Upload the new zip file to the new folder

Select the new zip file and extract it (there is usually an option for this in the File Manager)

You can delete the zip file from the WordPress folder now to save space

To test the new files, type the URL in a browser – if you used a folder name of ‘rmprep’ then type your domain followed by the file path: http://www.rmprepusb.com/rmprep/home.html

You can now add a Custom Link to your website with this URL in it to lead people to your ‘old site’

The problem with this ‘old site’ which is now on your WordPress server is that you cannot edit or add or delete any of the pages using the WordPress editor. You also cannot change the menus, etc. which were embedded into each page html file.

What we really want, is to add the pages into our WordPress site – but this must be done manually – see step 3 below.

I used an Astra theme in WordPress + Gutenberg + Elementor.

I found editor plugins can cause issues when pasting in large quantities of text in the Gutenberg editor. I recommend only adding the ‘EditorKit’ and the ‘Easy Table of Contents’ plugin. Many other editor enhancements and TOC tools caused me issues – if you want to use other plugins then add them in later!

3. Manually copy&paste each old page into a new page!

This is not as bad as it sounds. It just takes a while!

  1. Open a browser page to load a WordPress ‘Old original folder’ on your hard disk and choose any page (e.g. home.html) – Note: Do NOT use the Google Drive Site URL.
  2. Double-check – right-click on an embedded image in a page and paste the Image address into a text editor before you begin – the URL must point to your new site and NOT the Google drive site!
  3. Now you can use Ctrl+Shift+End and then Ctrl+C to select and copy just the main page content ONLY (not the menu, sidebars, footer, etc.). All text, graphics and links on the page can be selected.
  4. Create a New Page on your Word Press site and Paste in the page contents
  5. Change the page name (page title) and set the Parent Page setting in the Settings bar as required before publishing the page.
  6. Check that the images appear correctly and they point to your new folder on the new WordPress website and not to a Google drive site!
  7. Save the page – your menu can be set to automatically add in the top-level pages
  8. Note that some URLS in the pages may still point to files on the Google Drive site – e.g. download files, etc.

Repeat this process for each page you have. At least you will not have to worry about any images.

You may need to edit the new site’s menu and add in sub-pages, etc. as desired.

To prevent links, etc, from breaking, keep the old Google Drive website files on Google Drive. Alternatively upload all the Attachments files and then manually change all the google drive links to point each one to the uploaded attachment files!

If backing up the WordPress site, remember to also backup the site folder (in my case \rmprep and the attachments folder) that you have manually added.

Tricks

I found that sometimes large pages could not be Pasted into a new Gutenberg WordPress page (timeout errors), but it would easily and quickly paste into an Elementor page, so you may want to install the Elementor plugin. In my case the problems could be traced to editor plugins – if I disabled the plugins (set to deactivate) then I had no paste problems in Gutenberg.

Elementor also ‘understood’ some download forms that I had embedded in some of my pages.

Issue: If pasting into Elementor, it all seems to get pasted into one block. I used Gutenberg whenever possible for this reason.

You may wish to cut and paste from the old site to the new WordPress page in sections with one new block for each section if using Elementor.

Remove blank lines between paragraph block: If you find that a list has been split into multiple paragraph blocks, the easiest way to remove the spaces between the lines is to select all the Paragraph blocks in Gutenberg, then change the block type to List – then change the List type from bullet to ‘None’. The Editors Kit plugin is required for this trick.

You may also find it useful to use an online tool such as html-cleaner.com to remove html tags and remove spaces between lines.

  1. Select all blocks in WordPress editor – press Ctrl+C to copy
  2. Paste into html-cleaner using Ctrl+V and clean it up
  3. Select converted text and press Ctrl+C
  4. Switch back to WordPress tab
  5. Press Ctrl+V to replace all selected blocks with new text paragraph

Moved site – useful plugins

Velvet Blues Update URLs – globally change all links http://xxx.yyy.zzz to http://zzz.bbb.ccc on all pages. Case sensitive, no undo so take backup first and double-check before each operation! Saves hours of work!

Broken Link Checker – will list ALL links on whole site and report broken ones, easy to edit each link without needing to edit each page. Use Settings – Advanced panel to run new check after using Velvet Blues Update URLS plugin. Because all links are displayed, you can easily check for links which point to your old site(s).

Export All URLs – export all page and post URLs (but not embedded URLs inside pages/posts). Useful for finding all page URLs on your site.

General plugins

These plugins seem stable and useful, they are my usual set together with an Astra theme!

  • WP Sitemap Page
  • Tawk.to – Live chat widget
  • Site Kit by Google – for Google Adsense, Analytics, SEO integration
  • Sidebar Manager – manage sidebars
  • Insert Headers and Footers – easily add code into site header/footer
  • GDPR Cookie Consent – adds GDPR cookie consent
  • Elementor and Elements Kit Lite – to add Elementor editor
  • Editors Kit – adds very useful extra block controls to GutenBerg
  • Easy Table of Contents – automatically adds a table of contents to each page
  • Duplicate Page – makes a copy of posts/pages

Move Google Blogger site

Migrate Blogger to WordPress