Quirky title emphasis idea w/ Regex and JQuery Selectors

Posted by in Uncategorized

Title font emphasis

 

This was a surprisingly easy little project I set myself on a snotty-nosed day of being a winter hermit – a simple way to add emphasis to titles by changing the font of the text preceding a string’s first colon.

Here, I was working with WordPress as my platform, but of course this can be applied to anything HTML/CSS/JS, and was adapted from this JSFiddle.

yourjavascriptfile.js
$(document).ready(function() {
 $('.blog-title').html(function(i, h){
  return h.replace(/^([^:]*)\:/, '$&');
 });
});

Where .blog-title is the CSS Selector for your chosen title. In my case, my CSS selector was .blog-post-title>a, but naturally this depends on your theme. For further information on this (& to become a CSS Selector ninja) check out the jQuery API. ¬†Speaking generally, your theme’s script files can be located in the wp-content/themes/yourthemename directory.

Breaking down the code, we are applying RegEx to the html of the blog-title selector. RegEx is a lot of people’s worst enemy but quite often it becomes your best friend, and I’ve found myself relying a lot on RegEx wizardry. /^([^:]*)\:/ works in this way –

^ matches the beginning of the string we are matching. The parentheses define the first (and only) group of our capture – [^] defines a negated set, matching any character not within this set, so in this case our colon. The asterisk * matches the preceding token(s), therefore the tokens preceding the final, escaped colon \:. At this point, the colons can be swapped for any character you wish to apply this effect to (maybe a hyphen, semi colon?). Phew!

Within the function, we take the selected title string (as h) and use Javascript’s .replace() method to replace it with a new string after the RegEx has been applied – now, any phrase preceding the first colon within the string is ready for our manipulation.

We will be giving the matched string a new class of "title-font", ready to style in our CSS. As each title will be different and dynamically created, we simply cannot replace the string with static code, or each blog post title text would be the same! How impractical. Therefore, we will be using further RegEx. But don’t worry, it’s simple – the $& between the tags is a substitution element, which copies the entire match in the replacement string. Wonderful!

Now we have wrapped each phrase prepending the first colon in each blog title in a "title-font" class, we can edit it however we choose in the theme’s CSS file. In most WordPress themes, the CSS file is located in the wp-content/themes/themename/ directory, however if you are working through your admin interface, you can access the theme’s editor and find the CSS file there*.

style.css
.title-font {
 font-family: 'DancingScriptOTRegular';
 font-size: 2em;
}

This code mirrors the exact attributes I used in my own blog titles. However, it’d also be interesting to play around with colours, drop shadows and background colours too.

So, that’s it! A live example of these can be viewed on my Gin development blog. I was going to post a simple snippet and be done with it, however it’s turned into more of a walkthrough. Oh dear.

* As a side-note, when it comes to customising WP themes in this way, it is by far best practice to embrace WordPress Child Themes, where the original theme is preserved whilst you create and edit a Child Theme to represent your own vision.