Style a specific word whenever it appears in a post

I am trying to get a specific word styled differently whenever it appears in a post I make. I know about the use of span but I want this to happen automatically with a predefined style for the exact word. Please is this possible? Am not too good on Javascript. I have searched but the codes I have seen doesnt seem to work.
I want for instance if I have a word like “Orange” appear anywhere in my post it will be styled differently with a font color, background and others. Thanks

Well, PHP is unlikely to be the correct solution unless you’re loading your text dynamically. So it rather depends on HOW your text is being delivered.

On the case of Javascript, it would be fairly simple:

document.getElementById("mytextbox").innerHTML = document.getElementById("mytextbox").innerHTML.replace(/Orange/g,"<span class='orange'>Orange</span>");
1 Like

Wow thats quite a fast answer m_hutley :stuck_out_tongue_winking_eye: let me see if it works in my case. Please if I may ask how do I get this to function.php cuz I dont want it to break my site incase. Thanks

m_hutley is correct on this one, and his code snippet should give you a start. It definitely is going to be JavaScript / jQuery to accomplish this.

What words (strings) do you want targeted, and how are you trying to style them?

1 Like

Honestly I am proud of you guys giving me time to achieve my goal. I want to target “download mp3” and then I will style it the way I want. I understand css well and html but this java is a big punishment to me.

Even though you’re using WordPress and as long as you can modify the CSS files, using JavaScript to target something like this is not a necessary step when you should be modifying it only by HTML / CSS. Unless things are changed, I do remember working with a friend on a WordPress site about 4-5 years ago, and we did have the ability to manipulate the code.

For example:
<a href="../music/songname1.mp3" class="mp3download">Download MP3</a>


a.mp3download {
   /* whatever else you want */

:rofl::stuck_out_tongue_winking_eye: I know about class and it never occured to me. This means every link I want to post I will include that class in it. I am thinking of an easier way to do it so that whenever I write Download mp3 it automatically styles it. This is because I have so many mp3 files before now and going back to put class on them will be hard.

but if this is the only way that can work, I can bring out a month to revisit all my post then.

I’m assuming you mean JavaScript.

If you feel more comfortable writing PHP and working with WordPress you could put together some type of post content filter. But I have a feeling you should probably just train yourself to put the HTML into your posts so you can use CSS to style the words.

eg. it easier to post

blah, bleh <span class="download">Download</span> etc. etc. 

than to post

blah, bleh Download etc. etc. 

and change it after the fact.

1 Like

currently what I do is upload music for people. In nigeria we do upload mp3 files for artists and the way to call is is normally write “Download” then copy the mp3 link and hyperlink the download text. For instance. <a href=" ">Download</a>
but recently I do post with wordpress mobile app which its hard to style this individually.
I know class arent used by google for seo so I feel its not important to start stressing so much trying to write class everytime I am posting or waiting until I log in with pc. Here in Nigeria internet service cost is so high that you can subscribe for a month and your data finishes in 2 days and my pc likes consuming data like Beer. I need something more easier to achieve a lot before my data gets finished. But if there is no way or you guys says the way you pointed out is the best for me and it can help me in SEO i can endure and go with it. I want to say I will also be happy if I make friends that will guide me on SEO so that I can start appearing on first page on google when people search for music in Nigeria. Not to border you but if I finish with my design you could help guide me on that as well. If I succeed I will come to your country and buy you some beer:stuck_out_tongue_winking_eye:

SEO really means nothing in solving this - absolutely not important to what you are trying to do.

Just please add in the HTML and CSS like we have shown you, show us where in your code you have placed it, and how you would like to style it.

<a class="mp3download" href="../folder/somesongfile.mp3">Download MP3</a>

CSS file:

a.mp3download {
       /* other styles you want */

I’m all set on the beer. :beer: Thanks, though.
If you work toward your goals and show us what you have tried, I will be around here to try to help in the best way I know how. That’s what people do for me here.

1 Like

Like I said before I know about class. I will start making use of it now if thats the case. Thanks very much. This is how it looks on my testing site where I am working on the theme Download button for what I was intending doing with js.


.mp3download {
background: #ff0000 !important;
position: relative;
border: 2px solid #ffff00 !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 4px !important;
display: inline-block !important;
padding: 5px 45px 5px 10px !important;
letter-spacing: 0 !important;
.mp3download::after {
content: “”;
display: inline-block;
position: absolute;
right: 5px;
top: 0px;
height: 35px;
width: 35px;
background: url( no-repeat !important;
background-size: 35px !important;

That download button looks distinctly styled to me. What do you want to do differently with it?

Also, you wrote that you want to style other words as well. Where are they, and what have you tried to do with them?

1 Like

just so I could use it to point people who want to download music on my site. I saw that you play guitar? I love music so much and I play guitar too. Can we chat privately and talk about music? I own a personal studio in my room. well if you have time can you check my last post about getting most viewed post in a week with pagination on wordpress? Thanks

@Mittineague ok! How do you do all this?

In the ACP “Add New Post”, on the right side over the editor, you should see “Visual” and “Text”. In order to write your own HTML into the post you should use “Text”. WordPress has gone through a few versions since I last used it so be sure to test to make sure other changes I’m not aware of won’t cause anything unexpected.

1 Like