When developing a new WordPress site, you'll often want to add some dummy text to your posts and pages so you can see what the site will look like before the content is published. In this tutorial, you'll learn how to speed up this process by developing a plugin that generates dummy text for you.
The plugin you'll be creating will add a button to the WYSIWYG editor which, when clicked, will open a window and ask for the number of paragraphs of dummy text to create. The user will enter a number, and the content will be inserted!
Please note this plugin uses the TinyMCE 4.0 library, which was recently integrated in WordPress 3.9, meaning that this plugin will only work in 3.9 and newer.
Initializing the Plugin
Step 1
To get started, create a new folder in the wp-content/plugins directory of your site, and give it a title. In this tutorial, I'll be using 'dummy-text-generator' as my title, though as you'll be using relative links within your plugin files, this could be anything.
Step 2
Next, add a new PHP file in your new directory with the title of your directory, followed by the .php extension. For example, dummy-text-generator.php.
Step 3
You now need to notify WordPress that you've added a new plugin to your site, and in order to do this, you should add the following code to the top of your new file.
1 |
<?php
|
2 |
/*
|
3 |
Plugin Name: Dummy Text Generator
|
4 |
Plugin URI: https://code.tutsplus.com
|
5 |
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
6 |
Version: 1.0
|
7 |
Author: Sam Berson
|
8 |
Author URI: http://www.samberson.com
|
9 |
License: GPLv2 or later
|
10 |
*/
|
Simply, this text tells WordPress what your plugin is called, what it does, its version number, author and more. This information can be seen in the WordPress admin, on the Plugins page.
Step 4
You should also create a new directory within your plugin's folder, called js and create a new file called tinymce-plugin.js. You'll need this later on, but for now, just leave it blank.
Step 5
The final step is to activate your new plugin, which can be done via the Plugins page in the backend of your site. Once you've activated your plugin, you're ready to move onto coding the plugin itself.
Adding the Functions
This plugin uses a few main functions: one to check the post type and include the plugin's functionality when on a post or page, one to add a button to the WYSIWYG editor, one to include the JavaScript file needed for the plugin to operate, and one initialize the button's actions.
Step 1
The first function we need to include is the one to check what kind of post we're dealing with, and to tell WordPress that if it's a post or page, the plugin should begin doing its work.
This function also adds the button to the editor. This can be achieved with the following code, and should be added directly after our header information.
1 |
add_action( 'admin_head', 'add_tinymce_dummytext' ); |
2 |
function add_tinymce_dummytext() { |
3 |
global $typenow; |
4 |
|
5 |
// only on Post Type: post and page
|
6 |
if( ! in_array( $typenow, array( 'post', 'page' ) ) ) { |
7 |
return ; |
8 |
}
|
9 |
|
10 |
add_filter( 'mce_external_plugins', 'add_tinymce_dummytext_plugin' ); |
11 |
// Add to line 1 form WP TinyMCE
|
12 |
add_filter( 'mce_buttons', 'add_tinymce_dummytext_button' ); |
13 |
}
|
Step 2
The second function calls to the JavaScript file you made earlier and tells the plugin where it can be found.
1 |
// include the js for tinymce
|
2 |
function add_tinymce_dummytext_plugin( $plugin_array ) { |
3 |
|
4 |
$plugin_array['dummytext_plugin'] = plugins_url( '/js/tinymce-plugin.js', __FILE__ ); |
5 |
|
6 |
return $plugin_array; |
7 |
}
|
Step 3
The final function you'll be including initialises your new dummy text button into the WYSIWYG editor, and then tells it to print it out onto the post editor.
1 |
// Add the button key for address via JS
|
2 |
function add_tinymce_dummytext_button( $buttons ) { |
3 |
|
4 |
array_push( $buttons, 'dummytext_button' ); |
5 |
// Print all buttons
|
6 |
//var_dump( $buttons );
|
7 |
return $buttons; |
8 |
}
|
Step 4
You've now initialized all of the functions and actions you need in order for the plugin to work. Your PHP file should now contain the header information, and all three of the functions you just created.
1 |
<?php
|
2 |
/*
|
3 |
Plugin Name: Dummy Text Generator
|
4 |
Plugin URI: http://code.tutsplus.com
|
5 |
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
6 |
Version: 1.0
|
7 |
Author: Sam Berson
|
8 |
Author URI: http://www.samberson.com
|
9 |
License: GPLv2 or later
|
10 |
*/
|
11 |
|
12 |
add_action( 'admin_head', 'add_tinymce_dummytext' ); |
13 |
function add_tinymce_dummytext() { |
14 |
global $typenow; |
15 |
|
16 |
// only on Post Type: post and page
|
17 |
if( ! in_array( $typenow, array( 'post', 'page' ) ) ) { |
18 |
return; |
19 |
}
|
20 |
|
21 |
add_filter( 'mce_external_plugins', 'add_tinymce_dummytext_plugin' ); |
22 |
// Add to line 1 form WP TinyMCE
|
23 |
add_filter( 'mce_buttons', 'add_tinymce_dummytext_button' ); |
24 |
|
25 |
}
|
26 |
|
27 |
|
28 |
// inlcude the js for tinymce
|
29 |
function add_tinymce_dummytext_plugin( $plugin_array ) { |
30 |
|
31 |
$plugin_array['dummytext_plugin'] = plugins_url( '/js/tinymce-plugin.js', __FILE__ ); |
32 |
|
33 |
return $plugin_array; |
34 |
}
|
35 |
|
36 |
|
37 |
// Add the button key for address via JS
|
38 |
function add_tinymce_dummytext_button( $buttons ) { |
39 |
|
40 |
array_push( $buttons, 'dummytext_button' ); |
41 |
|
42 |
return $buttons; |
43 |
}
|
Generating the Dummy Text
The dummy text you'll be making is in the JavaScript file you created earlier, called tinymce-plugin.js in the js directory.
Step 1
Let's begin by telling WordPress that we're adding a function, and that 'dummyContent' is equal to an HTML paragraph containing some "Lorem ipsum" dummy text.
1 |
( function() { |
2 |
dummyContent = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'; |
Step 2
You're now going to initialize the 'dummytext_plugin' function in the editor that you made earlier in the PHP file.
1 |
tinymce.PluginManager.add( 'dummytext_plugin', function( editor, url ) { |
Step 3
Now, you're going to tell the plugin to initialise the button to be able to add the dummy text into the post, and define its fields and properties.
1 |
// Add a button that opens a window
|
2 |
editor.addButton( 'dummytext_button', { |
3 |
|
4 |
text: 'Dummy Text Generator', |
5 |
icon: false, |
6 |
onclick: function() { |
7 |
// Open window
|
8 |
editor.windowManager.open( { |
9 |
title: 'Dummy Text Generator', |
10 |
body: [{ |
11 |
type: 'textbox', |
12 |
name: 'number', |
13 |
label: 'Number of Paragraphs' |
14 |
}],
|
Step 4
Let's tell the plugin what to do if there's an invalid number entered, and to insert the content when the information from the window form is submitted.
1 |
onsubmit: function( e ) { |
2 |
if(isNaN(e.data.number)) { alert('Please enter a valid number'); return;} |
3 |
|
4 |
// Insert content when the window form is submitted
|
5 |
for (var i = 0; i < e.data.number; i++) { |
6 |
editor.insertContent( dummyContent ); |
7 |
}
|
8 |
}
|
Step 5
The last step is to close all the brackets that were opened during the making of the JavaScript file, and once you've done that, save your changes to both the PHP and JS files.
1 |
} ); |
2 |
}
|
3 |
} ); |
4 |
} ); |
5 |
} )(); |
Step 6
Finally, your JavaScript file will look something like the one below, and you can now test and enjoy using the plugin you've made!
1 |
( function() { |
2 |
dummyContent = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'; |
3 |
|
4 |
tinymce.PluginManager.add( 'dummytext_plugin', function( editor, url ) { |
5 |
|
6 |
// Add a button that opens a window
|
7 |
editor.addButton( 'dummytext_button', { |
8 |
|
9 |
text: 'Dummy Text Generator', |
10 |
icon: false, |
11 |
onclick: function() { |
12 |
// Open window
|
13 |
editor.windowManager.open( { |
14 |
title: 'Dummy Text Generator', |
15 |
body: [{ |
16 |
type: 'textbox', |
17 |
name: 'number', |
18 |
label: 'Number of Paragraphs' |
19 |
}],
|
20 |
onsubmit: function( e ) { |
21 |
if(isNaN(e.data.number)) { alert('Please enter a valid number'); return;} |
22 |
|
23 |
// Insert content when the window form is submitted
|
24 |
for (var i = 0; i < e.data.number; i++) { |
25 |
editor.insertContent( dummyContent ); |
26 |
}
|
27 |
}
|
28 |
} ); |
29 |
}
|
30 |
} ); |
31 |
} ); |
32 |
} )(); |
In Summary
So that's it - you've now successfully made your own dummy text plugin in WordPress using PHP and JavaScript!
If you have any questions about this plugin, please feel free to leave a comment below and I'll be sure to get back you.
