How to Add Title and NoFollow to Insert Link Popup in WordPress

Understanding the WordPress Insert Link Popup

The WordPress Insert Link popup is a crucial element within the content editor. It allows users to seamlessly add hyperlinks to text, images, and other media within their posts and pages. By default, this popup provides basic functionality such as inserting the URL, choosing the text to display (anchor text), and the option to open the link in a new tab. However, many users and website owners require more control over the links they create, specifically the ability to add a `title` attribute and a `nofollow` attribute directly from the popup itself.

The `title` attribute provides additional information about the link, which can be helpful for users and search engines. The `nofollow` attribute instructs search engines not to pass link equity to the linked page. Both attributes can improve SEO and user experience, making the ability to manage them directly from the Insert Link popup highly desirable.

Why Add Title and NoFollow Attributes?

Adding the `title` and `nofollow` attributes to links offers several significant benefits:

• Improved User Experience: The `title` attribute provides a short description of the linked page, which is displayed when the user hovers over the link. This can provide context and help users understand where the link will take them.
• Enhanced SEO: While `nofollow` prevents link equity transfer, using it strategically can help manage your website’s link profile. The `title` attribute can also indirectly improve SEO by providing additional relevant information to search engines.
• Affiliate Marketing Compliance: Affiliate marketers often need to add `nofollow` to their affiliate links to comply with search engine guidelines.
• Control over Link Relationships: The `nofollow` attribute allows website owners to control the flow of link equity, particularly for user-generated content or links to untrusted sources.
• Accessibility: The title attribute, when used thoughtfully, contributes to improved web accessibility, helping users with screen readers understand the purpose of the link.

Methods for Adding Title and NoFollow Functionality

Several methods can be used to add `title` and `nofollow` functionality to the WordPress Insert Link popup:

• Using a Plugin: Plugins offer a straightforward way to extend the functionality of WordPress without requiring coding knowledge. Many plugins are specifically designed to enhance the Insert Link popup.
• Custom Code (JavaScript/PHP): For developers or those comfortable with coding, adding custom JavaScript and PHP code directly to the WordPress theme or a custom plugin provides greater control and customization.

Method 1: Using a Plugin

Using a plugin is the easiest and often the most recommended method for adding `title` and `nofollow` functionalities to the WordPress Insert Link popup. Several plugins are available, each offering varying degrees of features and customization options. Here’s a step-by-step guide using a popular plugin as an example:

1. Choose a Plugin: Research and select a plugin that provides the desired functionality. Some popular options include “Title and Nofollow For Links,” “External Links – nofollow, new tab, title,” and “Ultimate Nofollow.” Read reviews and consider the plugin’s compatibility with your WordPress version.
2. Install the Plugin:
   • Log in to your WordPress admin dashboard.
   • Go to “Plugins” -> “Add New.”
   • Search for the plugin you chose.
   • Click “Install Now” and then “Activate.”
3. Configure the Plugin (if necessary): Some plugins may require configuration.
   • Look for a new settings page or options within the “Settings” or “Plugins” menu.
   • Configure the plugin according to your preferences. This may involve setting default `nofollow` options or customizing the appearance of the new fields in the Insert Link popup.
4. Test the Functionality:
   • Create a new post or edit an existing one.
   • Use the Insert Link popup to add a link.
   • Verify that the `title` and `nofollow` fields are present in the popup.
   • Add the desired values to the fields.
   • Save or publish the post and inspect the HTML code to ensure the attributes are correctly added to the link.

The specific steps for configuring a plugin will vary depending on the plugin you choose. Refer to the plugin’s documentation for detailed instructions.

Method 2: Custom Code (JavaScript/PHP)

Adding custom code provides greater flexibility but requires a deeper understanding of WordPress development and coding principles. This approach involves modifying the WordPress editor using JavaScript to add the `title` and `nofollow` fields to the Insert Link popup and PHP to save these values when the post is saved.

1. Prepare the Environment:
   • Child Theme: Create a child theme to avoid losing your customizations when the parent theme is updated.
   • Code Editor: Use a code editor with syntax highlighting and error checking.
