A hack to use the classic editor in WordPress.com

As of March 13, 2015, the “Edit in classic mode” button for editing WordPress.com posts has disappeared without notice, and worse yet, they have no intention on bringing the button back.

I don’t know about you, but I prefer to edit using the classic interface. If you’re on WordPress.com and prefer to use the classic interface like I do, you’re in luck. I just wrote a user script to force a redirect to the classic interface.

To use the script, you’ll need an add-on for your browser that will run user scripts, like Greasemonkey for Firefox or Tampermonkey for Chrome. Greasy Fork has a list of these add-ons; just install one for your browser if you don’t already have one.

Once you have the add-on, you can install the script on Greasy Fork.

The script’s source is on GitHub.

EDIT: You do not need to know how the code works in order to use it. I’ve included it here for those who are interested.

What is a user script?

A user script is a snippet of custom JavaScript to run on a Web page. User scripts allow the user to customize the behaviour of the page and even automate certain tasks.

The code

Here is a snapshot of v1.0.2 of the code (the current as of this post):

// ==UserScript==
// @name        WordPress.com edit post redirects
// @namespace   tpenguinltg
// @description Redirects the new post page to the classic post page
// @include     https://wordpress.com/post/*
// @version     1.0.2
// @updateURL   https://github.com/tpenguinltg/wpcom-edit-post-redirect.user.js/raw/master/wpcom-edit-post-redirect.user.js
// @homepageURL https://greasyfork.org/en/scripts/8581-wordpress-com-edit-post-redirects
// @homepageURL https://github.com/tpenguinltg/wpcom-edit-post-redirect.user.js
// @grant       none
// @license     MPLv2.0; http://mozilla.org/MPL/2.0/
// @copyright   2015, tPenguinLTG (https://tpenguinltg.wordpress.com/)
// @run-at      document-start
// ==/UserScript==

var parsedUrl=window.location.pathname.match(/(\d+)\/(\d+|new)/);
var blogid=parsedUrl[1];
var postid=parsedUrl[2];

// Function by dystroy. From http://stackoverflow.com/a/14388512
function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }//end if
        }//end if
    };//end onreadystatechange()
    httpRequest.open('GET', path);
    httpRequest.send(); 
}


// Redirect to post URL based on API results
// API docs: https://developer.wordpress.com/docs/api/
fetchJSONFile("https://public-api.wordpress.com/rest/v1.1/sites/"+blogid, function(data) {
  var postURL;

  if(postid == "new") {
    postURL=data.URL+"/wp-admin/post-new.php";
  }//if
  else {
    postURL=data.URL+"/wp-admin/post.php?post="+postid+"&action=edit";
  }//end if

  window.location.replace(postURL);

});

The Metadata Header: Lines 1–14

// ==UserScript==
// @name        WordPress.com edit post redirects
// @namespace   tpenguinltg
// @description Redirects the new post page to the classic post page
// @include     https://wordpress.com/post/*
// @version     1.0.2
// @updateURL   https://github.com/tpenguinltg/wpcom-edit-post-redirect.user.js/raw/master/wpcom-edit-post-redirect.user.js
// @homepageURL https://greasyfork.org/en/scripts/8581-wordpress-com-edit-post-redirects
// @homepageURL https://github.com/tpenguinltg/wpcom-edit-post-redirect.user.js
// @grant       none
// @license     MPLv2.0; http://mozilla.org/MPL/2.0/
// @copyright   2015, tPenguinLTG (https://tpenguinltg.wordpress.com/)
// @run-at      document-start
// ==/UserScript==

This is the user script’s metadata block.

The important lines to consider here are the @include line and the @run-at line. @include indicates what pages the script should run on; that is, if the URL of the pages matches the given expression, the script will run on that page.

Extracting IDs: Lines 16–18

var parsedUrl=window.location.pathname.match(/(\d+)\/(\d+|new)/);
var blogid=parsedUrl[1];
var postid=parsedUrl[2];

Every WordPress.com blog has a unique identifier associated with it, and every post has an identifier that’s unique within the scope of its blog. These identifiers are just numbers, so it makes it really easy to parse.

