Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a multi-author website and no matter how much education I give to Authors, 80%+ either refuse to or forget to use headings in their posts, instead they use bold text on a separate line to designate a new section of the post.

In my battle, I am thinking that I should try to add a tooltip to the B in the wp_editor with a note that simply describes when to use and when not to use the B and when to use Heading instead.

I'm not sure if it makes a difference in how to target it, but I should also note that I use wp_editor on comments, on the bio section of the user profile, as well as on a custom meta field on the new post screen.

I already have notes added to various meta boxes on the new post page, using the methods described in - How to Add Reminders/Notes to New Post Meta Boxes

I have created an alerts.js file in /theme_name/js/ and added the following into my functions.php

//Load jQuery to display New Post meta notes.
function load_my_alerts(){
      wp_register_script( 
        'my_alerts', 
        get_template_directory_uri() . '/js/alerts.js', 
        array( 'jquery' )
    );
    wp_enqueue_script( 'my_alerts' );
}
add_action('admin_enqueue_scripts', 'load_my_alerts');

Complete contents of alerts.js

jQuery(document).ready(function($){

$('<div/>', {
    id: 'tags-meta-reminder',
    class: 'meta-box-reminder',
    html: '<p style="padding:5px;border:2px #fdff30 solid">Add 1 to 5 tags to describle your article. Any tags beyond the first 5 will be automatically removed. <a href="/faq#tags" target="_blank">Need Help?</a></p>'
}).appendTo('#tagsdiv-post_tag .howto');

$('<div/>', {
    id: 'category-meta-reminder',
    class: 'meta-box-reminder',
    html: '<p class="howto" style="margin:1em;line-height:1.4em;padding:5px;border:2px #fdff30 solid">Select only 1 category for your article. If you select multiple categories, they will be removed and the category listed 1st alphabetically will become the category for your article. <a href="/faq#categories" target="_blank">Need Help?</a></p>'
}).appendTo('#categorydiv');

$('<div/>', {
    id: 'featured-image-meta-reminder',
    class: 'meta-box-reminder',
    html: '<p class="howto" style="margin:1em;line-height:1.4em;padding:5px;border:2px #fdff30 solid">Upload an image at least 640px wide and 360px tall. <a href="/faq#add_featured" target="_blank">Need Help?</a></p>'
}).appendTo('#postimagediv');

$('<div/>', {
    id: 'cite-meta-reminder',
    class: 'meta-box-reminder',
    html: '<p class="howto" style="margin:1em;line-height:1.4em;padding:5px;border:2px #fdff30 solid">Fill out the information in this section when your article directly references another article, blog post, interview, TV or radio show segment, etc. Fill it out as completely as possible, but not all fields are required. Do not fill out this section if you are simply referencing box scores or statistics. <a href="/faq#cite" target="_blank">Need Help?</a></p>'
}).appendTo('#ecpt_metabox_4');

});
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

The "bold" icon on the visual editor is represented by a <span> with the class of mce_bold. You can target it using jQuery pretty easily and add a tooltip:

jQuery('.mce_bold').attr('title', 'Please use an H2 tag instead.');

If you want to target it inside the HTML editor as well, use this code instead:

jQuery('.mce_bold, #qt_content_strong').attr('title', 'Please use an H2 tag instead.');

Update

To add this to your alert.js file, just add it inside your jQuery ready() call like so:

jQuery(document).ready(function($){

    $('<div/>', { // Cut out for brevity

    $('<div/>', { // Cut out for brevity

    $('<div/>', { // Cut out for brevity

    $('<div/>', { // Cut out for brevity

    $('.mce_bold, #qt_content_strong').attr('title', 'Please use an H2 tag instead.');
});

I didn't copy your entire code, just enough to give you an idea of where to put things. Also, since you're inside a closure that defines $ as an alias for jQuery, you can just use it instead.

I've tested this via the browser console debugger, and it works as advertised. If you have any problems, double check your console to see if JS errors are being thrown anywhere else.

share|improve this answer
    
Thanks. How do I go about implementing this? I already have an alerts.js file that I use for adding notes to tags, categories and featured image meta boxes. I figure this would be a good place to include it. This is the method I used to create it - wordpress.stackexchange.com/questions/49014/… –  Travis Pflanz May 1 '12 at 21:41
    
If you already have a JS file you enqueue on the admin side, use that. If not, you'll need to create one and use admin_enqueue_scripts to add it on the admin side. –  EAMann May 1 '12 at 22:21
    
I suppose I am asking how to add this to the alerts.js file I already have. I have pasted it as you've written, but nothing happens. I even tried to delete everything else from the file, only leaving your code, still nothing showed up. –  Travis Pflanz May 1 '12 at 22:36
    
I'd need to see what's in your alert.js file and exactly how you're registering the file with WordPress. Please edit your question to include those details. –  EAMann May 2 '12 at 2:51
    
updated question –  Travis Pflanz May 2 '12 at 2:59
show 4 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.