Kaydee Web explains how to edit page content in WordPress. I cover editing and saving in the admin area, viewing the changes on the front end and I outline the uses of the formatting tools, with quick tips throughout.
This tutorial can also be used to edit WordPress posts.
Before updating any post or page, I highly recommend you back the site up.
What you need to edit page content in WordPress
- Your login username and password from your web developer.
- The URL of your administration area (also known as web address, or possibly link).
Once you have these navigate to your URL by typing it in your browser or clicking the link. Type in the username and password and hit Log In.
You will arrive at the WordPress Dashboard.
Open your WordPress website for viewing
The first thing I do is I open the front end of the website in a new browser tab. So I have back end visible in one tab, front end visible in the other.
The easiest way to open the front end of your WordPress website in a new tab is;
- Hover over the button next to the W (for WordPress), top left of the screen. I’ve circled it in red on the image below.
- RIGHT CLICK on ‘Visit Site’ on the drop down menu. I have underlined this in red.
- Click “Open in new tab” – NB. There may be a variation of words depending on browser.
Two tabs are now open. In one, continue to edit in your admin area.
The other displays the front end of your website. Navigate to the page you are working on. As you make edits you can tab to the front end to make sure it looks perfect.
Each time you view a change in the front end, hit F5 or click refresh on your browser to view it. This jogs the browsers memory.
Editing page content in WordPress
Now you are set up, I’d like you to go to the admin area. Click PAGES on the left hand menu. The pages within your site are listed. Hovering over the name of a page makes further options visible.
EDIT will take you through to the full edit screen.
QUICK EDIT will allow you to change title, slug, date, privacy, parent, order, template and status from this screen.
BIN will send it to the rubbish bin. The post will not longer be seen on site.
VIEW will let you see this particular page on the front end.
To edit a page click the first option, EDIT. Or click on the page name. You will arrive at the WordPress page edit screen.
Editing pages in WordPress tutorial
What I must make you aware of is that themes or plugins may provide customised page edit options.
If the edit page screen doesn’t look like similar to the screen shot below, you may be using a custom builder.
Now we’ve established that you are not using a custom builder let’s get started.
The first icon I would like to make you aware of is the TOOLBAR TOGGLE icon, once called the ‘kitchen sink’. In the image above you can see it is activated, it looks like this:
This icon shows or hides extra formatting options. Keep it activated.
Formatting text in WordPress
Like most editors you can highlight text and format it.
Quick tip: Double click on one word to fully highlight it.
From left to right on the main editing bar are:
B – makes the text bold, or strong.
I – puts the highlighted text in italics.
ABC – this will add a strike, through your text, as if to cross it out. Handy for sold items.
We call this the symbol for an un-ordered list in web talk, but WordPress calls it a bullet list. Use this to create lists.
- This is the first point.
- This is the second point of order.
Click the return button each time you would like a new line, and a new bullet.
Quick tip: clicking SHIFT-ENTER creates a line break, which are useful in bullet lists, as you can drop down a line without creating a new bullet.
- This is the title of my first point.
I say a little bit about this, underneath by hitting SHIFT-ENTER .
- Now I have my second point.
A little bit about this.
To discontinue use of a list, just hit return twice after your last line or hit the icon for a second time. WordPress will go back to using a paragraph.
One thing to be aware of is that your website designer, or theme, may have style the bullet lists using CSS. You’re not able to change the style within the edit page area of WordPress.
The number list, called ordered list in web speak, is used in a similar way to the bullet list above. Except that your list is numbered.
Blockquotes indent a text line that you are working on. Again, themes or web developers may have styled these, which you cannot edit directly on page edit. So will indent both sides of a block quote, some only one side.
Next up is the horizontal line, which turns out as above.
The horizontal line is a useful tool for splitting up pages, but can again be styled by the theme or web designer, and may look different. The above is the default look, a grey line of 1 pixel.
Aligning paragraphs in WordPress
Text alignment is used frequently. However, the design of paragraphs and headings are often set in a style sheet, making these alignment buttons act a bit erratically. What I tend to do is let the style sheet govern my paragraphs, but if I add an image I will align it.
Alignment will be applied to a whole paragraph. So if you click on one line, then click an alignment tool.
Quite often, the paragraph below will follow suite when you try to align. This is usually because line breaks have been used instead of ‘paragraph’ tags. There is a simple fix. Put the cursor at the end of the first paragraph, hit DELETE, to pull the second paragraph up. Now hit enter to finish one paragraph block and start a new one. These two can now be aligned separately.
Creating and editing links in WordPress
The link icon is very useful. With it both text and images can be linked to pages and posts within your site, or a external website. To use it on text, highlight the text.
Quick tip: Double click one word to highlight it all. Hold shift down and click the second word to highlight that too.
Now click your link icon. If you are linking to a page/post on your site start typing the title. Please note, type the TITLE of the page, not the slug.
Once you find it in the list, hit the arrow at the end of the field. If you would like to customise your link, click the cog icon at the end of the field. This will open a new box called LINK OPTIONS. Here you can check a box that will make your link open in a new window, rather than same window.
Please do be aware that Google prefers that links are opened in the same window.
To link an image it is a similar process. Select the image, then click the link icon.
To EDIT links, follow similar steps. Highlight the text or select the image. Use the same icon, and change the link to the new one.
This icon complete removes the link. Just click any where on the text link, or select image, then hit this button. The link will be totally removed.
This is an icon I never ever use. In WordPress you can put text inside the READ MORE tag to hide it on the page, until the user clicks to read more. The text will still be available for search engines to crawl.
Paragraphs and headings in WordPress
The second line of the toolbar begins with a drop down menu.
To format a line, click the text in the line, or paragraph and use the drop down menu to select paragraph, heading 1, heading 2.
The styling of each heading or paragraph may already be set in your style sheet.
Use this icon to underline text in your WordPress content, making it stand out or make a statement. Just highlight the text and click the underline icon.
This next icon is also a text alignment icon, and will create a justified paragraph. Text is aligned, flush, along the left margin, and letter/word spacing will be adjusted so that text becomes flush with the right margin as well. Also known as fully justified or full justification. This is good for columns.
As a web designer I advise you use this icon carefully. As any standard text editor, this will change the colour of your text. I’ve seen before large, bright colourful words created to stand out on an otherwise well designed site. It doesn’t look good. Try to keep your text uniform.
Why have the ‘paste as text’ icon in WordPress at all? You will find that, if you copy text from another website or from Word you also copy the formatting of that text. When you paste it into your page, you paste the formatting also, and your page looks awful.
So next time you copy and paste, copy; then put your cursor in the right place and click the ‘paste as text’ tool to add text that has no formatting. Then format it yourself.
If you find your text all over the place on a page, it is often the formatting. If you know what you are doing, and you have a back up, use the clear formatting tool to take out all formatting, stripping your text back so that you can now format it yourself.
The next icon, the Greek omega opens up the character map below, enabling you to add special characters, such as acute, rave and circumflex. Useful if you are creating a multi-lingual page.
These are the indent icons. Using them you can increase or decrease the indentation of a paragraph or heading.
And finally the undo / redo icons. The one on the left is undo, and is really useful. It is darker grey in this image, because there is an undo move that I can make. The redo button is disabled, as there is nothing at this time, that can be redone. To redo, you must have undone something first.
Saving a WordPress page
Every time you make a substantial change to your WordPress content, remember to click the UPDATE button to save the page. This will update the page on the front end of the website. Always refresh your page when viewing changes on the front end.
Auto-saves and revisions in WordPress
WordPress frequently auto-saves drafts of the page. At the bottom of any page, you can see the time and date of the last “Draft saved” and the last edit, and the author, as per the image below.
Revisions of your page can be recalled, using the revisions link. It’s on the right hand side, above your UPDATE button.
Click the ‘browse’ link to view page drafts and revisions that have been stored over the life of your document.
You will arrive at the ‘Compare Revisions’ screen.
There is a time line bar at the top of this screen, representing the life of the page. The further left you take the slider, the older the revisions of the page are.
WordPress also highlights the changes that have been made, comparing the latest post to a post you choose on the time line. To retrieve your last version the slide should be all the way to the right.
Warning: editing slugs in WordPress
Slugs create the URL of the web page in WordPress. If you edit a slug you can break links to the page, so please edit with caution. I recommend using a redirect plugin if you are going to edit slugs.
You can easily put the slug back to it’s former glory. A hand tip here, would be to search the page in Google, find what the original URL was, then click into the slug box and change it back. Click OK, then save. Now go back to Google and see if the page is work.