New Userscript Restores Tabs to the WordPress Plugin Directory

One of the most common complaints about the WordPress plugin directory’s redesign is the use of read more links instead of tabs. Plugin authors and users contend that tabs make information more accessible. The redesign requires visitors to scroll a one-page design and click on various read more links to discover more information.

There is a ticket on Trac that suggests a jump section be included so that visitors can jump to specific sections of a plugin’s readme file. It’s unclear if this feature will be added but if you’d like to restore the tabbed layout to the plugin directory, check out this Userscript created by Nicolas Jonas.

According to OpenUserJS, userscripts are open source add-ons for browsers that can modify webpages as they’re loaded. Using userscripts is roughly the same as installing WordPress plugins to restore lost functionality. Jonas’ userscript source code contains a mix of CSS and jQuery to generate the tabs.

To install the Plugin Directory Tabs userscript in Firefox, you’ll first need to install the free Greasemonkey extension. Greasemonkey is a Mozilla Add-on for Firefox that allows userscripts to run in the browser.

Greasemonkey Add-on
Greasemonkey Firefox Add-on

Jonas developed the userscript in about 30 minutes and used CSS from a CSS button generator. The tabs have a blue background with white text on top. Jonas is open to suggestions and encourages those who want better designed buttons to create an issue with the proper CSS code on his OpenUserJS page.

Tabbed Layout
Tabbed Layout

I tested the userscript on Firefox 52.0.2 and didn’t encounter any issues. After navigating the plugin directory with tabs, I can easily say I prefer it versus clicking read more links. I rarely have to scroll and the information I want to see is displayed front and center. Simply put, browsing a plugin’s page with tabs is a better user experience.


14 responses to “New Userscript Restores Tabs to the WordPress Plugin Directory”

  1. Thanks for writing about my script. I feel a bit relevant now, strange because I maintain a plugin that hat 60.000+ installs ;)

    You should probably update the article and not make it look like its Firefox specific. There is Tempermoney for Chrome and other plugins for other browsers I believe.

    This was just a proof of concept and me saying:

    Hey, I know a bit of jQuery. I can can do (half baked) what they ignored to do for 6 months in a short time.

    Problem with this is according to OpenUserJS the script is only installed 38 times. Even with this post, this probably won’t get out to the masses of people who would like the tabs back.

    What is nice about the new plugin dir is that all the text from the readme gets loaded into one page so turning this into tabs was easy and switching requires no pageload. And that is in fact a true improvement to what we had before. We could, and hopefully will have this instant tabs soon.

    I just updated the script and made the styles a bit better, buttons should now have no ugly borders and outlines and are based on the styles that are already there. Also now only the active tab is blue, others are grey.

    There was a bug that the tabs were generated on the ‘advanced’ page and probably other subpages, fixed that. Another bug that it did not work on the language subdomains, fixed as well.

  2. The tabs are definitely better than the new layout. I wish the support link could go on a tab – I tend to check that one first to see whether there are a lot of outstanding issues.
    This is still a big improvement – thanks Nico.

    • I have added 3 links including ‘support’ from the sidebar to the tab bar and move directly inside the header so that tabs can have span the entire width. It’s a bit strange now because some are instant tabs and some links that open new pages.

      But this is a experiment anyway so there you go.

      I suggest you rather bookmark the support forum in your browser and visiting that directly if you want to check whats new there. I also recently found a subscribe button there. Is that new?


Subscribe Via Email

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