How to Create a WordPress Plugin to Warn Content Editors About Long URLs

URLs are a very important part of user experience and SEO. A long URL may confuse users, it will definitly make it harder for them to remember it, and search engines may take that into consideration when indexing websites. If you work alongside editors and copywriters who use a WordPress CMS then you can create a plugin that warns them if the URL of a post is too long. This can help mitigate the risk of publishing posts with URLs that have over 115 characters. This article will take you through some steps to do just that!

---

Why Monitor URL Length?

Managing URL length is important for several reasons:

1. SEO Benefits: Short and clean URLs are easier for search engines to understand and rank.
2. User Experience: Concise URLs are more user-friendly and memorable.
3. Avoid Truncation: Long URLs may get truncated in search results or when shared on social media, reducing their effectiveness.

By implementing a solution to monitor URL lengths, you can ensure your content adheres to best practices.

---

Steps to Create the Plugin

Follow these steps to create a plugin that warns content editors if the URL exceeds 115 characters.

Step 1: Set Up the Plugin File

1. Open your WordPress site’s /wp-content/plugins/ directory.
2. Create a new folder named url-length-warning.
3. Inside this folder, create a file named url-length-warning.php.

Paste the following code into the file:

<?php
/**
 * Plugin Name: URL Length Warning
 * Description: Warns content editors if the post URL exceeds 115 characters.
 * Version: 2.0
 * Author: Jonathan Stringer, STRINGERSEO
 */

function url_length_warning_add_script() {
    ?>
    <script type="text/javascript">
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                function checkLinkLength() {
                    // Locate the button that contains the permalink
                    const linkButton = document.querySelector('.editor-post-url__panel-toggle');

                    if (linkButton) {
                        const linkSpan = linkButton.querySelector('span');
                        if (linkSpan) {
                            const permalink = linkSpan.textContent.trim();
                            const warningId = 'url-length-warning';
                            const warningMessage = 'Warning: URL exceeds 115 characters.';

                            // Remove existing warning
                            let existingWarning = document.getElementById(warningId);
                            if (existingWarning) {
                                existingWarning.remove();
                            }

                            // Add a warning if the URL exceeds 115 characters
                            if (permalink.length > 115) {
                                const warning = document.createElement('div');
                                warning.id = warningId;
                                warning.style.color = 'red';
                                warning.style.marginTop = '5px';
                                warning.textContent = warningMessage;
                                linkButton.parentNode.appendChild(warning);
                            }
                        }
                    }
                }

                // Optimize MutationObserver to target only the Sidebar area
                const sidebar = document.querySelector('.edit-post-sidebar');
                if (sidebar) {
                    const observer = new MutationObserver(() => {
                        checkLinkLength();
                    });

                    observer.observe(sidebar, { childList: true, subtree: true });
                }

                // Check when the button is clicked to open the dropdown
                document.body.addEventListener('click', function (event) {
                    if (event.target.closest('.editor-post-url__panel-toggle')) {
                        checkLinkLength();
                    }
                });
            });
        })();
    </script>
    <?php
}
add_action('admin_footer', 'url_length_warning_add_script');

---

Step 2: Add JavaScript Logic

The JavaScript logic dynamically monitors the URL length and displays a warning if the character count exceeds 115. Here’s what the script does:

1. Initial Check: When the editor page loads, the script checks the URL length.
2. Dynamic Monitoring: It listens for changes to the permalink field and rechecks the length.
3. Warning Display: If the length exceeds 115 characters, a red warning message appears below the permalink field.

---

Installing the Plugin

1. Save the url-length-warning.php file in the url-length-warning folder.
2. Compress the folder into a .zip file if you want to upload it via the WordPress admin.
3. Log in to your WordPress admin panel.
4. Navigate to Plugins > Add New > Upload Plugin.
5. Upload the .zip file, install, and activate the plugin.

---

Testing the Plugin

1. Create or edit a post in the WordPress editor.
2. Check the permalink field below the post title.
3. If the URL exceeds 115 characters, a red warning message will appear.

---

Customising the Plugin

This plugin can be extended further:

• Custom Length Threshold: Modify the character limit by replacing 115 in the code with a desired value.
• Error Styling: Adjust the warning message’s appearance by updating the inline CSS styles.
• Language Support: Use WordPress’s translation functions to make the plugin multilingual.

---

If you have any questions or need help customising this plugin, feel free to say hello and reach out!