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.


4 responses to “WordPress Tip: Display Viewport Resolution with the Frontend Developer Plugin”

        • All that the W3 is stating there that without an alt text there is no way for people who cannot see or have images disabled to know what the image is about. That does not mean all images are required to have an alt text. Because not all images are that vital to the content, which the article I linked to does a great job describing.

          It can be put in another way, if an alt text is going to provide such a visitor with relevant information, then an alt text makes things more accessible. I would contend that for blog post images this is usually not the case. Bloggers often use decorative pictures to make people more likely to click and read and to create nicer looking design. And themes encourage featured images, so images get chosen often to make the content visually more appealing.

          People who are not seeing these images in the first place do not really benefit from having a textual description of those pictures.

          In fact the alt text could make things less accessible by disrupting the flow of reading. Take this very blog post, a screen reader would have to parse a hyphenated word “frontend hyphen dev hyphen plugin”. Best case it adds a little meta information that the reader may or may not find interesting, but if you omit it the page didn’t all of a sudden become less accessible.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: