My First Wordpress Plugin: Find And Replace Text in WP Editor on Both Visual and Text Mode

2018-09-25 814 words 4 mins read

The WordPress editor currently does not have "find n replace" function.

This function is very useful for me, because I used to post the souce code just clicking Blockquote button.

But each time I have to go back to the TEXT mode and add the <PRE> tag, otherwise some code will be converted to some special characters by WordPress editor, which is not good story for source code.

Therefore, I need a batch find n replace function.

I used better search and replace plugin to modify the database, but this tool is to replace all the data of the website, which is not very convenient for new posts.

I plan to find another WordPress plugin but I can't find it. Maybe not too many people need this function.

I can solve it if there is a problem.

I have time and relevant experience to learn something new,  although I have never made Wordress Plugin before, I am sure "I can".

After half a day of study, my first wordpress plugin came out, and the steps below are explained in detail.

Create your own plugin directory and place it in the plugin directory. Wordpress will automatically read it in such a directory.

sudo mkdir /var/www/

Create a file in this directory and start editing:
cd /var/www/
sudo nano find-replace-text-mode.php

First attach copyright information, etc.
* Plugin Name: Find and Replace Text Mode
* Plugin URI:
* Version: 1.0
* Author: Jesse Lau
* Author URI:
* Description: Add find and replace function in WordPress editor text mode.
* License: GPL2

This is a fixed format so WordPress can automatically read your plugin information.

Next, create a class, determine if it is an administrator when launching the plugin, and if so, run the subsequent code.
class jesse_find_replace_button
/** * Constructor. Called when the plugin is initialised. */
function __construct()
if ( is_admin() )
add_action( 'admin_print_footer_scripts', array( &$this, 'admin_footer_scripts' ) );

Then you need to add a button to the editor
// Check the Quicktags script is in use
if ( ! wp_script_is( 'quicktags' ) )
{ return; }
<script type="text/javascript">
QTags.addButton( 'jesse_find_replace_button', 'Find & Replace', insert_button );

These codes are to achieve the following small button labeled Find&Replace

Ok, the button is fine. We need JavaScript to read the contents of the editor, find the replacement and then write to the editor.
//WP Editor always use "content" as ID //
var defaultid = "content";
var x = document.getElementById(defaultid);
if ((x==null)||(x.type!=="textarea"))
alert("You TEXT AREA ID is not default value. Please read help file.");
var text = document.getElementById(defaultid).value;
var search = prompt('Find What:');
if( !search) return;
var pattern = new RegExp(search,"gi");
var findCount = (text.match(pattern) || []).length;
if(findCount == 0)
alert("Nothing found!"); return;
var replace = prompt('Replace With:');
if( !replace)

if(confirm(findCount + " matches found, replace now?"))
document.getElementById(defaultid).value= text.replace(pattern, replace); }

Finally new this class
$jesse_find_replace_button = new jesse_find_replace_button;


Activate it and test.

When confirming, I feel that it is better to post the original string and replacement string.
var replace = prompt('Replace With:');

if( !replace)

if(confirm("find '"+search+"', "+findCount + " matches found, replace with '"+replace+"' now?")){

document.getElementById(defaultid).value= text.replace(pattern, replace);


In this way, this is the case when the confirmation is made, so the user is not easy to make something wrong.


Ok, my first plugin is out.



I didn't expect to update the version so soon, and the version 1.0 was published only a few hours. :-)

It's a bit inappropriate to put the button on the quick tag zone, and it is even better if both visual and text mode have this feature.

Just put a button next to the Add to Media button and both visual and text mode have this button.

The code is also very simple

function add_media_button() {
printf( '<a href="%s" class="button jesse_find_replace_button" id="jesse_find_replace_button">' . '<span class="wp-media-buttons-icon dashicons dashicons-search"></span> %s' . '</a>', '#', __( 'Find & Replace', 'textdomain' ) );
add_action( 'media_buttons', 'add_media_button',100 );

This code installs a find and replace button on the editor and a search icon.

I learned about JQuery in the past a few minutes, because I found that the reference code from Google was mostly written by JQuery.

I don't know what it means. So I went to W3Schools to learn it for a while.

Ok, really simple, then I modified the 1.0 version with jquery, now updated to 2.0.

Here is the code:



Today I am trying to submit the plugin to

This is my first submission so I don't know how many days it takes to approve.

Upload the installation file to my own website.

If you need to install this plugin, you can click the button below to download it.


Wordpress approved my submit. Just download this plugins on its website.

Download The Plugin


Authored By Jesse Lau

A freelancer living in New Zealand, engaged in website development and program trading. Ever won 1st ranking twice in the Dukascopy Strategy Contest. This article is licensed under a Creative Commons Attribution 4.0 International License.

We notice you're using an adblocker. If you like our webite please keep us running by whitelisting this site in your ad blocker. We’re serving quality, related ads only. Thank you!

I've whitelisted your website.

Not now

Post Your Comments Here:

Our website uses cookies to improve your user experience. If you continue browsing, we assume that you consent to our use of cookies. More information can be found in our privacy policy Got it