WordPress Tip: Display Viewport Resolution with the Frontend Developer Plugin

The Frontend Developer plugin is a handy little tool for WordPress theme developers who are working with media queries. The plugin hooks into the admin bar to display the current viewport resolution so that developers know what they’re working with.

The indicator automatically updates as you resize your browser window. In addition to displaying common media queries for mobile, tablet and desktop, the plugin performs some helpful checks:

Highlights defined widget areas

Highlights links that do not have a destination set

Highlights images without alt tags set

You can see an example of an image without an alt tag below, highlighted by the plugin:

The Frontend Developer plugin is a useful addition to your toolbox for theme development, as it makes it easy to define styles for various viewport resolutions. Download it for free from WordPress.org.