Add WordPress Diff Manually on Needed Post

Abhishek Ghosh

By Abhishek Ghosh August 26, 2015 6:47 pm Updated on August 26, 2015

Add WordPress Diff Manually on Needed Post

This Guide Shows How To Use jQuery & CSS to Add WordPress Diff Manually on Needed Post. You Can Offer Option Button to Show Diff Nicely. We at rare case need to add a WordPress Diff Plugin to automatically add the diff option, such need is usually for custom WordPress site like we described in the guide for creation of WordPress site for Publishing Scholarly Academic Journals.

Diff is a comparison tool that calculates and displays the differences between two files – texts in our case. Diff is line-oriented, it tries to determine the smallest set of deletions and insertions to create one file from the other. Both humans and machines can understand the changes.

Typically, diff is used to show the changes between two versions of the same file.

Add WordPress Diff Manually on Needed Post : The Things Needed

For this guide, needed elements are few :

https://github.com/arnab/jQuery.PrettyTextDiff
https://github.com/AbhishekGhosh/google-diff-match-patch/

1 2	https://github.com/arnab/jQuery.PrettyTextDiff https://github.com/AbhishekGhosh/google-diff-match-patch/

Additionally you’ll need a bit jQuery, CSS and HTML to implement.

It is better to know :

Add WordPress Diff Manually on Needed Post

We are using the HTML class class="original", class="changed" and class="diff" in this HTML, which is a demo for jQuery.PrettyTextDiff via jsFiddle, as the code breaking our CSS, see the changes by clicking diff button :

We need to load these two jQuery files embedding in the post :

diff_match_patch.js  Remove 
jquery.pretty-text-diff.js

1 2	diff_match_patch.js Remove jquery.pretty-text-diff.js

Plus a snippet :

$("input[type=button]").click(function () {
    $("#wrapper tr").prettyTextDiff({
        cleanup: $("#cleanup").is(":checked")
    });
});

1

2

3

4

5

$("input[type=button]").click(function () {

$("#wrapper tr").prettyTextDiff({

cleanup: $("#cleanup").is(":checked")

});

Plus a CSS :

ins {
    background-color: #c6ffc6;
    text-decoration: none;
}

del {
    background-color: #ffc6c6;
}

div, table, h3, input, label {
    margin: 10px;
}

table th {
    width: 30%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

ins {

background-color: #c6ffc6;

text-decoration: none;

}

del {

background-color: #ffc6c6;

}

div, table, h3, input, label {

margin: 10px;

}

table th {

width: 30%;

}

Also, we are using Bootstrap CSS in this demo.

<script type="text/javascript"
   src="https://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js"></script>
<script type="text/javascript"
   src="https://rawgithub.com/arnab/jQuery.PrettyTextDiff/master/jquery.pretty-text-diff.js"></script>
<script type='text/javascript'>
$("input[type=button]").click(function () {
    $("#wrapper tr").prettyTextDiff({
        cleanup: $("#cleanup").is(":checked")
    });
});
</script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>

1

2

3

4

5

6

7

8

9

10

11

12

src="https://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js"></script>

src="https://rawgithub.com/arnab/jQuery.PrettyTextDiff/master/jquery.pretty-text-diff.js"></script>

$("input[type=button]").click(function () {

$("#wrapper tr").prettyTextDiff({

cleanup: $("#cleanup").is(":checked")

});

</script>

Add WordPress Diff Manually on Needed Post : Easier Method

As the method described above is too complex, needs hand coding, we would suggest to use the Post Revision Display plugin and conditionally load the PHP snippet to force the manual method on per page instead of single.php.

Diff actually demands processing at the backend, hence without jQuery it is probably better to think to implement in conventional way, modified for your need.

Add WordPress Diff Manually on Needed Post

Add WordPress Diff Manually on Needed Post : The Things Needed

Add WordPress Diff Manually on Needed Post

Add WordPress Diff Manually on Needed Post : Easier Method

This Article Has Been Shared 342 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

Add WordPress Diff Manually on Needed Post : The Things Needed

Add WordPress Diff Manually on Needed Post

Add WordPress Diff Manually on Needed Post : Easier Method

This Article Has Been Shared 342 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Articles Related to Add WordPress Diff Manually on Needed Post

Take The Conversation Further ...