WordPress themes often contain sections of text that can only be entered as plain text. For example, my site is based on the Divi theme and on the desktop version of my homepage I use the Fullwidth Header module. This contains text entry fields for Title and Sub-text. There are two Call to Action buttons underneath. It looks great in my opinion.

However, I created a heatmap using the Smartlook tool and what I found was that people are more likely to try to mouse-click on the large words than they are on the actual Call to Action buttons! See the pic below:

smartlook heatmap PC

Yeah, how mad is that? Never would have guessed otherwise. Thank you Smartlook! You can check their tool here for free. I have no affiliation with them.

So my next step was to wonder how to make the text into Hypertext links.

So I started Googling for “how to add hyperlinks to text with CSS” and “how to add hyperlinks to text with javascript”. The consensus is that whilst it’s possible with the “Content” function in CSS, Javascript is the way forward. What I really wanted though was a much quicker and user friendly way of achieving this, that I could easily remove later. I’ve requested Elegant Themes add it to Divi add it as a new feature. Meanwhile, I found a super easy way of adding the functionality with a WordPress plugin called “Real Time Find And Replace”. It seems very efficient and doesn’t perceptibly slow page load at all.

It adds a new submenu to your Tools menu, allowing you to make modifications to the HTML output before it gets sent to the user. Therefore it does not alter any of your files or code and can be deactivated safely at any time. Here’s a pic of what mine looks like for this use case:

add hyperlinks to text in wordpress real time find replace

I had to add the style because the theme was automatically changing the subtext blue, because blue = link in the theme settings (unless Header).

Note that it will apply the changes across the entire site, so think carefully before applying it in case other pages might be affected in unwanted ways.

You could also use it to remove things if you it wasn’t suitable to use CSS “display:none” and you just wanted to remove a few words – leave the replace box blank!

It also lets you use RegEx expressions. If you are a Wizard that understands it.

I think it’s limited to 5 entries unless you pay.

Hope that helps someone! Please post in comments if it works for you.

Previous post
What is the Windows "Hosts" file, and how do you…