The URL for editing a post in the new interface looks like this:

https://wordpress.com/post/45771113/2758

The first number (45771113) is the blog ID. The second number (2758) is the post ID. To extract these values we use a regular expression.

var parsedUrl=window.location.pathname.match(/(\d+)\/(\d+|new)/);

window.location.pathname returns the part of the URL after the domain (i.e. /post/45771113/2758), the part that is relevant. The regular expression (\d+)\/(\d+|new) matches a string of numbers, followed by a /, followed either by another string of numbers or new.

Broken down:

(\d+)
\d matches a digit from 0 to 9. + means “one or more”. The use of parentheses “captures” the matched string so that it can be referenced later.
\/
A literal slash, /
(\d+|new)
The | means “or”, so this matches either a sequence of numbers or the word “new”. Again, the output is captured because of the parentheses.

The match function returns an array. The first element (index 0) is the whole string matched, and subsequent elements are the captured strings in order of appearance.

var blogid=parsedUrl[1];
var postid=parsedUrl[2];

The Ajax Caller: Lines 21–23

  // Function by dystroy. From http://stackoverflow.com/a/14388512
  function fetchJSONFile(path, callback) {
      var httpRequest = new XMLHttpRequest();
      httpRequest.onreadystatechange = function() {
          if (httpRequest.readyState === 4) {
              if (httpRequest.status === 200) {
                  var data = JSON.parse(httpRequest.responseText);
                  if (callback) callback(data);
              }//end if
          }//end if
      };//end onreadystatechange()
      httpRequest.open('GET', path);
      httpRequest.send(); 
  }
  

This code was taken directly from StackOverflow with some added comments for readability (credits to dystroy for the code; licensed under the CC-BY-SA 3.0). This sets up an Ajax request to the specified path (lines 31 and 32), parses the response as JSON (line 26), and feeds the parsed data into the specified callback function (line 27).

Definitions:

Ajax
A method of retrieving data without reloading the page. It’s an acronym for “Asynchronous JavaScript and XML” This is used in things like Infinite Scroll on WordPress.com, and extensively so in things like modern Web-based email clients.
JSON
An acronym for “JavaScript Object Notation”, JSON is a data format originally derived from JavaScript’s object notation (hence the name). It is used as an alternative to XML for relaying data.

Redirection: Lines 38–50

  // Redirect to post URL based on API results
  // API docs: https://developer.wordpress.com/docs/api/
  fetchJSONFile("https://public-api.wordpress.com/rest/v1.1/sites/"+blogid, function(data) {
    var postURL;

    if(postid == "new") {
      postURL=data.URL+"/wp-admin/post-new.php";
    }//if
    else {
      postURL=data.URL+"/wp-admin/post.php?post="+postid+"&action=edit";
    }//end if

    window.location.replace(postURL);

  });
  

