WordPress uses TinyMCE for its visual editor, making in hard to use regular Javascript for custom situations. Luckily, TinyMCE provides some callbacks that we can use.
In this example, I’ll show how you can do something when content of visual editor in WordPress has been accessed or changed by using TinyMCE’s handle_event_callback callback.
To register this callback, you need to use WordPress teeny_mce_before_init filter. This filter is used to filter TinyMCE’s options list before initialization. In this case, it would look like:
/**
* Register callback on TinyMCE focus
*/
function md_callback_on_tinymce_click( $mceInit ) {
$mceInit['handle_event_callback'] = "mdCallbackFunction";
return $mceInit;
}
mdCallbackFunction is just a normal Javascript function that accepts parameter event and that you can place anywhere in you custom Javascript code. In this case, it would look like:
function mdCallbackFunction(e) {
// Do something
}
Here is one real world situation where this trick can be used. Code below will hide Submit button on bbPress forms and it will show it only when you click on a text editor, either visual or text.
/**
* Add bbPress TinyMCE focus callback function.
*/
function md_bbp_show_submit_on_tinymce_click( $mceInit ) {
$mceInit['handle_event_callback'] = "mdShowBbpSubmit";
return $mceInit;
}
/**
* Display submit button on bbPress TinyMCE focus.
*/
function md_register_bbp_submit_onclick() {
add_filter( 'teeny_mce_before_init', 'md_bbp_show_submit_on_tinymce_click' );
?>
<script type="text/javascript">
jQuery(document).ready(function($){
// Hide Submit button
$('#bbp_topic_submit').hide();
$('#bbp_reply_submit').hide();
// Display button when clicked in Text mode
$("#bbp_topic_content").live('focusin', function (data) {
$('#bbp_topic_submit').show();
});
$("#bbp_reply_content").live('focusin', function (data) {
$('#bbp_reply_submit').show();
});
});
function mdShowBbpSubmit(e) {
jQuery('#bbp_reply_submit').show();
jQuery('#bbp_topic_submit').show();
}
</script>
<?php
}
add_action( 'bbp_theme_before_reply_form', 'md_register_bbp_submit_onclick' );
add_action( 'bbp_theme_before_topic_form', 'md_register_bbp_submit_onclick' );
If you are using WordPress in language other than English, you’ve experienced this painful process:
Although there was workaround that included using WordPress filters to point to different location for translations, WordPress 3.5 includes built-in solution that is, unfortunately, limited to themes only.
From now on, you can place your theme’s translation outside of theme’s directory in a themes subdirectory of your languages directory (WP_LANG_DIR). So, if your languages directory is default wp-content/languages, directory you should use is wp-content/languages/themes.
Another thing worth noting is that you need to change filename of translation if you use above solution. Theme translations files use only language codes as their names, for example sr_RS.mo. If you put translation in a WP_LANG_DIR/themes, you need to prefix this filename with theme’s textdomain. This textdomain is usually same as theme’s directory name, though you can confirm this by searching theme’s function.php file (or file included from over there) for load_theme_textdomain() function.
For example, translation of Twenty Twelve theme should be named twentytwelve-sr_RS.mo, for Hybrid theme hybrid-sr_RS.mo, for Responsive theme responsive-sr_RS.mo etc.
To summarize everything, instead of having your translation like
wp-content/themes/hybrid/languages/sr_RS.mo
move to
wp-content/languages/themes/hybrid-sr_RS.mo
Hopefully, WordPress 3.6 will include support for plugins as well, or, even better, full language packs support. If you are one that have need for it, beg WordPress developers to do something about that.