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(do not release the mouse button) and drag to the end of your content. Your content should now be highlighted, if not try again.
  3. Once your content is selected, on a Windows PC use Ctrl+C or on a Mac use Cmd+C to copy the content.
  4. Go to your WordPress site and login if you aren’t already logged in.
  5. Once logged in, 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 Buttonin 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 and then click the “Insert” button. This however strips all formatting and requires you to redo links and images completely.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 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” buttonRemove 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 – is fixing any 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 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.
    Media Admin Menu Button
    Remember to fill in the Alternate text field when uploading images. Alternate text is what is read to people who use screen readers( the blind ) to browse the web.
  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 and you should see the web address for your links in the bottom left hand corner of your web browser window. 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” buttonInsert / 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 and 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 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 .
      3. Go back to your page by going to Pages > All Pages in the Admin Menu and 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” buttonInsert / 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. you 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 buttonAlfresco 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 and 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” buttonInsert / 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.
        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 and using the keyboard shortcut 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 and then find the page you created earlier and click on it’s 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” buttonInsert / 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 link to files in your WordPress site. Rather than try to relink your images it is easier to delete the old image and then insert a new image so that is what I am going to show you how to do.
    1.  Select an old image to delete by clicking on the image in the Editor and 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 your done making all of your changes, remember to “Update” your page to save your changes.