Copying Web Page Content into WordPress

Copying web page content into WordPress is a two step procedure.

Step 1 – Copying and pasting your content

This is the easy part. There are several ways to copy content but I tend to use keyboard shortcuts so that is what I am going to demonstrate.

  1. Go to the web page you want to copy.
  2. Select the content you want–and only the content. Do not select any menus, as you need to recreate those in WordPress separately. Select content by using your mouse, click on the page where your content starts and (do not release the mouse button) drag to the end of your content. Your content should now be highlighted. If not, try again.
  3. Once your content is selected, copy the content (on a Windows PC use Ctrl+C, or on a Mac use Cmd+C).
  4. Go to your WordPress site and login (if you aren’t already logged in).
  5. In the Admin Menu go to Pages > Add New. This will create a new page.
  6. Type in a title where it says “Enter Title Here”.
  7. Select a page Template from the Page Attributes box on the right.
    Page Attributes Box
    I suggest either the “Single Column Content” or “Flexible Content” Templates.
  8. The best way to paste your content into the Editor is to use the “Paste as Plain Text” button Paste as Plain Text Button in the editor. Then either use Ctrl+V (on a Windows PC) or Cmd+V (on a Mac) to paste your content into the window that pops up. Then click the “Insert” button. This, however, strips all formatting and requires you to redo links and images completely.
  9. An alternative is to paste your content into the Editor by clicking somewhere in the Editor and using either Ctrl+V (on a Windows PC) or Cmd+V (on a Mac). After pasting your content with this method, it is a good idea to strip any extraneous tags and formatting from your code, by clicking anywhere in the editor and selecting all (Ctrl+A on a windows PC or Cmd+A on a Mac), and using the “Remove Formatting” button Remove Formatting Button. Using the “Remove Formatting” button is optional, so if you don’t want any of the formatting removed don’t use it.Wordpress Editor
    If your content appears in the editor then you are done. If not, try again

Step 2 – Fixing links and images that you pasted into WordPress

When you copy and paste web page content, you are copying links and references to images from your old web sites.

