[UPDATE! Oct 2015][UPDATE! Oct 2015][UPDATE! Oct 2015][UPDATE! Oct 2015]

Coming back to this I have since realised that just dumping random js into a random core js file is a bad and terrible way to do things, So I will be looking at adding it to wp_head in the child theme functions file. When I’m not so rammed with actual paying work. :p

[UPDATE! Oct 2015][UPDATE! Oct 2015][UPDATE! Oct 2015][UPDATE! Oct 2015]

The aim of this Experiment is to try and style certain characters without having to wrap them in a span and give them a class.

The character I most often find myself wanting to do this with is the humble ampersand. Normal ampersands in most fonts are plain, inelegant or sometimes actually ugly. Since I don’t want any actually ugly things on any of the pages I design my current method is to wrap the ampersand in a span with the class of .amp, adding the following code to the top of my CSS file…

/* SPECIAL AMP & */
.amp {font-family:'Libre Baskerville'; font-style:italic; font-size:90%;}

This is all very well if it’s just me editing the content and there are only a few ampersands. This method gets trickier if I’m handing the site over to a client who is going to be adding content.

So I need a neater solution.

Using this page as a result viewport I’m going to try and make the ampersand below (I’ve made it nice and big so when I fail it will seem like I’m failing harder) a nice, elegant, Libre Baskerville. With no awkward span. Hopefully.

&

Update: Excellent, that’s working. but only if my ampersand is within an h5 tag. Now I have to try and target *any* ampersand.

H1 &

H2 &

H3 &

H4 &

H5 &

H6 &

p &

Final Update: YaY!

The code I used is…

The JavaScript – To go in a likely looking JQuery file (such as jquery.custom.js):

/* ------------------------------------------------- */
// SPECIAL AMPERSANDS
/* ------------------------------------------------- */
jQuery.fn.highlight = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "" + matched + "";});
});
};
$("h1, h2, h3, h4, h5, h6, p").highlight("&","highlight");

The CSS – goes in your CSS file 😉

/*SPECIAL AMPERSANDS*/
span.highlight {
font-family:'Libre Baskerville';
font-style:italic;
font-size: 90%;
}