This is the part of the code that initiates the Ajax request and handles the returned data. It relies on the WordPress.com API for site information so that, given a blog ID, the user can be redirected to the proper blog.

  fetchJSONFile("https://public-api.wordpress.com/rest/v1.1/sites/"+blogid, // [...]
  

The URL given there is the way to get the needed information about a blog given its ID. The fetchJSONFile will GET the data from this URL and parse it as JSON.

The rest of the code is the anonymous callback function that handles the returned data:

  var postURL;

  if(postid == "new") {
    postURL=data.URL+"/wp-admin/post-new.php";
  }//if
  else {
    postURL=data.URL+"/wp-admin/post.php?post="+postid+"&action=edit";
  }//end if

  window.location.replace(postURL);
  

Remember up in lines 16 and 18 how we matched either a sequence of numbers or the string “new”? There are different URLs for making a post from scratch and editing an existing post. If the regex matched “new”, then we should redirect to the new post URL (line 42). Otherwise, the regex matched a sequence of numbers, the post ID, so we should redirect to the URL that will allow us to edit the existing post (line 45).

The actual redirection is done in line 48. Using location.replace as opposed to location.assign will replace the page’s entry in the browser history; pressing the Back button will go back to the referring page, not the redirecting page. Using location.assign would mean that you’d be redirected again if you tried to use the Back button.


The script may look a bit long, but it’s conceptually fairly simple, and it will spare you the annoyances of the new posting interface.

Anyone wanting to voice concerns on the new editor and stats page, please make a post in the forums (thread for the new editor: [link]; thread for the new stats page: [link]). These hacks shouldn’t be necessary since it should be the WordPress.com team responding, but in the meantime, they’re here for you to ease things while we wait.


Advertisements
91 comments
  1. Reblogged this on Denny Sinnoh and commented:

    Although I am not a “hacker” I would like to share this recent post by my friend and fellow WordPress blogger “The Penguin”.

    I am also concerned that WordPress has been changing its interface to a less usable form. I hate the new Stats page, and I never use it. Apparently you cannot use the “classic” text editor anymore, as Mr. Penguin-san explains here.

    One of the distressing things about getting older is that change occurs. In fact the rate of change seems to be increasing with the passage of time. So often these changes are not improvements however. Things are just different, not BETTER.

    … and by the way … Where are my car keys? …

    … and how do you work this damn thing? … why does it have to be so damn complicated? …

    … and What? What is those … MONKEYS? Turn that junk off.

    … can’t I get just a HALF a cup of coffee?

    … you kids get off my lawn …

    … where’s my car keys?

    Kids: If you ever find yourself referring to someone as a “whippersnapper” you know you are in trouble. You kids may not have to worry about that so much yet … yet you may want to use this method in order to use the old editor. I sure wish I could : (

    … where’s my car keys?

    • I do want to stress that you don’t need to know how the code works in order to use it. All you need to do is install the add-on, then install the script.

  2. Thank you so much for writing these user scripts for us. I’m using it now and it’s much better than the previous option of WP using cookies to remember that we prefer to use the classic editor for new and editing older posts. Cheers!

    • You’re very welcome! I wasn’t willing to put up with the new editor and I couldn’t be the only one, so being the programmer than I am, I was up for the challenge.
      The mere fact that they used cookies instead of a server-side preference shows that they planned to replace the classic editor.

      • I really can’t thank you enough. Your script works so much better than cookies (I delete mine often). Hope others use your script, too. I’ve never used the “BBB, too-blue-to-use” editor and certainly didn’t want to start having to use it. With your script, it saves me so much time having to look up really old posts that need editing via the WP-Admin page of our Published posts. And I do a lot of editing of older posts. Thanks again!

  3. Wow, thanks!!! I already had Tampermonkey installed for something else (absolutely no idea how it works) so your install was a piece of cake. Being forced to deal with Beep Beep Baloney again was sending my blood pressure through the roof. Unfortunately, I’m afraid this latest gambit by WP means the classic editor’s days are numbered.

    • You’re welcome! As Jeremy Duvall pointed out in a forum post, they have no plans to remove the classic editor; after all, it’s a part of core WordPress (case in point: the really old stats page, accessible through [Dashboard > Site Stats]). However, that doesn’t mean that it won’t be difficult to get to.

      • I’ve had the classic editor bookmarked for one-click access, but that didn’t help when I wanted to edit something. Your script solved that problem before I’d even worked up a full-blown tantrum. :) Thanks again.

  4. Thanks for this. The script works wonderfully. I’ve just encountered one small error: The New Post button on the blue admin bar in the Reader still goes to the Beep Beep Boop. The one in the blue admin bar of My Sites doesn’t though.

    It seems the two screens use a different URL for that button: On My Sites it’s https://wordpress.com/post/blogID/new, while on the Reader screen it’s https://wordpress.com/post

    I don’t know if it’s something you can fix (and I really wouldn’t expect you to as it already works perfectly everywhere else), but you strike me as the type of person that would want to know about this.

    • You’re welcome! I noticed that bug earlier this morning actually. I plan to fix it later today. Thanks for the heads-up.

      • You actually have me interested now in learning how this works. I last tried my hand at programming in high school, sixteen years ago. We used Turbo Pascal on DOS. (The internet was still something strange and wonderful back then and our computer science curriculum barely mentioned it. Wow! Now I feel old.)

        But never too late to learn, right?

      • I would highly encourage it.

    • This is harder than I thought. Apparently, to get someone’s primary blog, you need an API key. The next best thing is to wait for the page to load and grab the fallback edit link. I’ll see what I can do.

    • Alright, I’ve added that redirection. To get the update, you can wait for the script to update itself or reinstall the script to get the update right away.

      • I hope you didn’t spend all day working on this! I’m sure all of us could have lived with just avoiding that one button, but you rock! Thanks again for fixing what WP.com shouldn’t have broken in the first place.

      • Ah, don’t worry. I spent only about half an hour on it. I’ve been busy writing posts for one of my other blogs (using the classic editor, of course).

  5. Sylvia said:

    Thanks!!! I use the edit button from posts constantly to update. This is a real help to me!

  6. THANK YOU for this! I edit my posts a lot (and I really dislike the inane beepy-boop editor), and thanks to you I can once again use the edit link to do it, instead of going through the dashboard. :mrgreen: Three cheers!

  7. I can’t thank you enough for writing this fix. I followed your instructions precisely, simply added Greasemonkey to Firefox, clicked your install above – and voila! It works! You’re brilliant! :-)

    I’ve bookmarked this link to use on my laptop too.

    I’m so fed up with the way WordPress has been “improving” their interface. It’s beyond comprehension. Why do they feel the need to “fix” something that’s not broken?

    I’m just scared that eventually they’ll remove the classic editor altogether and then all the fixes in the world won’t work.

    • I’m glad I could help. I highly doubt they’ll remove the classic editor because it’s a part of core WordPress. Case in point: the core stats page is still available even after two newer versions.
      Jeremey Duvall, one of the staff at WordPress.com, has also said in the forum thread:

      I noticed several of you are worried that we’re planning to remove the Classic Editor. Please know that is not the plan. Also, I didn’t address any issues with the stats page. Please open a new thread if you have specific issues with that interface.

      I’m collecting all the workarounds into a single page for ease of sharing and I’ll post it when it’s ready. Keep an eye out for it.

      • Excellent. I shall follow your blog to keep up.

        I did notice that WordPress have improved their new stats page so it’s much more similar to the classic version (though it’s still missing some features). But in that case, why did they “improve” it to start with? The mind boggles…

      • It’s hard to believe they intend to keep the Classic Editor when they are systematically removing access to it. But I’ll keep using it as long as it’s available.

  8. Dennis said:

    I can not thank you enough for this script. The new editor is annoying as hell and when they removed the link to the classic editor, my feeling was that this would be the end of my time in the wordpress community. I would not write with the new editor. Then I found your script in the forum. Seriously, anybody should know about it…

    I just posted a how to about your script on my blog as I am aware that quite a lot of my readers want to use the classic editor as well: http://diaryofdennis.com/2015/03/24/how-to-force-a-redirect-to-the-classic-wordpress-com-editor-interface/

    Again, thank you so much. This script will help a lot of people to enjoy blogging again! Thank you.

    • As much as none of this would be necessary if the WordPress.com staff would just bring back the preference, it makes me happy that people find my script invaluably useful. Enjoy the script, and I hope your readers will find it useful as well!

      • Dennis said:

        I do aboslutely agree with you but I did fight for the classic pages over a half year now in the forums and I am really sick of reading the bigheaded staff answers. Things get only worse.

        As they mentioned the old editor will at least stay “in the background”, I saw the potential of a redirect script. In fact, I always hoped that one of the people in the community would have scripting knowledge. One day I thought I would start to create a script as I did successfully merge script snippets in the past with my very poor scripting knowledge :D

        But its much better that someone who knows his stuff did it. ;) That is cool!

        Anyway, I hope WordPress does find their sense again, because I can’t understand as well what is so wrong to place a link. I think it’s just power play what they do. They want to dictate.

  9. Hi I just want to say THANK YOU! It worked beautifully! Just fyi I still get the annoying beep-beep-boop message though, I hope that doesnt sound ungrateful, I just thought you’d be interested to know.

    I can see this is going to be really popular… no one I know likes the ‘new improved system’. Well done and thank you!

    • Yeah, that’s the limitation of the script, and it’s because of how it works. I don’t think there’s any way around it without making it specific to your sites. The first time you visit a specific link to the new editor, your browser has to fetch all the information for the redirect, but it remembers it so that it’ll be faster the next time you visit it (this is called “caching”).
      However, for private and Jetpack-enabled blogs, the script works slightly differently. Since it can’t reliably fetch the information for these kinds of blogs, it waits for the new editor to load and looks for the hidden link.

      This is all very encouraging because when I first posted the script in the forums, it went unnoticed (possibly ignored) for about three days. It was only until dandelionsalad had given a recommendation that it started becoming popular.

      Happy blogging!

      • Well I think you’re amazing! I have no understanding of this sort of thing, but enjoy the mystery and your wielding of it! Thanks!

  10. Arrby said:

    Well, My editor wasn’t looking like I thought it should after installing Greasemonkey. I’m still not clear on how to insert the script. I see the code, above, but it’s in a lot of sections. Do I copy and paste one of those sections or all of them? I have no idea. What’s stranger is that now I don’t see my Greasemonkey at all! Did Combofix remove it? Anyway, I re-installed Greasemonkey. I’m not sure what to do next. I’m told I need to install the script. Fine. Exactly what is the script I need to install and how do I do it? Thanks.

  11. Thank you so much! It was so easy to install, too. I use Chrome so it was just a matter of a couple of clicks, first to install extension and then script. No copy and pasting of CSS, if I’ve done it correctly. You are amazing!!!!

  12. Egad! I tried to edit a post tonight and it took me to the Beep Beep Boop editor! I am using the script for Firefox. Did WP change something so the script doesn’t work any more?

  13. Never mind my last comment about the user script, for some unknown reason Greasemonkey was turned off. It’s back on and working again, thankfully.

  14. I just want to pass on my sincere thanks for this.. I just came via how to revert back to the classic editor via Dennis at the Diary of Dennis who explained how to..
    Many thanks Its now sorted for me.. :-)
    Have a beautiful Easter Weekend. Sue

    • It’s great to hear that! Have a wonderful Easter weekend yourself!

      • :-) thank you … Enjoy! and again Many thanks.. I was about to pull out my hair.. :-) ;-)

  15. Harry said:

    I do not use firefox or chrome I use yahoo, what can I do, Harry.

      • Harry said:

        Thank you, browser win7

      • Win7 (Windows 7) is your operating system, not your browser. I have a hunch you’re using Internet Explorer, though, so you’d be better off with the bookmarklet method described in my other comment anyway.

      • Harry said:

        Correct IE8, can you explain bookmarklet please, what to do where to go.

      • A bookmarklet is a link/button on one of your toolbars that does an action on the page you’re at when you click on it. When you click on this particular bookmarklet, it will look for the link to the classic editor and take you there.

        To use the bookmarklet, you need to set it up first. This setup process will only need to be done once:

        1. If your Favorites Bar isn’t showing, right-click on an empty space in the toolbar and check “Favorites Bar” to make it appear. (I think it’s on by default)
        2. Follow this link.
        3. Right-click on the “Edit in classic editor” link. If a message saying that the “favorite might not be safe”, confirm that you want to continue by clicking “Yes”.
        4. Click “Add to Favorites…” in the menu that appears. A dialog box should pop up.
        5. In the field that says “Create in:”, choose “Favorites Bar”.
        6. Click “Add”.

        You should now see the “Edit in classic editor” bookmarklet in your Favorites Bar. Whenever you come to the new editor, before making any changes to your post, just click on it to go back to the classic editor.

        If you have trouble following the steps above, these images might help. They show the process for a different link, but the process is essentially the same.

        As an aside, I recommend using Mozilla Firefox or Google Chrome, or at the very least, update to IE11. IE8 will be unsupported as of next year, and by using one of the browsers I mentioned, websites will work better and run faster. You can get someone to help you if you’d like.

        Let me know what happens with the bookmarklet!

  16. Alaina said:

    THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    :-D

  17. dr speedy said:

    Thank you for doing that. The classic dashboard is so much better and easier to use. The above looks very complicated, however if you add the following address as a bookmark in your bookmark list, it’s just one click and really easy to use for people like me. Thanks again.
    Dashboard * http://example.wordpress.com/wp-admin/

    • The code can look a little daunting, and I plan to restructure this post when I have time, but using it is actually a very simple two-step process: install the addon, then install the script. You don’t need to know how the script works to use it.
      If you’re interested in looking at all the workarounds, I’ve listed them all in detail here:
      http://git.io/wpcom-restore-classic-ed

  18. In case you can’t get enough, a huge hug from me. You are my favorite WP rock start at the moment. Thank you!!!

  19. You are amazing!!! Thank you thank you thank you!!!!!!!!

    • I’m glad to see you’re excited about this. Happy blogging!

  20. Tara-Erin said:

    Reblogged this on Tara Erin and commented:

    Here is the original post by Penguin!

  21. Your wonderful script worked for months, then I got a message from Firefox that it had been updated, and now the “edit” button on the post, homepage or “My Sites” dropdown takes me to the Beep-boop rather than the editor I like. Did you change it?

    • I’m sorry to hear that. I did change it because of bug I found introduced by a recent change on WordPress.com that broke the redirect for private and Jetpack-enabled blogs. Regular blogs should be unaffected by the change. Are you running a private or Jetpack-enabled blog, by any chance?

      • Mine is an ordinary wordpress blog. I now go to the posts list or the pages list to press the edit button there, which is alright. Could it be because my computer is slow, it goes to the beep-boop but would redirect in a moment?

      • It’s possible that it could be your computer or network being slow. It tends to take a little longer after you’ve cleared your cache because your browser has to fetch the data again instead of just referencing what it had previously saved. So yes, give it about 5 seconds and see if it redirects. If not, try reinstalling the script, and failing that, we’ll have to figure something else out.

      • Sorted. My Greasemonkey was disabled for some reason. Thanks again .

      • Ah yes, that would do it. I’m glad it’s sorted out!

  22. I was almost sure I had already thanked you for this wonderful script, but no longer know where, so better a second thanks. I am very happy, it works perfectly on my Apple and I am no longer shaking my head at the stupidity of the WordPress people.

  23. Great Script. Been working for months. However I just updated to Firefox 43.0.3 and it has stopped working. I have disabled both the add-on and script and then enabled but no change. Any suggestions?

    • Hmm… I’m not aware of any incompatibilities between the latest version of Firefox and Greasemonkey, and there are no issues with the script itself. It seems silly, but I find the most common cause for it to stop working is that Greasemonkey is turned off (the icon shouldn’t be translucent). Enabling it in the add-ons manager isn’t enough.

      If that doesn’t work, let me know if you’re using the script on a private or Jetpack-enabled blog.

      • aah…and normality returns. Thanks my icon was enabled on add ons but translucent icon. Now activated and ready to get posting ;-)

      • Glad to hear it. Happy blogging!

  24. Andrew said:

    Love your script as much as I dislike the light blue dashboard. Thank you !

    • I don’t even touch that dashboard anymore. I follow people with RSS feeds nowadays. Happy blogging!

    • Oh, yuck, did they actually? I actually made a script last year to do just that, but now that they’ve taken it out, it’s stuck in an infinite redirect! I’ll see what I can do, but I think it might be gone for good now.

      It seems my stylesheet to widen the stats page is broken again. I’ll have to fix that, too.

      • I may not remember how to implement a script if you write a new one. But I sure appreciate the first one. Every time I accidentally see the “new improved” editor, I want to scream. Anyway, thanks for all you’ve done and may yet do ..

      • Dennis said:

        I did only notice it because I got the comment subscription mail from your blog right now. Uh, why did WordPress mess with it again. Penguin, I hope you can once again save our blogging world :)

      • I’ve pushed out a hotfix that stops the infinite redirect by not redirecting at all. I’ll work on redirecting to the classic stats page soon.

      • That’s not a bad idea. I think I’ll do that. Thanks!

      • Dennis said:

        Thanks for working on it, but take your time and enjoy the holiday season. :)

`$name' says...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: