Case Converter Tool WordPress Plugin: Convert Text to Uppercase, Lowercase, and Title Case

In this tutorial, we’ll create a WordPress plugin that converts text to uppercase, lowercase, and titlecase. This plugin, “Case Converter Tool,” will provide a simple user interface for text transformation.

Step 1: Create a New Plugin File

1. Navigate to your WordPress wp-content/plugins directory.
2. Create a new folder named case-converter.
3. Inside this folder, create a new PHP file named case-converter.php.

Step 2: Add Plugin Header Information

Open the case-converter.php file and add the following header information to define your plugin:

This header provides essential details about your plugin, including its name, description, version, and author.

Step 3: Enqueue Scripts and Styles

You’ll need some JavaScript and CSS to create the user interface. Enqueue these in your plugin file:

function case_converter_enqueue_scripts() { wp_enqueue_script(‘case-converter-js’, plugins_url(‘/js/case-converter.js’, __FILE__), array(‘jquery’), null, true); wp_enqueue_style(‘case-converter-css’, plugins_url(‘/css/case-converter.css’, __FILE__)); } add_action(‘wp_enqueue_scripts’, ‘case_converter_enqueue_scripts’);

This code ensures that your JavaScript and CSS files are included in your WordPress site.

Step 4: Create the User Interface

Add a shortcode to display the case converter tool:

function case_converter_ui() {
ob_start();
?>
UppercaseLowercaseTitle Case
<?php
return ob_get_clean();
}
add_shortcode(‘case_converter’, ‘case_converter_ui’);

This code creates a user interface with a textarea and buttons for each case conversion option.

Step 5: Create the JavaScript Functionality

1. Create a js directory inside your plugin folder.
2. Add a file named case-converter.js and include the following code:

jQuery(document).ready(function($) { $(‘#to-uppercase’).on(‘click’, function() { var text = $(‘#text-to-convert’).val(); $(‘#converted-text’).text(text.toUpperCase()); }); $(‘#to-lowercase’).on(‘click’, function() { var text = $(‘#text-to-convert’).val(); $(‘#converted-text’).text(text.toLowerCase()); }); $(‘#to-titlecase’).on(‘click’, function() { var text = $(‘#text-to-convert’).val(); $(‘#converted-text’).text(text.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); })); }); });

This script adds functionality to the buttons to transform the text based on the selected case.

Step 6: Add Basic Styles

1. Create a css directory inside your plugin folder.
2. Add a file named case-converter.css with the following styles:

#case-converter-tool { margin: 20px 0; } #case-converter-tool textarea { width: 100%; max-width: 600px; margin-bottom: 10px; } #case-converter-tool button { margin-right: 10px; } #case-converter-tool #converted-text { margin-top: 20px; padding: 10px; border: 1px solid #ccc; background: #f9f9f9; }

These styles will enhance the appearance of your case converter tool.

Step 7: Activate the Plugin

1. Go to your WordPress admin panel.
2. Navigate to the Plugins section.
3. Find the Case Converter Tool plugin and click Activate.

Step 8: Use the Shortcode

You can now use the

shortcode in any post or page to display the Case Converter Tool.

Conclusion

With these steps, you’ve created a functional WordPress plugin that allows users to convert text between different cases easily. This plugin can be further enhanced by adding more features or refining the user interface. Happy coding!