(No Ratings Yet)
Loading ...Customizing Your WYSIWYG Editor Buttons in Wordpress
Category: Themes and Tricks
- CSS We Are The Buzz
(5 out of 5) - Throw (5 out of 5)
- qmula (5 out of 5)
- Heartworker (5 out of 5)
- Decently Exposed (5 out of 5)
- Gmcosta (5 out of 5)
- FreelanceDaddy (5 out of 5)
- LifeStyle Web (5 out of 5)
- Tech Tunes (5 out of 5)
- DePo Masthead (3 out of 5)
WPCandy.com gave a nice tutorial this week on how to add and edit the behaviors of WYSIWYG buttons in Wordpress. This inspired me to make three additional hacks of my own:
Adding ‘target=blank’ to all outgoing links
Whenever I’m linking something in a blog post, I use the target attribute to open it in a new window. Like with all three examples, you’ll need to first open /wp-includes/js/quicktags.js. Scroll to line 371 and change this…
edButtons[i].tagStart = '<a href="' + URL + '">';
…to this…
edButtons[i].tagStart = '<a href="' + URL + '" target="blank">';
Making image paths absolute
One main reason I like to keep my image paths absolute is so they show up for people using feedreaders. Currently Wordpress makes you type the entire URI, but this can be remedied by changing line 381 from this…
var myValue = prompt('Enter the URL of the image', 'http://');
…to this…
var myValue = prompt('Enter the URL of the image', 'http://www.mysite.com/images/');
Adding CSS classes to images
I apply a CSS class to nearly every image in my blog so that it’s got the proper border and margins. If you want to be prompted for class name each time, scroll to the end of line 385, make a new line, and paste this:
+ '" class="' + prompt('Enter a CSS class', '')
