Personalizing WordPress Admin with jQuery

It’s been a busy couple weeks, as is normal when any new year begins. My clients are geared up and anxious to get their campaigns started, to beat last years sales numbers and pull back-burner projects to the front again. I haven’t been fortunate enough to have time to craft any crazy new ideas or write any engaging or interesting posts yet this year.

So I apologize for this relatively lame post! But, I think some credit is due for how quick it is to understand, how easy it is to apply and how it might give your latest WordPress (or other CMS) site a small edge.

The WordPress Admin is becoming dangerously common if you’re a CMS developer. While the public facing side of a WordPress site is unique (if you’re not using a canned theme), the back-end admin that your client will see is shared by almost 75 million other WordPress sites (source).  The last thing you want your clients to say is, “Hey wait a minute, did you just charge me $5,000 for a basic WordPress site!?”

On the flip side, you certainly don’t want to go picking apart WordPress Admin core files, or adding a mess of code to your functions.php just to give a bit of personalization to the Admin. Enter JavaScript (and jQuery).

A simple JavaScript file can be completely independent of any theme or WordPress instance. It can be dropped into any WordPress site to almost instantly add customization to the back-end.

Here’s the quick how-to:

Loading the script

In our WordPress functions.php, we’ll toss in an action that loads a JavaScript file only on Admin pages.

functions.php

function admin_js() { 
  echo '<script type="text/" src="/src/js/admin.js"></script>';
} 
add_action('admin_head', 'admin_js'); 

Modifying the HTML

Now we just need to have a peek at the Admin HTML source to figure how we can best modify the DOM text to our needs. In the example below, I’ve demonstrated a scenario that might work for a Bookstore WordPress site.

Instead of seeing things like “New Post” or “Add Featured Image”, the admin user would see “New Book Review” or “Add Book Image”.

admin.js

(function($) {

$(document).ready(function() {	
	$('#postimagediv h3 span').text('Book Image');
	$('#postexcerpt h3 span').text('Book Review Summary');
	$('#postexcerpt .inside p').remove();

	$('#wp-content-media-buttons').after('
<h3 style="position: absolute; margin: 0 0 0 15em;">Book Review</h3>');

	$('.wp-menu-name, .wrap h2, .wp-submenu a').each(function() {
		$(this).html( $(this).html().replace('Post', 'Book Review'));
	});

	$('#postimagediv .inside a').each(function() {
		$(this).html( $(this).html().replace('featured', 'book'));
	});

});

})(jQuery);

As you can see, it’s just a matter of choosen the parts of the DOM you wish to modify and performing basic string replacements.

And, of course, this technique is not specific to WordPress, it could be used to add customizations to any CMS.