Automatically Add Link Title Attributes in WordPress

Back in the day before the Gutenberg editor and even before WordPress updated the classic editor you may remember that when inserting links in your posts you could define a title attribute for your links. WordPress decided to remove the ability to define your link title attributes because for the most part when adding links in post content the title attribute is not needed and can actually cause accessibility reasons.

The link title attribute creates that little tooltip you see when hovering over links on a website and it should only be used if you need to provide additional information about the link. There are some SEO “extremists” though that believe all links should have title attributes (I don’t believe so). But adding link title attributes to all links on your site can be a difficult task if done manually, especially on a large site with a lot of content.

What is the link title tag?

Before getting started with the code lets quickly review what a title tag is and what it’s used for. Personally, I resort to “MDN Web Docs” for this type of thing and in their documentation it states the following:

The title global attribute contains text representing advisory information related to the element it belongs to.

view source

Simply speaking, the title attribute is used to add extra information about an element which can be used by the browser, crawlers and assistive technology. This means that the title attribute should convey different information then what’s already available.

You should NOT use a link title to provide the same information over again to the user. This will cause a usability issue and annoy people, especially those using text to speech because they will hear the same text read to them twice.

Have you ever been to a site and hovered over a text link and seen the same exact text displayed in the tooltip? You didn’t need to see the same thing you had hovered on.

How to Title Attributes Automatically?

Now that you understand what the title attribute is and how it should be used lets dig into the code needed to automatically add title attributes to your site.

Warning: Before you go adding code to your site, keep in mind that I personally do NOT recommend automatically adding title attributes to your site links. This article was originally written many years ago when adding title attributes to all your links was recommended by all SEO excerpts. This is no longer the case and link title attributes should be manually added only as needed.

Below is a sample code you can use which will scan your post content to locate all links and add title attributes to any links that are missing them. It’s important to note that it’s only possible to automatically add title attributes to post content links. There is no way possible to automatically modify links added via a theme or plugins. Well, at least not in any way that will work for all themes and plugins. If you need to modify the way links work in a theme or plugin you will need to contact the product developer to see if there are hooks available.

The Code:

/**
 * Parses the $content to automatically add link titles.
 *
 * @link https://www.wpexplorer.com/add-link-titles-wordpress/
 */
function wpex_auto_add_link_titles( $content ) {
	if ( empty( $content ) || ! class_exists( 'DOMDocument' ) ) {
		return $content;
	}

	$links = [];

	// Create new dom object.
	$dom = new DOMDocument;

	// Load html into the object.
	$dom->loadHTML( utf8_decode( $content ) );

	// Discard white space.
	$dom->preserveWhiteSpace = false;

	// Loop through all content links.
	foreach ( $dom->getElementsByTagName( 'a' ) as $link ) {

		// If the title attribute is already defined no need to do anything.
		if ( $link->getAttribute( 'title' ) ) {
			continue;
		}

		// Get link text.
		$link_text = $link->textContent;

		// If there isn't any link text (most probably an image) lets try and get it from the first child.
		if ( ! $link_text && ! empty( $link->firstChild ) && $link->firstChild->hasAttributes() ) {

			// Get alt.
			$alt = $link->firstChild->getAttribute( 'alt' );

			// If no alt get image title.
			$alt = $alt ?: $link->firstChild->getAttribute( 'title' );

			// Clean up alt (remove dashses and underscores which are common in WP).
			$alt = str_replace( '-', ' ', $alt );
			$alt = str_replace( '_', ' ', $alt );

			// Return cleaned up alt.
			$link_text = $alt;
		}

		// Save links and link text in $links array.
		if ( $link_text ) {
			$links[$link_text] = $link->getAttribute( 'href' );
		}

	}

	// Loop through links array and update post content to add link titles.
	if ( ! empty( $links ) ) {
		foreach ( $links as $text => $link ) {
			if ( $link && $text ) {
				$text    = sanitize_text_field( $text );
				$text    = ucwords( $text );
				$replace = $link .'" title="'. esc_attr( $text ) .'"';
				$content = str_replace( $link .'"', $replace, $content );
			}

		}
	}

	return $content;
}
add_filter( 'the_content', 'wpex_auto_add_link_titles' );

You can also view the full code on the Github repository which has been coded as a plugin so you can download it and upload it to your site and activate instead of using a child theme or code snippets plugin.