You might be wondering how you write or edit pages and see how they look at the same time. Some people like to use the Preview Page button which is located on the right side navigation in the Publish tab — to the right of the Save Draft button. They write or edit their page or post and when they want to see what it looks like, they click the Preview button. This feature is very helpful for when you’re working on an unpublished or draft page and also works for live pages.
Working With Two Browser Tabs
Another way to do this (and my personal preference) is to utilize two separate browser windows — one displays your WordPress admin screen and the other displays the page you’re working on. I find using two browsers to be a little confusing and somewhat a bit of extra work, so instead I use one browser window with two tabs. I can then click back and forth between my workspace and my page or post using my browser tabs which look like this:
To help keep from confusing myself I have a “system” which I stick with for working. I login to my WordPress admin and go to the page or post I want to work in — or start a new one. This displays the “Edit Page” tab on my left which I can see in my browser tabs. I then open a new browser tab (I use the Firefox browser for working) and go to my live page (it doesn’t work this way if your page is not already published) and this tab is always the one on the right — it displays my page title without “Edit Page”. I then simply click back and forth as I need to.
There’s a Trick to Previewing a Live Page
After I make my edits and I want to see what it looks like on my page, I click the browser tab that displays my page (in my case the one on the right). Now the trick here is that just because you made some edits doesn’t mean it’s going to magically show up on the page. You have to make it do this and how you accomplish this is to click over to the page, click and hold down your keyboard’s SHIFT key and while you’re holding the SHIFT key down, click your browsers Reload or Refresh button. Your page will reload and you should be able to then view your changes.
Keep in mind these are the keys to click and hold if you use the Firefox browser. These keys may be different in other browsers such as Internet Explorer for example, but I haven’t used Internet Explorer (eeeks!) for developing websites in years so I’ve forgotten what the keyboard combination is. The keys may be different but the fact that it works remains the same.
A Few Words on Editing & Saving Your Work
By default WordPress saves revisions of your work as you go along. This is a safety measure so you don’t lose a page full of work if something goes kafluey. It saves these revisions every few minutes — I haven’t calculated the time interval or looked it up but I want to say every 5 minutes or so — but don’t quote me. I’ve made it a habit to save my own revisions as well.
If you wish to save your own revisions and your page or post is not yet published you’d click the Save as Draft button. If you’re working on a live page, you will click the Update button on your right in the Publish area of the navigation.