Blog

News from the versioned universe

VersionPress 1.0 Walkthrough

In this blog post I'm going to show how VersionPress 1.0 works and how it can help you manage your WordPress sites. It is a lot of screenshots so let's get rolling.

UPDATE: For new features in VersionPress 2.0, see this blog post.

Installing VersionPress

VersionPress ships as a standard plugin so the installation is just a matter of uploading a ZIP file and clicking a few buttons as usual. Once VersionPress is activated, it shows a prompt to start tracking the site:

10w-01-versionpress-activated

This takes you to the pre-activation screen:

10w-02-preactivation-screen

It seems a bit unwieldy at first but we prefer to do automated checks rather than activate blindly on a site that might cause issues later. If all checks passed VersionPress can be fully activated:

10w-03-full-activation

This creates the initial state (version) of a site and all is set.

Auto-tracking

An important, albeit somewhat invisible feature of VersionPress is the automatic change tracking. Let's demonstrate it by doing some actions on a site. This is what I did:

  • Trashed the “Hello World” post
  • Installed a new theme
  • Customized it to my liking
  • Created a new post “Hello VersionPress”
  • Updated the blog name (“Test Site” -> “Demo”)

The VersionPress admin page now looks like this:

10w-04-versionpress-table

The user interface is currently quite basic (big improvements are coming in the 2.0 release) but you can already see how VersionPress captured all actions, and some more (those that WordPress does internally). This is valuable in itself (arguments with clients, “I definitely didn't do this”, anyone?) but it's not the best part.

Reverts

The best part are reverts. As you can notice, there are two links next to each action: Undo this and Roll back to this. Let's play with Undo first.

When I said above that I customized theme to my liking, what I didn't tell you is that I am a developer and my sense of aesthetics is somewhat peculiar. This is what I came up with:

10w-05-customizer-design

For some reason, the client wasn't impressed and the previous design had to go live immediately. Thankfully, that was really easy with VersionPress:

10w-06-undo-customized-design

After a single click, my beautiful customizations were gone:

10w-07-undone-customized-design

What is interesting to note here is that the updated blog name and the new content have been preserved.

Let's pause here for a bit, this is important.

What you just saw is very evidently a desirable feature to have, but technically so hard to implement that not many user-facing software solutions do that today. Just think of MS Word, for example. It's a sophisticated piece of software, being developed for more than 20 years, but when you format a paragraph and then edit a text in it, you cannot undo just the formatting – the reverts are always “all or nothing”. It's the same with many other pieces of software, from Apple's Time Machine, Google Docs to traditional WordPress backups.

VersionPress can do selective undo which is a unique, yet very useful and intuitive feature to have. We're very happy to be able to offer it.

Let's move on to rollbacks.

Rollbacks take you to some previous state of a site, kind of like a traditional backup & restore but with certain benefits like that you don't need to decide on a backup period up-front (VersionPress creates new “backup” after every logical change), or that the “backups” are extremely space efficient.

Let's try the feature and go back to the initial state of the site:

10w-08-rollback-to-initial-state

The web now looks exactly like when we started – the default theme is back, the trashed post is back, its comment is back, and so on:

10w-09-rolled-back-to-initial-state

What is important is that we didn't really go back in history and lose all the newer updates – VersionPress created a new state that just happens to look like the initial one:

10w-10-rollback-as-new-state

This is an important concept due to which no piece of history is ever lost. In fact, the rollback row is just another change from VersionPress' point of view and as such, it can be reverted! Let's try to undo the rollback:

10w-11-undo-rollback

And it worked, the pre-rollback state is back! Little bit crazy, right?

10w-12-undone-rollback

Now, you can do this with anything – plugin updates, WordPress core updates, adding or deleting users, really anything. VersionPress is a perfect safety net which you basically set up once and then can forget.

Utilizing Git

The technical beauty of VersionPress is that behind the scenes, we didn't actually implement a single line of versioning code ourselves. All the powerful features are powered by Git, the world's most popular distributed version control system. If you don't know what Git is, you can safely skip this section but if you do, carry on, this will show some important workflows.

For this demo, I'm going to use a common scenario when I need to edit a theme files and that is by far the most comfortably done in an external editor on an IDE. First, I opened a theme file in my favorite text editor and done some edits to it:

10w-13-edit-theme

Now I can simply commit the change into the Git repo that VersionPress also internally uses to track the site:

10w-14-commit-change

The good thing is that when I go back to the VersionPress admin page, I see this manual change there:

10w-15-manual-commit-in-vp

I can click the Undo button there as with any other change – VersionPress doesn't really care how the change was created, whether by auto-tracking or by hand, it's just one logical change of the site, period.

Now it's probably quite obvious to you what's going on: the VersionPress table is just a decorated Git log. Indeed, I can print out the same “table” on the command-line:

10w-16-git-log

… or display it in some GUI client like TortoiseGit:

10w-17-tortoisegit

I can display diffs for every change on a command line:

10w-18-cli-diff

… or in a comparison tool like Beyond Compare:

10w-19-beyond-compare

I can do branching / merging, I can push the repo to sites like GitHub or BitBucket, there are really no limits. For me, personally, this is extremely exciting because I always wanted something like this and VersionPress is finally a solution that is a simple Undo button from the outside but the ultimate versioning technology from the inside.

Summary

Hopefully you now have a good idea of how VersionPress works and what it brings to the table. It's vital to repeat that VersionPress 1.0 is really just the beginning – there are a lot challenges ahead (shared hosting support, complex 3rd party plugins, etc.) but what we have in 1.0 is already quite unique and can do things that were hard to impossible before.

We hope you like it, and if you do, you can follow the progress on Twitter or Facebook or join the EAP to support the project. Thanks!

Discuss & subscribe on Reddit:

r/VersionPress