WordPress | Editing Images and Copy on a website
DSB Marketing and Communications
15 steps
57 seconds
Mcmaster
1
Connect to the VPN and log in to the website. Navigate to your website URL + /wp-admin. For example <https://cpa.degroote.mcmaster.ca/wp-admin/> Follow the steps to login and complete your 2FA code.
There are two ways to edit pages: Backend: 1. Go to [[Pages ]]in the dashboard. 2. Click on the title of the page you want to edit. 3. Use the editor to modify text, add images, or change formatting. Frontend (ie. the visible website): 1. Navigate to the page you want to edit 2. Click "[[Edit Page]]" in the top menu 3. Use the editor to modify text, add images, or change formatting.
Below outlines the [[Frontend ]]version, as it is a simple approach for new users
2
Navigate to the page you would like to edit. Click "[[Edit Page]]". This brings you to the backend of the website, and allows you to make changes to that specific page.
Updating or Adding an Image
3
To make a change to an existing image, you must locate it on the website backend. If there is already an image there, you will need to click the [[X]] to remove it.
4
Once the image is gone you will click "[[Add Image]]" to access the media library and choose something for the space.
Tip! The steps below are also for all net-new images too.
5
If your photo is not in the media library already, you will need to click "[[Upload Files]]" and add it.
6
Once loaded, select your photo from the library of assets.
7
Before you add it to your page, it is imperative that you click the "[[Alt Text]]" field and write an appropriate description of the image. **Keep the alt text brief but descriptive, providing essential information about the image**. Aim to convey the image's purpose or content in a few words or a short sentence. Accurately describe the image: Describe the image's content accurately and avoid using generic or vague phrases.
A sample of good ALT text for the GDPA website image below is:\ \ *A group of DeGroote GDPA students collaborating on laptops in a classroom setting, focused on their learning tasks.*
8
Once you are done writing your ALT Text, click "[[Select]]" to add the image to the website.
9
If that is your only update, you can click "[[Save]]" to publish your changes. The use the [[box/arrow icon]] beside save to preview the page in a new tab.
Do a hard refresh on the new page to force the content to re-load: Chrome/Firefox/Edge: [[Hold down Ctrl and press F5]].\ Safari: [[Hold down the option and command key then press the ‘E’ key]].
10
Navigate to the portion of the page the image is on to ensure it updated.
Updating or Adding Copy
To get started editing copy, you navigate to the page you want to edit the same way you would for an image. Backend: 1. Go to [[Pages ]]in the dashboard. 2. Click on the title of the page you want to edit. 3. Use the editor to modify text, add images, or change formatting. Frontend (ie. the visible website): 1. Navigate to the page you want to edit 2. Click "[[Edit Page]]" in the top menu 3. Use the editor to modify text, add images, or change formatting.
11
Click "Edit Page"
12
Scroll down the page until you find the area you want to edit. For this example, we are adding missing copy to the "[[Program Office Content]]" block. We click into the content block and type out "[[McMaster University]]" at the end of the first line.
It is important to note, if you copy/paste content it can carry over formatting. To get around this ensure you right click on your mouse to use "[[Paste Special]]" and choose "[[Without Formatting]]". You can also do this with the short keys: [[CTRL ]]+ [[Shift ]]+ [[V]]
13
Before hitting "[[Save]]" which will publish the page, you can use the "[[View in new tab]]" box/arrow icon to preview your changes.
14
Once you satisfied with the work, click "[[Save]]" to publish your changes. And preview the page you edited.
Do a hard refresh on the new page to force the content to re-load: Chrome/Firefox/Edge: [[Hold down Ctrl and press F5]].\ Safari: [[Hold down the option and command key then press the ‘E’ key]].
15
Navigate to the section of the page where your changes should be to check your work loaded. Then you are done!
WordPress | Editing Images and Copy on a website
DSB Marketing and Communications
15 steps
57 seconds
Mcmaster
1
Connect to the VPN and log in to the website. Navigate to your website URL + /wp-admin. For example <https://cpa.degroote.mcmaster.ca/wp-admin/> Follow the steps to login and complete your 2FA code.
There are two ways to edit pages: Backend: 1. Go to [[Pages ]]in the dashboard. 2. Click on the title of the page you want to edit. 3. Use the editor to modify text, add images, or change formatting. Frontend (ie. the visible website): 1. Navigate to the page you want to edit 2. Click "[[Edit Page]]" in the top menu 3. Use the editor to modify text, add images, or change formatting.
Below outlines the [[Frontend ]]version, as it is a simple approach for new users
2
Navigate to the page you would like to edit. Click "[[Edit Page]]". This brings you to the backend of the website, and allows you to make changes to that specific page.
Updating or Adding an Image
3
To make a change to an existing image, you must locate it on the website backend. If there is already an image there, you will need to click the [[X]] to remove it.
4
Once the image is gone you will click "[[Add Image]]" to access the media library and choose something for the space.
Tip! The steps below are also for all net-new images too.
5
If your photo is not in the media library already, you will need to click "[[Upload Files]]" and add it.
6
Once loaded, select your photo from the library of assets.
7
Before you add it to your page, it is imperative that you click the "[[Alt Text]]" field and write an appropriate description of the image. **Keep the alt text brief but descriptive, providing essential information about the image**. Aim to convey the image's purpose or content in a few words or a short sentence. Accurately describe the image: Describe the image's content accurately and avoid using generic or vague phrases.
A sample of good ALT text for the GDPA website image below is:\ \ *A group of DeGroote GDPA students collaborating on laptops in a classroom setting, focused on their learning tasks.*
8
Once you are done writing your ALT Text, click "[[Select]]" to add the image to the website.
9
If that is your only update, you can click "[[Save]]" to publish your changes. The use the [[box/arrow icon]] beside save to preview the page in a new tab.
Do a hard refresh on the new page to force the content to re-load: Chrome/Firefox/Edge: [[Hold down Ctrl and press F5]].\ Safari: [[Hold down the option and command key then press the ‘E’ key]].
10
Navigate to the portion of the page the image is on to ensure it updated.
Updating or Adding Copy
To get started editing copy, you navigate to the page you want to edit the same way you would for an image. Backend: 1. Go to [[Pages ]]in the dashboard. 2. Click on the title of the page you want to edit. 3. Use the editor to modify text, add images, or change formatting. Frontend (ie. the visible website): 1. Navigate to the page you want to edit 2. Click "[[Edit Page]]" in the top menu 3. Use the editor to modify text, add images, or change formatting.
11
Click "Edit Page"
12
Scroll down the page until you find the area you want to edit. For this example, we are adding missing copy to the "[[Program Office Content]]" block. We click into the content block and type out "[[McMaster University]]" at the end of the first line.
It is important to note, if you copy/paste content it can carry over formatting. To get around this ensure you right click on your mouse to use "[[Paste Special]]" and choose "[[Without Formatting]]". You can also do this with the short keys: [[CTRL ]]+ [[Shift ]]+ [[V]]
13
Before hitting "[[Save]]" which will publish the page, you can use the "[[View in new tab]]" box/arrow icon to preview your changes.
14
Once you satisfied with the work, click "[[Save]]" to publish your changes. And preview the page you edited.
Do a hard refresh on the new page to force the content to re-load: Chrome/Firefox/Edge: [[Hold down Ctrl and press F5]].\ Safari: [[Hold down the option and command key then press the ‘E’ key]].
15
Navigate to the section of the page where your changes should be to check your work loaded. Then you are done!
