WordPress School: Two Tab Preview Method  ## Metadata - Author: [[Lorelle on WordPress]] - Full Title: WordPress School: Two Tab Preview Method - Category: #articles - Summary: 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. - URL: https://lorelle.wordpress.com/2015/02/11/wordpress-school-two-tab-preview-method/ [](https://lorelle.wordpress.com/category/wordpress/wordpress-school/) You will be doing too much tab switching and opening during this year-long [Lorelle’s WordPress School free online course](https://lorelle.wordpress.com/classes-and-workshops/wordpress-school/), 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.  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](https://lorelle.wordpress.com/2015/02/06/wordpress-school-about-page/) earlier. ##### How to Use Two Tabs in WordPress **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. [](https://lorelle.wordpress.com/2015/02/11/wordpress-school-two-tab-preview-method/open_in_new_tab_options_-_web_browsers_-_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  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. [](https://lorelle.wordpress.com/2015/02/11/wordpress-school-two-tab-preview-method/two-tabs-method-tab-rows-lorelle-wordpress-school/) 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](https://plus.google.com/u/0/communities/115251582756616355670) so you are ready for your next assignments. While you are pinning and preparing for the next lessons in [Lorelle’s WordPress School](https://lorelle.wordpress.com/classes-and-workshops/wordpress-school/), don’t forget to [Subscribe](https://lorelle.wordpress.com/subscribe/) by email to get immediate updates when a new lesson is published. *This is a tutorial from [Lorelle’s WordPress School](https://lorelle.wordpress.com/classes-and-workshops/wordpress-school/). For more information, and to join this free, year-long, online WordPress School, see:*  [learn wordpress](https://lorelle.wordpress.com/tag/learn-wordpress/), [preview page](https://lorelle.wordpress.com/tag/preview-page/), [preview post](https://lorelle.wordpress.com/tag/preview-post/), [two tabs](https://lorelle.wordpress.com/tag/two-tabs/), [web browser](https://lorelle.wordpress.com/tag/web-browser/), [wordpress guide](https://lorelle.wordpress.com/tag/wordpress-guide/), [wordpress help](https://lorelle.wordpress.com/tag/wordpress-help/), [WordPress News](https://lorelle.wordpress.com/tag/wordpress-news/), [wordpress school](https://lorelle.wordpress.com/tag/wordpress-school/), [WordPress Tips](https://lorelle.wordpress.com/tag/wordpress-tips/), [wordpress tutorials](https://lorelle.wordpress.com/tag/wordpress-tutorials/). Bookmark the [permalink](https://lorelle.wordpress.com/2015/02/11/wordpress-school-two-tab-preview-method/). Follow any comments here with the [RSS feed for this post](https://lorelle.wordpress.com/2015/02/11/wordpress-school-two-tab-preview-method/feed/). [Post a comment](https://lorelle.wordpress.com/2015/02/11/wordpress-school-two-tab-preview-method/#respond) or leave a trackback: [Trackback URL](https://lorelle.wordpress.com/2015/02/11/wordpress-school-two-tab-preview-method/trackback/)., WordPress School: Two Tab Preview Method, Lorelle on WordPress, 01gnmczfvkfjenetwxrpt1agc8.