dustin caruso

dustin caruso

Front-End / JavaScript / UI / WordPress / Shopify Developer

capitalize page titles in WordPress

(without using a Plugin)

While working on a custom WordPress theme for a client this morning, I came across a peculiar problem. The words I was using for custom tags and categories which (in this particular theme design) get displayed in the page’s <title> in breadcrumb-like fashion, were being displayed just as they were typed in – with all lower-case characters. After doing some Google searching, I discovered there was no documented easy solution to capitalizing these text values. I found that there were many Plugins available that do this, but I really felt like installing a Plugin just to get some words capitalized seemed like overkill. Eventually, by using some of the code I found in those plugins, I hand-rolled the simple solution I was looking for, and thought I’d share it with y’all here…

First, let me explain that I did not have an issue with getting some things capitalized, like category name, for instance. To do that i simply used the PHP string function, ucwords() inline like so…

<title>Site Name - <?php echo ucwords($category); ?></title>

The problem I was having was with the WordPress template tags: wp_title and the_title. You can’t use ucwords() directly on these because they’re not a string. So, the solution I came up with was to write a small PHP function at the top of my “header.php” file that takes the text values from wp_title and the_title, turns them into a string, and applies capitalization with the ucwords() function…

function captitle($title) {
$title = ucwords($title);
return $title;
add_filter('wp_title', 'captitle');
add_filter('the_title', 'captitle');



View Source on iPhone

iphoneThis is a cool little tidbit for those of you web developers that have an iPhone. A Safari bookmarklet that enables you to “View Source” for any web page while using Safari on the iPhone. A bookmarklet (in case you didn’t know) is “a JavaScript program stored as a URL within a bookmark” as defined by Wikipedia.

The steps that follow will walk you through the process…
1 – Select and “copy” the long string of code below…

* This needs to be one long continuous string, so if you’re cutting and pasting from Firefox, you’ll need to remove the line breaks and/or spaces.

2 – On your computer, go to ANY webpage in Safari and bookmark it using either the “+” (Add Bookmark) button or by choosing “Add Bookmark…” from the “Bookmarks” menu. When saving the bookmark name it “View Source” and save it wherever you’d like in your bookmark hierarchy.

3 – Now, go into the bookmark manager. Do this by clicking the bookmark icon in your bookmarks bar or by choosing “Show All Bookmarks” from the “Bookmarks” menu. Navigate to the bookmark you just saved.

4 – Single-click on the URL for the bookmark to highlight the text for editing, and paste the text/code you just copied above.

5 – Plug in your iPhone and sync it up w/ your bookmarks on your computer.
Now, to actually use it – launch your Safari web browser on your iPhone and navigate to whatever web page you would like to view the source code for. After the page has loaded, click the bookmark icon in the lower Safari navigation bar (3rd from the left), and navigate to your “View Source” bookmark and click it.

And there you have it.