Wordpress manipulation using Javascript/DHTML instead of plugin hooks
One of Wordpress’ greatest features, which has undoubtedly contributed to its great success, is the plugin system. Plugin developers use the action and filter hooks offered by the plugin API to tap into the Wordpress system, without the need to hack the core code.
Whilst the list of action and filter hooks offered is substantial and affords much modification freedom, there are going to be times when there is no action or filter to do the job. I was recently asked to develop a plugin that added a few small things to the Wordpress administration backend. A quick browse of the plugin API led me to conclude that there was no plugin hook available which would directly enable me to modify the area in question. So I was about to edit the relevant core Wordpress files when I realised that I could end up indirectly using a plugin hook after all.
Following is a basic example to illustrate the idea. Take the top-right section of the Wordpress backend, in particular, the part that writes ‘Howdy, {$user_identity}!’, where {$user_identity} is the username of the logged in user. Here is an example screenshot:
Wordpress Screenshot 1
Say we wanted to change the ‘Howdy’ to ‘Welcome’. There is no plugin hook in the section of code at ‘wp-admin/admin-header.php’ where this top-right menu is created. But we can do this. Using an appropriately placed plugin hook subsequent to this section of code, we can add some Javascript/DHTML code which alters the content of the <div>; element in which the ‘Howdy, admin!’ appears. A suitable hook to use is the ‘admin_footer’ action, because
<?php do_action('admin_footer', ''); ?>
is located at a subsequent code section and because it is in a place where adding
<script type="text/javascript"></script>
will not cause a problem.
Now, the <div> element which contains the top-right menu is <div id=”user_info”>. With that knowledge, the following code will achieve the modification in question:
<?phpfunction Howdy_to_Welcome() {
?>
<script type="text/javascript">
document.getElementById('user_info').innerHTML = document.getElementById('user_info').innerHTML.replace("Howdy", "Welcome");
</script><?php
}add_action('admin_footer', 'Howdy_to_Welcome');
?>
That’s it!
Tags: DHTML, Javascript, Wordpress, Wordpress Plugin