Once you paste the web page content into WordPress, you need to do a couple of things:

  1. Download all documents from your original site, if you don’t already have copies on your computer (you should always keep backup copies). Documents are all files such as doc, docx, xls, xlsx, pdf, etc.
  2. Upload your documents to WordPress or Alfresco. You can upload your documents to Media or Downloads in WordPress, or to your folder in the “Guest Home” folder of the Alfresco repository.
    Media and Downloads Admin Menu Buttons
  3. Download all image files from your original site, if you don’t already have copies on your computer (you should always keep backup copies). Images are image files usually in the following formats: jpg, png, gif. Images that are bmp or tif should be converted to one of the other formats.
  4. Upload all image files to WordPress. Images should be uploaded to Media > Add New.
    Media Admin Menu Button
    Remember to fill in the Alternate text field when uploading images. Alternate text is what is read aloud to people who use screen readers to browse the web (the visually impaired).
  5. Check all your links to see if they are going to your old web site. If you visit your web page by clicking on the “View Page” link in your toolbar, you can hover over links with your mouse cursor. You should see the web address for your links in the bottom left hand corner of your web browser window (except in Safari). Take note of any links that need to be changed. There should be no links going to any www.scc.losrios.edu or web.scc.losrios.edu web addresses. Web addresses with those web addresses will break when the domain on the WordPress site gets switched. Links that go to external sites (any link that doesn’t start with www.scc.losrios.edu or web.scc.losrios.edu) are OK. When we switch domain names, all sites and links with the www.scc.losrios.edu address will automatically be switched to the new address. If you find any links or images that need to be changed, go back to edit the page by clicking “Edit Page” in the toolbar and follow these instructions:
    • If it’s a link to a document that you uploaded to Downloads

      1. You should have already uploaded the document to WordPress, so click anywhere in the link text (you will see a blinking cursor where you clicked that indicates you have clicked in the link text). No need to select the entire text link.
      2. Then click the “insert /edit link” button Insert / Edit Link Button
      3. In the window that pops up, click on the text “Or link to existing content” to open the existing content selection area. Select the file you uploaded into the Downloads, and click the “Update” or “Add Link” button.
        Insert Edit Link Window
    • If it’s a link to a document that you uploaded to Media

      1. First we have to get the URL or web address for the Media file. In the Admin Menu, go to Media > Library, find the file you uploaded, and then click “Edit” next to it.
      2. On the Edit Media page, you will see a “Save” box on the right. Go to the “File URL” field, select the URL by clicking in the URL and using the keyboard shortcut to select all (Ctrl+A on windows PC or Cmd+A on a Mac). Then copy the URL (Ctrl+C on a windows PC or Cmd+C on a Mac).
      3. Go back to your page by going to Pages > All Pages in the Admin Menu. Then find the page you created earlier, and click on it’s name.
      4. Find the link you want to change on the page. Click anywhere in the link text (you will see a blinking cursor where you clicked that indicates you have clicked in the link text). No need to select the entire text link.
      5. Then click the “insert /edit link” button Insert / Edit Link Button
      6. In the window that pops up, paste the URL for your Media file into the URL field (by clicking in the field, deleting the default “http://” text, and using the keyboard command Ctrl+V on a Windows PC or Cmd+V on a Mac). Then click the “Update” or “Add Link” Button.
        Insert / Edit Link Window
    • If it’s a link to a document that you uploaded to Alfresco

      1. Yu should have already uploaded the document to your folder in the “Guest Home” folder in the Alfresco repository, so delete the existing link from WordPress by selecting it in the WordPress Editor, and pressing the “delete” key (may be abbreviated as “del”) on your keyboard.
      2. Then click the “Add links to documents in Alfresco repository” button Alfresco button
      3. In the window that pops up, find the file you want to link to by clicking on folders to open them, or using the search function. Click on the button Alfresco Insert Link Button to the right of the name of the file you want to link to, in order to insert a link into the Editor. Then Close the window, by clicking the “x” in the top right hand corner of the pop up window.
        Alfresco Insert - Browse Documents Window
    • if it’s a link to a web page that is in the same site as your page (page must already exist)

      1. Click anywhere in the link text (you will see a blinking cursor where you clicked that indicates you have clicked in the link text). No need to select the entire text link.
      2. Then click the “insert /edit link” button Insert / Edit Link Button
      3. In the window that pops up click on the text “Or link to existing content”, to open the existing content selection area. Select your page and click the “Update” or “Add Link” button. Use the search box if there are many pages to sift through.
        Insert Edit Link Window
    • if it’s a link to a web page that is not in the same site as your page

      1. First we have to get the URL (or web address) for the web page. Go to the web page you want to link to in a web browser. Select the URL by clicking on the URL in the Address Bar of your web browser. Use the keyboard shortcut to select all (Ctrl+A on windows PC or Cmd+A on a Mac). Then copy the URL using Ctrl+C on a windows PC or Cmd+C on a Mac.
        web Browser Address Bar
      2. Go back to your page by going to Pages > All Pages in the Admin Menu. Then find the page you created earlier, and click on its name.
      3. Find the link you want to change on the page. Click anywhere in the link text (you will see a blinking cursor where you clicked that indicates you have clicked in the link text). No need to select the entire text link.
      4. Then click the “insert /edit link” button Insert / Edit Link Button
      5. In the window that pops up, paste the URL for the web page you want to link to into the URL field by clicking in the field (deleting the default “http://” text and using the keyboard command Ctrl+V on a Windows PC or Cmd+V on a Mac). Then click the “Update” or “Add Link” Button
        Insert / Edit Link Window
  6. Change all your image files to pull files from your WordPress site. Rather than try to relink your images, it is easier to delete the old image. Then insert a new image. Here is how to do that:
    1.  Select an old image to delete, by clicking on the image in the Editor. Then delete the image by pressing the “Delete” key on your keyboard, or clicking on the “Delete Media” button  Delete Media Button that appears when you click on the image .
    2. Once your image from your old site is deleted, click in the Editor where you want to insert your new image. Then click the “Add Media” button
      Add Media Button
      Select the image that you already uploaded, making sure you have filled in the Alternate Text field. Then click the “Insert into post” button.
  7. Once you’re done making all of your changes, remember to “Update” your page to save changes.