This page was created in response to this question on the WordPress support forum. The following Javascript code was used to add span tags with the class custom-letter around the G’s and g’s in the page title. Note that italic tags <i> could have been used instead, but using span tags with a class assigned to them allows the developer to not only add italics, but other styling like font weight, colors, underlining, etc., without having to constantly change the code.
<style>
.custom-letter {
font-style: italic;
}
</style>
<script type="text/javascript">
<!--
jQuery(document).ready(function($){
// Initialize variables
var iLetter = 0;
var iLength = 0;
var cLetter = 'a';
var strNewTitle = "";
// Capture the page title from only pages, not posts
var strTitle = $("body.page .entry-title").text();
// Capture the length of the title
iLength = strTitle.length;
// Step through each letter of the post title
for(iLetter = 0; iLetter < iLength; ++iLetter)
{
// Look at the letter at the particular position
cLetter = strTitle.charAt(iLetter);
// Is the letter one of the ones we're looking for?
if((cLetter == 'g') || (cLetter == 'G'))
{
// Add the span tags around the target letter
// before adding it to the new title
strNewTitle += '<span class="custom-letter">' + cLetter + "</span>";
}
else
{
// Not one we're looking for, just add it to the new title
strNewTitle += cLetter;
}
}
// All done, output the new title
$("body.page .entry-title").html(strNewTitle);
});
//--></script>