Strangely, the <hr> tag (horizontal rule) button isn’t enabled by default in the WordPress Visual Editor (TinyMCE). Here’s how to turn it on, along with any other buttons you want to use.
Open up your functions.php file and add the following code:
function enable_more_buttons($buttons) { $buttons[] = 'hr'; /* Repeat with any other buttons you want to add, e.g. $buttons[] = 'fontselect'; $buttons[] = 'sup'; */ return $buttons; } add_filter("mce_buttons", "enable_more_buttons"); |
The idea here is that you are tapping into the filter hooks which are applied to each row of buttons on the editor toolbar.
The example above adds the <hr> button to the first row of buttons. If you’d like to add to the second row you’d use the mce_buttons_2 filter hook, etc etc.
add_filter("mce_buttons_2", "enable_more_buttons"); // add to second row //add_filter("mce_buttons_3", "enable_more_buttons"); // add to third row |
Hope you find this useful 🙂
it worked for me. wow.
Small but awesome tip. Many thanks
Awesome tip! I never knew adding a button was so easy! It worked for me in WP 3.2.1
Thanks for the tip Charlie. Any idea on how to stylize it? I understand how to stylize things in css, but not sure how to have this automatically stylized. Here is a link explaining how to add various stylings, but mentions having to include various things to comply with cross browser compatibility: http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm.
I just want to change the color, and want to make sure it looks the same in all browsers. Anyone know how to do this properly? Thanks
This worked really well for me.
I just styled the hr in my styles.css something like:
hr { border: 0;
border-top: 1px dotted #CCCCCC;
color: #CCC;
}
Cheers, P
Cheers Paul, yeah that’s a nice way to get a simple hr which I use often too.. Thanks for sharing!
Ok, that was the easiest function to add buttons.
Thanks a lot!