Skip navigation

WordPress School: Two Tab Preview Method

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.You will be doing too much tab switching and opening during this year-long Lorelle’s WordPress School free online course, so let’s talk about what that is.

Tabs are mini-windows inside of your WordPress browser for holding web pages. Browser tabs were one of the greatest addition to the web browser, allowing the user to open several web pages at once and easily switch back and forth between them instead of various windows.

As you work on various WordPress assignments and tasks, you will make changes in one tab, the Administration Screens, save your work, then preview the results in another browser tab, typically on the front end view of the website.

Why would you want to use two tabs?

Working with the two tab preview method makes it easier for you to preview the post or Page before publishing, but it is faster. You don’t have to wait for the Edit Page screen to reload, the information is already in the database. Just switch to the second tab and refresh the web pages to see the changes – fast. No waiting for page loads, no clicking between front and back end views and waiting through more page loads. Fast and simple.

Screen capture of many rows of tabs in the Firefox browser.To setup the two key tabs for your WordPress test site, we do it slightly differently depending upon the version of WordPress you are using for your test site. There are currently two versions of the WordPress Admin Bar, one on existing versions of WordPress and another on WordPress.com as they work to integrate the new interface into the core.

  • Older Versions: Put your mouse on the Admin Bar where it lists your site name in the upper left cover and hold down the CTRL/CMD key and left click to open the link in a new tab, or right click and choose to open link in a new tab.
  • WordPress.com Version: Hover over the Admin Bar > View Site and hold down the CTRL/CMD key and left click to open the link in a new tab, or right click and choose to open link in a new tab.

Or you can open a new tab in your browser by clicking the + at the far right of your tab row or using the keyboard shortcut CTRL/CMD+T, and typing in the front page address of your test site.

This provides you with a front page view of your site as you work on it in the second, neighboring tab, and the backend interface of WordPress for changing that look on the first tab.

The second tab featuring the front end view of your site will change as you move through the site and work on various parts and pieces. When working on a post or Page, you can easily open a preview as you work on it.

While WordPress does its best to preview what the post will look like in the area where you write the content using the Visual Editor, it doesn’t always show you what the end result will look like on your site. Using the two-tab method, you have a chance to inspect it thoroughly before hitting publish and sending it out to the world.

Let’s put this into action and edit the About page you created earlier.

How to Use Two Tabs in WordPress

Administration Screen Terms

Lorelle WordPress School Tips and Techniques Badge.Backend: The backend view of the WordPress interface has many names. Originally it was the Administration Panels, now officially the WordPress Administration Screens. Other names include interface, backend, admin, administration, WP-Admin, and dashboard.

Front end: The front end view of a site is what the visitor sees, generated web pages. WordPress calls this the frontend or front-end view of your site, and it is also known as the front, dynamic pageview, and pageview.

Admin Bar: The black (or other color) bar that appears along the top of WordPress when you are logged in is known as the Admin Bar. Luckily for us, it doesn’t have other names though I’m sure some people have found nicknames for it.

Now that you know how to open the two tabs, let’s get to the specifics with the About Page already created on your test site. You may use any post or Page for this exercise.

  1. Edit the post or Page
  2. Click Preview Post (left click) or View Post (right click) to open the front end view of the post or Page in a new tab
  3. Without closing the tab you are on, switch to the new tab and look at the generated web page
  4. Switch back to the Edit Post or Page tab and make changes
  5. Click Save Draft or Update for previously published content
  6. Switch immediately to the second tab and reload/refresh the web page using your mouse on the menu or reload button on the browser or on the keyboard use F5 on Windows and CMD+R for Mac
  7. Repeat the process, switching back and forth as you edit and make changes. When ready, take a last preview look at the post to ensure everything looks right, then switch back to the Edit Post or Page tab and hit publish or update for the last time.

Use this same technique as you work on customizing your site from changing WordPress Themes to customizing the Widgets.

If you are working on various projects on your site, you may find yourself with many tabs open to your site. When you are done, be sure and close the extra tabs, coming back to the two you need most.

Learning to open links in a new tab will help you when it comes to researching and writing your posts as well, so practice this technique until it is second nature to you.

Preview or View Post Buttons?

From the Page (or a post) open in one tab, look for View Post and Preview. These two linked buttons allow you to easily access the front end view of your post or Page, but they work a little differently and need to be handled accordingly.

Screenshot of View Post or Preview to preview a post - Lorelle's WordPress School.

The Preview button in the Publish modular section of the Classic interface on WordPress opens in a new tab with a preview of the post or Page. Try it.

The View Post button below the post or Page title goes directly to the front end view and does not open the link in a new tab. To open it in a new tab, hold down the CTRL/CMD key and left click the bottom to open the link in a new tab, or right click and choose to open link in a new tab.

Which should you use?