2. JavaScript (Adding Fields to the Popup):
   • Enqueue the Script: Add the following code to your child theme’s `functions.php` file to enqueue a custom JavaScript file:

     “`php
     function my_custom_insert_link_script() {
     wp_enqueue_script( ‘my-insert-link’, get_stylesheet_directory_uri() . ‘/js/insert-link.js’, array( ‘jquery’ ), ‘1.0’, true );
     wp_localize_script( ‘my-insert-link’, ‘my_ajax_object’,
     array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) ) );
     }
     add_action( ‘admin_enqueue_scripts’, ‘my_custom_insert_link_script’ );
     “`

     This code enqueues a JavaScript file named `insert-link.js` located in the `/js/` directory of your child theme. `wp_localize_script` makes the AJAX URL available to your javascript.

   • Create the JavaScript File: Create a file named `insert-link.js` in the `/js/` directory of your child theme. Add the following code to this file:

     “`javascript
     (function($) {
     $(document).ready(function() {
     // Function to add fields to the Insert/Edit Link popup
     function addCustomFieldsToLinkPopup() {
     // Target the link details fields in the popup
     let linkDetails = $(‘#wp-link-fields’);

     // Check if the title field already exists to avoid duplicates
     if (linkDetails.find(‘#link-title-field’).length === 0) {
     // Add the title field
     linkDetails.append(
     ‘

     ‘ +
     ‘Title ‘ +
     ‘

     ‘
     );
     }

     // Check if the nofollow field already exists
     if (linkDetails.find(‘#link-nofollow-field’).length === 0) {
     // Add the nofollow checkbox
     linkDetails.append(
     ‘

     ‘ +
     ‘ Nofollow‘ +
     ‘

     ‘
     );
     }
     }

     // Call the function to add fields when the link modal is opened
     $(document).on(‘DOMNodeInserted’, function(e) {
     if (e.target.id === ‘wp-link-wrap’) {
     addCustomFieldsToLinkPopup();

     // Retrieve saved values and populate the fields (if editing an existing link)
     var link = $(‘#wp-link-submit’).data(‘link’);

     if (link) {
     $.ajax({
     url: my_ajax_object.ajax_url,
     type: ‘POST’,
     data: {
     action: ‘get_link_attributes’,
     link_id: link.id,
     },
     success: function(response) {
     if (response.success) {
     var attributes = response.data;
     $(‘#link_title’).val(attributes.title);
     $(‘#link_nofollow’).prop(‘checked’, attributes.nofollow === ‘nofollow’);
     }
     },
     error: function(errorThrown){
     console.log(errorThrown);
     }
     });
     }
     }
     });

     // Before inserting the link, store custom field values in a data attribute.
     $(‘#wp-link-submit’).on(‘click’, function(event) {
     var titleValue = $(‘#link_title’).val();
     var nofollowValue = $(‘#link_nofollow’).is(‘:checked’) ? ‘nofollow’ : ”;

     // Store the attributes in data for later retrieval and processing.
     $(this).data(‘linkAttributes’, {
     title: titleValue,
     nofollow: nofollowValue
     });
     });

     });
     })(jQuery);
     “`

     This JavaScript code adds the `title` input field and the `nofollow` checkbox to the Insert Link popup when it’s opened. It also saves these fields when the “Add Link” button is clicked. Importantly, it retrieves previously saved attributes when editing an existing link. It makes an AJAX request using the `wp_localize_script` information to retrieve the attributes.

3. PHP (Saving the Attributes):
   • Add Actions in functions.php: Add the following code to your child theme’s `functions.php` file:

     “`php
     // Action to save custom link attributes
     add_filter( ‘wp_insert_post_data’, ‘save_custom_link_attributes’, 10, 2 );

     // AJAX action to retrieve link attributes.
     add_action( ‘wp_ajax_get_link_attributes’, ‘get_link_attributes_callback’ );

     function get_link_attributes_callback() {
     $link_id = intval( $_POST[‘link_id’] );
     $link_title = get_post_meta( $link_id, ‘_link_title’, true );
     $link_nofollow = get_post_meta( $link_id, ‘_link_nofollow’, true );

     wp_send_json_success( array(
     ‘title’ => $link_title,
     ‘nofollow’ => $link_nofollow,
     ) );
     }

     function save_custom_link_attributes( $data, $postarr ) {

     // Look for content changes
     if (isset($postarr[‘content’])) {
     $content = $postarr[‘content’];

     // Regular expression to find tags
     preg_match_all(‘/]*href=[“‘]([^”‘]*)[“‘][^>]*>(.*?)/i’, $content, $matches, PREG_SET_ORDER);

     foreach ($matches as $match) {
     $full_link = $match[0]; // The entire tag
     $href = $match[1]; // The URL
     $link_text = $match[2]; // The link text

     // Extract the link ID if it exists
     preg_match(‘/data-id=[“‘]?(d+)[“‘]?/i’, $full_link, $id_match);
     $link_id = isset($id_match[1]) ? intval($id_match[1]) : null;

     // If no ID exists, create a new post for the link
     if (!$link_id) {
     $link_post = array(
     ‘post_title’ => $href, // Set post title as the URL
     ‘post_status’ => ‘publish’, // Or any other appropriate status
     ‘post_type’ => ‘custom_link’, // Set to your custom post type
     );

     // Insert the link post and retrieve the new ID
     $link_id = wp_insert_post($link_post);

     // Add the data-id attribute to the a tag in the content
     $new_full_link = str_replace(‘ false,
     ‘label’ => ‘Custom Links’, // Label for the custom post type in the admin menu
     ‘supports’ => array(‘title’), // Add ‘title’ support
     ‘show_ui’ => false, // Hides the Custom Links admin section
     );
     register_post_type( ‘custom_link’, $args );
     }
     “`

     This PHP code performs the following:
     * Registers a custom post type ‘custom_link’ to store link attributes. This post type is hidden from the admin interface.
     * Adds an action `save_custom_link_attributes` that fires when a post is saved. It parses the post content, extracts links, and saves the `title` and `nofollow` attributes for each link. It uses regular expressions to find and extract the attributes. A unique `data-id` attribute is assigned to each link, referencing a ‘custom_link’ post that stores the specific attributes. If a link doesn’t have an ID, one is created.
     * AJAX endpoint to retrieve saved link attributes by link ID. This is used to populate the title and nofollow fields when an existing link is edited.

4. Testing:
   • Create a new post or edit an existing one.
   • Use the Insert Link popup to add a link.
   • Verify that the `title` and `nofollow` fields are present in the popup.
   • Add the desired values to the fields.
   • Save or publish the post.
   • Inspect the HTML code of the published post to ensure that the `title` attribute and `rel=”nofollow”` are correctly added to the link.