Using Browser Tabs and Windows Efficiently in WordPress Development

A lot of my work in WordPress is tacit knowledge: general know-how that I take for granted, and that it doesn’t even occur to me I have. The problem with tacit knowledge in teaching is that other people might miss important things that it wouldn’t even occur to you to teach because it feels “too basic.”

So this week, I thought I’d outline something quite basic but very important: how to use browser tabs and windows efficiently. All of this you could easily figure out yourself—but on the other hand, it’s likely that you don’t know some of it, and all of it saves me hours per month. Let’s dive in!

Time-Saving Tab Management

In general, I keep a browser tab open for every individual thing I’m doing on a site.

When I work on a WordPress site I almost always have at least two tabs open: one for the admin area and one to view changes on the front end.

More generally, I keep a tab open for every individual thing I’m doing on a site, since navigating between pages on both the front and back end can be quite slow. It’s a lot quicker to have two tabs open for both adding a new plugin and editing a post (say, to add a shortcode that the plugin provides) than to navigate between them.

Two-Tab Post Editing

The first place you should be using multiple tabs is to edit your WordPress posts.. My dream is front-end editing in WordPress, but until that day arrives we’re stuck making changes in the admin area, and then viewing those changes on the site’s front end.

Don’t do this in one tab. Keep an editing tab open, and open the front end in a new tab. If your post’s a draft, clicking “Preview” will automatically open a new tab. If your post is published, go to “View Post” but right-click it instead, and select “Open in new tab”:

post_updated_new_tab

In both cases, you’ll end up with the back end and front end open at the same time, and you don’t have to wait for long page loads to switch between the two:

two-tabs

One Tab per Task

If you find yourself consistently waiting for pages to load, take a look at your tab habits.

If I’m making a lot of changes—on a client site I’ll often be installing a plugin, editing a site’s widgets, modifying its nav menu, and editing a page—I’ll likely have a tab for each, since WordPress’s individual admin pages are often very slow to load if you’re trying to navigate between them. If I want to Google something, that’s a new tab as well, since that saves me the time of navigating back to the site once I’ve got the answer.

As an illustration, here are the browser tabs I’ve got open as this article is ready to publish:

chrome tabs

Click to enlarge

In general, if you find yourself consistently waiting for pages to load when you work in WordPress, then take a look at your tab habits. “One tab per task” is quite a time-saver if you’re not currently doing it.

Managing Multiple States with Incognito Windows

You can use an incognito window to access a site as a “brand-new person,” without needing to change devices or even browsers.

An incognito window is a browser window that does not store browser cookies or search history. You can use incognito windows to create new “sessions” across all kinds of sites, without having to worry about prior state you may have accumulated on those sites.

More concisely, you can use an incognito window to access a site as a “brand-new person,” without needing to change devices or even browsers.

When would you need this? A few examples:

  1. Simultaneously viewing the same WordPress site both logged-in and logged-out. WordPress sites can look and behave quite differently depending on whether or not you’re logged in, since many caching solutions won’t cache resources for logged-in users.
  2. Logging into the same site multiple times. As an example, a client may have three separate hosting accounts with the same host, and need something done to each account. Rather than log in and out three times, you can log into each account separately with a new incognito window. The same goes for logging into multiple Twitter accounts and so on.
  3. Testing a checkout flow or registration form while logged in. Again, some checkout flows, contact forms, and other site features behave quite differently if you’re logged in. You can test them as an anonymous user with no prior state in an incognito window.

To get the same effect, I used to open sites in a second browser (Firefox), set to never store cookies or cache resources, but incognito windows are more convenient, and have the advantage that you can create as many as you want.

How to Open an Incognito Window

In Chrome, create an incognito window with Ctrl+Shift+N, or in the top-right hamburger menu:

new-incognito-window

This will create a new browser window which you can think of as its own “session” for the purposes of browser state:

incognito-window

Browser Tab and Window Keyboard Shortcuts

The following keyboard shortcuts are quite useful to me in my work. These are for Chrome on Windows; for Mac, substitute Cmd for Ctrl. Other browsers have other shortcuts, although the first three should work in any decent browser.

  1. Create a new tab: Ctrl+T
  2. Create a new window: Ctrl+Shift+T
  3. Restore the last tab you closed: Ctrl+Shift+T
  4. New incognito window: Ctrl+Shift+N
  5. Switch view to next tab: Ctrl+Tab
  6. Switch view to previous tab: Ctrl+Shift+Tab

Here’s a full list of shortcuts from Google.

In Conclusion…

Managing tabs and windows efficiently is one thing that can save you time every day you use an internet-enabled computer, and it’s especially helpful in WordPress. I hope you’ve got some new ideas, and thanks for reading!

Image credit: Christer van der Meeren


3 Responses

Comments

  • Joe Dooley says:

    Great site! Being efficient in the browser is one of the best qualities a developer can have. If your a Chrome user check out this extension. It enables you to toggle back and forth between tabs with a hotkey. The default is ‘alt + q’
    https://chrome.google.com/webstore/detail/toggle-switch-recent-last/odhjcgnlbagjllfbilicalpigimhdcll

  • violet says:

    Hi,

    I use the worksetup you’ve suggested but what drives me crazy is that I am usually editing multiple interlinked posts and the browser tabs for these all stupidly just say “edit post < website wordpress". even with a tabreformatting program that gives me three lines per tab, there's no more data coming from wordpress than this. have you found a program that either allows custom tab names or gets more post-title info from wordpress to put on the tab? thanks!

    • Fred Meyer Fred Meyer says:

      Hi Violet,

      Good question! No, I’m not aware of a way to change that, but it is true that site favicons can help tell what site you’re on.

      Fred