Advertisement
  1. Code
  2. WordPress
Code

Creating Dummy Text in WordPress

by
Difficulty:IntermediateLength:MediumLanguages:

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.

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.

Step 2

The second function calls to the JavaScript file you made earlier and tells the plugin where it can be found.

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.

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.

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.

Step 2

You're now going to initialize the 'dummytext_plugin' function in the editor that you made earlier in the PHP file.

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.

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.

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.

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!

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.