Until a couple years ago, I would have said the Preview button. For the most part, while you are writing and editing a post or Page, this is still the easiest choice. However, with the addition of nounces in WordPress post and Page links, code found in the link that associates the content with a specific date and time, to keep this simple, using the Preview button may open a stored view of the web page. You may make changes in the Edit Page or Post, switch tabs, reload the page, and find that nothing has changed. This is because the pageview is locked to that time and date and not the new one. There are ways to change this that I will cover later.

If the post is new, I will use the Preview button. If editing an existing post, my new habit is to skip the Preview button and open the View Post link in a new tab. You will run into this as you work on your test site. You will recognize it when you make changes in the post or Page and nothing happens in the previewed version.

Assignment

Lorelle's WordPress School Assignment Badge.Your assignment is to experiment with using the two-tab method for your test site.

An additional assignment task is to pin your browser tabs to your browser to preserve them. A pinned tab moves the tab to the far left side of your browser tab row, locking it into place. Next time you open your browser, all your tabs will be preserved.

To create a pinned or preserved tab, right click on the tab in the tab row and choose the option from the right click menu to pin or preserve the tab. The tab will move to the left end of your tab row.

You may move pinned tabs around to organize them. I will often keep the back and front end tabs for the same site next to each other. You’ll find the way that works best for you.

Two tab method screenshot showing back and front end WordPress tabs and pinned tabs.

While you are pinning tabs, open your email web page and pin that, and your social media sites. Take a moment to pin this site to your tabs and the WordPress School Google+ Community so you are ready for your next assignments.

While you are pinning and preparing for the next lessons in Lorelle’s WordPress School, don’t forget to Subscribe by email to get immediate updates when a new lesson is published.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


7 Comments

  1. Posted February 11, 2015 at 6:30 am | Permalink

    Two new things I have learned from this course that I’m really excited about: Pinning a page to your browser (what a time-saver!) and the email plus-addressing thing (very cool tip). Thanks Lorelle!

    • Posted February 11, 2015 at 8:33 am | Permalink

      And neither of them is directly related to WordPress. LOL!

      You are rocking this course, Keri. You are challenging yourself to go deeper and wider in your experience. Well done! One of the things I love about WordPress is that it doesn’t stop at the web browser.

    • Posted February 16, 2015 at 12:03 pm | Permalink

      Thanks Lorelle! You are pretty inspiring so you make it easy!🙂

  2. Posted February 11, 2015 at 3:02 pm | Permalink

    [the addition of nounces in WordPress post and Page ]
    what are nounces?

    • Posted February 12, 2015 at 2:33 am | Permalink

      Nounce means “now once” and is used to represent a moment in time for security purposes with a randomly generated number or alphanumeric characters. I will explain them more when we get to WordPress URLs and Addresses.

  3. Posted February 24, 2015 at 8:17 pm | Permalink

    I remember how the old “Distraction Free” mode was closer to WYSIWYG when editing in visual. You still needed to preview to be sure you had what you thought you had. It seems now you can’t get that DF functionality in the classic visual editor. I don’t know what happened to it.

    Another annoyance I simply may not know how to overcome is in the classic Distraction Free visual mode (when it was there) you can’t go into preview without going back into visual mode in the classic editor. It doesn’t offer preview at the top of the post you are editing/creating.

    I use tabs all the time when researching my posts and editing them. That’s when I find in preview the “enter” key paragraph breaks don’t always “register” and I have to go into text mode and slam a line of ” ” into it to get the spacing I want. Sometimes you have to spank that WP editor into behaving.🙂

    • Posted February 25, 2015 at 5:12 pm | Permalink

      LOL! I know some others in the WordPress development community I’d like to spank…but they would enjoy it too much.

      Excellent point. I haven’t covered distraction-free editor yet. That’s coming. It once was delightful but now…you spelled it out perfectly.


7 Trackbacks/Pingbacks

  1. […] WordPress School: Two Tab Preview Method […]

  2. […] The buttons and numbers for the basic lists will not appear visually in the post text area. To see them, AVOID switching to the Visual Editor. Simply Save Draft and Preview the post using the two tab method. […]

  3. […] your content will look like when published, make it a habit to preview the post or Page using the two tab method to ensure it meets with your approval before […]

  4. […] Switch to the Edit Post or Page screen, hopefully in a tab already open […]

  5. עבודה חוקית בברצלונה

    … עבודה בארה”ב – אם בחרתם לעבוד בתחום שאינו מצריך טיסה עבודה חוקית בברצלונה, חוסכת את הליך הוויזה. האפשרויות בדרך כלל ללמוד מוצר אחד ספציפי, להתמקצע בו ולהכיר את האנשים הנחמדים בעולם. רוב הצעירי… WordPress School: Two Tab Preview Method « Lorelle…

  6. […] a WordPress site, you are constantly refreshing or reloading the web page, especially using the Two Tab Preview Method, you will use the following keyboard shortcuts, saving you time and micro-muscle movement involved […]

  7. […] two tabs next to each other, it took little or not time for most of us to develop a two tab preview method for working with WordPress, again, saving us time on the wait for a web page to reload and all the […]

Post a Comment

%d bloggers like this: