How to edit pages in WordPress

To edit pages in WordPress you do not need to be terribly technical – if you have some experience with a text editor you will find it simple enough. The WordPress editor is used for both posts and pages.

Also see: How to edit a page name >

Edit pages in WordPress, how to here

The examples I’ve used here are in the system, but is very comparable in the way pages are altered. The post will be helpful for the two.

UPDATE. This post refers to the WordPress Classic Editor, not the WordPress Blocks aka the Glutenberg WordPress Editor which has been used since 2018. However, this post will still be useful for some.

Let’s look at what you will learn.

By the end of this post you should grasp how to format and edit pages in WordPress by:

  • Editing and saving in the admin area,
  • viewing changes on the front end,
  • and using formatting tools in the WordPress editor.

Before updating any post or page, backup the WordPress database. I use DB Migrate, a backup and migration plugin that is available for free.

What you need to edit pages in WordPress

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.

View the WordPress website in a new tab

The first thing I do is I open the public facing part of the website in a new browser tab. I then have the admin area (back end) visible in one tab, and the public area (front end) visible in the other. That way I can switch between the two.

The easiest way to open the front end of your WordPress website in a new tab is;

  • In the admin area – hover over the house icon, top left of the screen.
  • From the drop-down menu, RIGHT CLICK on ‘Visit Site’.
  • Click “Open link in new tab”. I have underlined this in red below.

NB. There may be a variation of words depending on the browser you are using.

Two browser tabs are now open, meaning that you can switch between the two.

Continue to edit the WordPress page in one tab, using the admin area.

In the other you will view the front end of your website. This is how to check each change you make.

As you make edits and save them, you can tab over to the front end of the site. Hit the F5 key to refresh the page – this prompts the browser to show the updated version.

Editing page content in WordPress

Now you have set up your work area, let’s start in the admin area. Here you will find the WordPress editor.

Click PAGES on the left hand menu. The pages within your site are listed.

Further options appear when you hover over the name of a page.

How to edit page content in WordPress

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 the page to the rubbish bin. The page will not longer be seen on site.

VIEW will let you see this particular page – the front (or public) 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 first bring your attention to is that the themes and plugins within WordPress sometimes customise the ‘page edit’ screen.

For example DIVI uses an interface called the DIVI Builder, Avada’s is called Fusion Builder.

Which version are you using?

The latest WordPress editor is the Gutenberg Block Editor. If your page looks similar to the image below, you are using blocks and you should visit my post on the block editor.

If the WordPress editor looks similar to the image below, you are using the Classic WordPress editor.

How to edit page content in WordPress

If you’re not using a custom builder we can begin.

WordPress editor button icons explained

In the classic editor, the first button icon is the TOOLBAR TOGGLE icon, once called the ‘kitchen sink’. In the image above you can see it is activated because it is clicked down.

The toolbar toggle icon looks like this:

Toggle toolbar icon WordPress

This button 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.

Unordered list in WordPress

This the button icon for an un-ordered list in web talk, but WordPress calls it a bullet list. Use this to create lists. For example:

  • This is the first point.
  • This is the second point of order.

At the end of each line, click return (or enter) 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 one 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 using a list, just hit return twice after your last line. Or hit the icon for a second time. WordPress will return to using normal paragraphs.

Your website designer, or theme, may have used CSS to style the lists. You’re not always able to change the style within the WordPress edit screen.

Numbered list in WordPress

This icon is the number list, called ordered list in internet language. It is used in a similar way to the bullet list above. Except that your list will be numbered.

WordPress Block Quotes

Block-quotes indent a text line that you are working on. Again, the theme or the web developers may have styled these, so you may not be able to style them.

Next up is the horizontal line. The horizontal line is a useful tool for splitting pages, and can be styled by the theme or web designer. The one above is the default style – a grey line at 1 pixel.

Aligning paragraphs in WordPress

Text align icons in WordPress

Text alignment is used frequently. However, layout for paragraphs and headings are often set within a style sheet, making these alignment buttons act a bit erratically.

What I tend to do is let the stylesheet govern my paragraphs, but if I add an image I align it within the WordPress editor.

Click on a line of text then click an alignment tool. Alignment will be applied to a whole paragraph.

Quite often, the paragraph below will follow suit 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.
  • Now hit DELETE (backspace) to pull the second paragraph up.
  • Hit ENTER to finish one paragraph and start a new one.
  • The two can now be aligned separately.

Creating and editing links in WordPress

WordPress link icon

The link icon is very useful. Both text and images can be linked to pages, posts or an external website.

To link text in WordPress, be sure to highlight the text first.

Quick tip: Double click one word to highlight the whole word. 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.
NB. type the TITLE of the page, not the slug.

Edit a WordPress page title

Once you find the page on the list, hit the blue ‘return’ arrow at the end of the field to apply it.

If you would like to customise the link more click the cog icon at the end of the field, before clicking apply.

This will open a new box called LINK OPTIONS. Here you can more easily choose the page you would like to link to.

Not recommended, but links can open a new window (or tab). Just check “Open link in a new tab” within the link options screen.  Google penalises links opening a different window – users must be able to make that decision.

Creating a WordPress link

A quick tip: In the latest version of WordPress, when linking text you don’t even have to press the link icon. Copy the link to your clipboard, highlight the text and press control-v to paste the link.

Linking an image in WordPress is a similar process.

Select the image, then click the link icon. Follow the steps above.

How to edit a link in WordPress

To EDIT links, follow similar steps.

Highlight the text or select the image. Either use the same icon, and change the link to the new one. Or click the pencil icon that appears once the link is selected.

How to remove a link in WordPress

Remove link in WordPress

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 use. WordPress enables you to put text inside a READ MORE tag, hiding it on the page until the user clicks to read more. The text will still be available for search engines to crawl but Google does not appreciate hidden content.

Paragraphs and headings in WordPress

Within the  toolbar you will see 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 is likely to be set by your theme, so changing it is not recommended. Just use the right headers in the right places and ask your website designer to change any design elements.

What is SEO writing?

More formatting tools in WordPress

Underline text in WordPress

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.

Justify text in WordPress

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 great for text within columns.

Text colour in WordPress

As a WordPress web designer myself, I advise you use this icon carefully. Like any standard text editor, this will change the colour of your text. I’ve seen 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.

Paste as text in WordPress

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.

Clear formatting in WordPress

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 backup, 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, grave and circumflex. Useful if you are creating a multi-lingual page.

Special characters in WordPress
Tab Left and Tab Right WordPress Formatting

These are the indent icons. Using them you can increase or decrease the indentation of a paragraph or heading.

Undo, redo icons in WordPress

And finally, the undo/redo icons. The one on the left is for undoing and it 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 that I can ‘redo’ at this time. To redo, you must have undone something first.

Save a WordPress page

When you make substantial changes to your WordPress page or post click the UPDATE button to save the page. This updates the public-facing page. Always refresh your page when viewing changes on the front end to check your work.

Auto-saves and revisions in WordPress

WordPress frequently auto-saves drafts of the page.

Revisions of your page can be recalled, using the revisions link. It’s found within the POST settings. If the post settings are closed hit the cog, top right to open them up. Then hit the Page tab (or Post tab depending on what you are editing) at the top.

  • Click the ‘Revisions’ link to view drafts and revisions that have been stored over the lifetime of the document.
  • You will arrive at the ‘Compare Revisions’ screen.
  • There is a timeline 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 highlights the changes that have been made, comparing the latest post to a post you choose on the timeline.
  • To retrieve the most recent version move the slider all the way to the right.
Compare revisions in WordPress

Editing permalinks in WordPress

Permalinks – also known as slugs – create the URL of the web page in WordPress. Links to the page can be broken when you edit a permalink, so please edit with caution.

If you are going to change and edit permalinks I recommend using a redirect plugin like Redirection.

A quick tip: If you’ve made an error and changed a permalink but can’t remember the original URL – search for the page using Google search. Add the company name to the search and you will probably find the original URL listed. Change the permalink back to the original name.

Final word

I hope you’ve enjoyed the post. WordPress can be frustrating if you do not understand what you are working with. I’m sure these instructions will help you along with the rest of the WordPress tutorials on my blog.

Share and Enjoy !

3 thoughts on “How to edit pages in WordPress”

  1. Harry Karanassos

    This is an exellent post explaining many of the mysteries associated with WP. It is a great pity that drawings/graphics are missing (I get a
    small square with a white diagonal on its lower right) and also that screnshots are of very low resolution. would it be possible to help me with those?
    Do keep up the good work.
    May thanks & Regards.

    1. Hi Harry! Thanks so much for your comment, as it really helps to know if images are missing. I have added them all back in now, sorry it took a bit of time. I will be continuing to improve this post, as you think it is so helpful.

      I use low resolution images so that they download faster, but I agree. Some here might be over done! Working on it 🙂

      Regards, Kelly

Leave a Comment

Your email address will not be published. Required fields are marked *