Periodically I receive designs that contain widget titles where either the first or last word is uniquely styled. Example below.
By default WordPress strips any and all tags from Text Widget title field, so achieving this can be tedious. I’ve found the easiest way is to just some simple jQuery to target the widget titles and then apply special markup to either the first or last word in the element.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function($){ | |
| // Last word in title | |
| $('.sidebar-primary .widget-title').html(function(){ | |
| var text = $(this).text().split(' '); | |
| var last = text.pop(); | |
| return text.join(" ") + (text.length > 0 ? ' <span class="last">'+last+'</span>' : last); | |
| }); | |
| // First word in title | |
| $('.sidebar-primary .widget-title').html(function(){ | |
| var text = $(this).text().split(' '); | |
| var first = text.shift(); | |
| return (text.length > 0 ? '<span class="first">'+first+'</span> ' : first) + text.join(" "); | |
| }); | |
| }); |
Questions, comments, or suggestion for improvement? Leave a comment on the GitHub Gist page.