How To Create A Simple WordPress Plugin For A Custom Shortcode

• 31 August 2024, 12:08
• Wordpress Php

Why Create a Plugin for a Custom Shortcode?

While adding shortcodes to your theme’s functions.php file is quick and convenient, using a plugin has several advantages:

1. Portability: A plugin can be easily moved from one WordPress site to another.
2. Preservation: Your shortcode won’t be lost if you change your theme.
3. Organization: Keeping custom functionality separate from your theme makes your site easier to maintain.

Step-by-Step Guide to Creating a Plugin for a Custom Shortcode

Plugin Folder and File Structure

Here's how the plugin files should be structured:

custom-shortcode-plugin/
│
├── custom-shortcode-plugin.php  // Main plugin file
├── css/
     └── styles.css  // Stylesheet for custom styling of the shortcode output

 

Step 1: Create Your Plugin Folder and File

To get started, you'll need to create a new folder and file for your plugin. Follow these steps:

1. Create a New Folder:

   • Navigate to wp-content/plugins in your WordPress installation.
   • Create a new folder and name it something unique and descriptive, like custom-shortcode-plugin.

2. Create a PHP File:

   • Inside your new folder, create a new PHP file. Name it something similar, like custom-shortcode-plugin.php.

Step 2: Add Plugin Header Information

Every WordPress plugin needs a header to identify it to WordPress. Open your new PHP file and add the following header information at the top:

<?php
/*
Plugin Name: Custom Shortcode Plugin
Description: A simple plugin to add a custom shortcode to your WordPress site.
Version: 1.0
Author: TemplateBench
Author URI: https://templatebench.com
License: GPL2
*/

This block of comments tells WordPress about your plugin, including its name, description, version, author, and more.

Step 3: Write the Function for Your Shortcode

Now, you’ll define the functionality of your shortcode. Let’s create a shortcode that displays a custom greeting message.

Add the following code to your PHP file:

// Function to display a custom greeting message with user-defined text
function custom_shortcode_greeting($atts) {
    // Define default attributes and merge with user-defined attributes
    $atts = shortcode_atts(array(
        'text' => 'Hello, welcome to our TemplateBench site!' // Default greeting text
    ), $atts, 'custom_greeting');

    // Sanitize the custom text
    $greeting = sanitize_text_field($atts['text']);

    // Return the formatted greeting message
    return "<div class='custom-greeting'>{$greeting}</div>";
}

This function, custom_shortcode_greeting, returns a simple greeting message wrapped in a div element.

 

Step 4: Register the Shortcode

Next, you’ll register your shortcode with WordPress using the add_shortcode() function. Add this line to your PHP file:

// Register the shortcode with WordPress
add_shortcode('custom_greeting', 'custom_shortcode_greeting');

This code snippet registers the shortcode [custom_greeting] and associates it with the custom_shortcode_greeting function.

 

Step 5: Add Styling for Your Shortcode (Optional)

If you want to add custom styles to your shortcode, you can enqueue a stylesheet within your plugin. First, create a css folder inside your plugin folder and add a styles.css file. Then, add your CSS:

/* styles.css */
.custom-greeting {
    padding: 10px;
    text-align: center;
    font-size: 18px;
}

Back in your PHP file, enqueue the stylesheet:

// Enqueue custom styles for the shortcode
function custom_shortcode_styles() {
    wp_enqueue_style('custom-shortcode-styles', plugin_dir_url(__FILE__) . 'css/styles.css');
}
add_action('wp_enqueue_scripts', 'custom_shortcode_styles');

 

How to Use Your Custom Shortcode Plugin and Display Its Output on Your WordPress Site

Step-by-Step Guide to Using the Custom Shortcode

Step 1: Activate the Plugin

Before you can use the shortcode, ensure that the plugin is activated. Here's how:

1. Log in to your WordPress Dashboard.
2. Navigate to Plugins.
3. Locate the Custom Shortcode Plugin in the list and click Activate if it's not already activated.

Step 2: Add the Shortcode to a Post or Page

To display the greeting message, you can add the [custom_greeting] shortcode to any post or page. Follow these steps:

1. Open a Post or Page for Editing:

   • Go to Posts or Pages in the WordPress Dashboard.
   • Click on an existing post/page to edit it, or click Add New to create a new one.

2. Add the Shortcode:

• In the content editor, type the shortcode [custom_greeting] where you want the greeting message to appear.

1. Publish or Update the Post/Page:

   • Click Publish or Update to save your changes.
2. Now you can check your page or post where you use this shortcode.

 

Conclusion

By following this guide, you’ve successfully added a custom shortcode to your WordPress site and learned how to display its output in various locations. Shortcodes are a powerful tool in WordPress, allowing you to add dynamic content easily and customize it to suit your needs. Experiment with different uses and customizations to make your site more interactive and engaging for your visitors!

Now, go ahead and try using your custom shortcode in different places on your WordPress site, and see how it enhances your site’s functionality and user experience.

Tagged in : php wordpress