WYSIWYG Button Manager for WordPress

by ·57 Comments

Have you ever managed a large list of content authors on a WordPress site? Ever want to allow certain authors to use more advanced WYSIWYG editor functionality? Keep reading.

Problem

As most users of WordPress 2.x and 2.0.x are aware WordPress come with a very small list of the editor buttons enabled. In order to enable these other buttons you had to open a file (tiny_mce_gzip.php) and add the buttons manually. Now editing the php file is fine for most programmers or folks familiar with WordPress. but for the average user this might be a hard task. Another problem with this option is you are in fact enabling the buttons for all users. If you happen to manage a site with a large list of authors you may want to only allow more advanced WYSIWYG buttons for the authors you trust.

Solution

Announcing the beta version of the WYSIWYG Button Manager for the TinyMCE Editor that comes as part of WordPress. This plug-in allow an administrator user to define WYSIWYG Panels. Each Panel is a set of three rows of allowed buttons. Via this plug-in you can define each button row custom to the users needs. Simple.

So how does this plug-in work? All WYSIWYG Panels are stored as a data structure (array) into the wp_options table. the key for this options record is ‘WYSIWYG_button_manager_data’. when you associate the Panel with the user a new usermeta record is added to the wp_usermeta table. The key for these records are ‘WYSIWYG_panel’.

When the user goes to edit/author an entry a couple of filters are called from WordPress. These filters are ‘mce_buttons’, ‘mce_buttons2’ and ‘mce_buttons3’. If you have defined a Panel that contains any buttons then these will be used over the default WordPress buttons. Really this only overrides the first ‘mce_buttons’ since this is the only variable defined via WordPress. The second and third row are left blank.

Testing

I’ve installed this plug-in into three version of WordPress. I know this plug-in will work with version 2.0.2, 2.0.5 and the latest SVN nightly grab.

Download

The beta version of this plug-in can be downloaded here

Problems

If you use this plug-in and have any problems please do not hesitate to contact me.

Installation

Drop the unzipped file into your wp-content/plugins folder. Via the WordPress Admin interface navigate to the Plugins page. Activate the plug-in. you should see a new menu under the Manage section ‘WYSIWYG Manager’. Only Admin-level users will see this options.

Future

As mentioned this is only a beta version. It’s functional but lacks some of the ‘bling’ options in today’s web 2.0 interfaces. I’d like to provide a complete list of dragable buttons to the user and let them build the editor rows instead of needing to type in the button name. Other ideas include making this plug-in aware of external MCE plug-ins used.

On vacation for the last week of the year

by ·1 Comment

Lucky me. Mindshare closes the office doors for the last week of the year. This on top of getting two weeks vacation to take during the year. What a fantastic company to work for. So this week I’m off and getting bored. Sondra’s family came to town and celebrated Christmas. It was short and sweet. They have all left now and Sondra has gone back to work. So for th emost part I’m on my own during the day. Her mom is also home. so I try and spend my time doing things. At the moment I’m sitting at Mozart’s Coffer house on Lake Austin Blvd. http://www.mozartscoffee.com/. I took a turn walking around Town Lake trying to drop some weight for the new year and before we go on our cruise in Jan. 2007.

I have some projects I’m trying to work on. I’ve changed the theme on this site. And I have a list of WordPress plugins to develop. Mostly these are from working in WP for the past 14 months. Looking at what is offered and what clients request. So keep this site bookmarked so you don’t miss the announcement of the new WordPress plugins I develop.

Relocate WordPress File Upload section

by ·3 Comments

Last week I posted an email to the wp-hackers list asking why in the infinite wisdom of the developers doesn’t the File Upload area on the Posts and Pages editor follow the same functionality as the Custom Fields, Post Excerpt. My point is the File Upload section is huge and take up a lot of screen. Screen area that is not used for every post. The reply from the group was other plugins that will remove the File Upload area entirely. Not really what I wanted. There was a whole other thread on how questions like this should be directed to the WordPress community forums and not the wp-hackers list. But that is a whole other rant.

So I started looking into this. And decided to sit down and fix this. Download the plugin here.

This plugin has been tested on WordPress 2.0.2 – 2.0.5. Have not tested on 2.1beta versions. That will be soon.

development note

The plugin performs two functions:

  1. When the admin user loads the Posts or Page editor a new ‘box’ is created at the bottom of the chain. This box is a place holder for the second step.
  2. When the page loads JavaScript code is added to the HTML head. This JavaScript will call ‘getElementById()’ to find the reference to the iframe ID of the File Upload section and the reference ID for the new ‘box’ created in step 1. Once the IDs are found the next ste is to call thhe JavaScript function ‘appendChild()’ to append the File Upload reference to the new ‘box’. Simple as that.

Installation Instruction

Pretty standard WordPress plugin installation.

  1. Download the plugin here..
  2. The downloaded file is zipped. As the plugin needs to be unzipped to function you can unzip before or after sending this to your server. Upload the plugin file to your WordPress site into the /wp-content/plugins folder.
  3. Signin to your WordPress admin interface. Navigate to the Plugins Management page and Activate the ‘Relocate File Upload’ plugin.
  4. That should be it. Now go to either the Posts or Pages editor screens and see if the File Upload section has been moved to the bottom of the boxes. You should now be able to collapse and expand the section, rearrange the boxes.
  5. If anyone has problems with this plugin please email me.

HREF Filter

by ·1 Comment

This is my first full complete and functional WordPress plugin. Give me a moment…Okay.

What is it and what does it do? Good question. I support a site that uses WordPress. On this site are some links to an external eCommerce system. The user will generally surf through the main site and click on the link to be taken to a donation page or some other purchase oriented page. Well one morning a few weeks ago I received an urgent phone call from the client. Seems this eCommerce system was down. Which meant the links were dead. The client was calling to ask me to go through the site and for every link to that external system change the HREF to point to an internal page. He was going to start working on the hard part he said, coming up with the copy for the page. I just had to find and replace all the links. Somehow I think I actually heard a snicker in his voice.

Well I go to thinking. I can make the needed changes to the template code where needed. I counted no less than 6 links in the menu and sidebar alone. But what about the dozens of pages of copy. Now, I consider myself a programmer’s programmer. I’ll be damned if I’m going to go through each page and change the links. Also since the external system will most likely be back online I’d have to repeat this little exercise and change the links back to point to the external system again.

So I put together a little JavaScript that will launch via the onLoad event. The first thing to do is find on the links on the given page. No big problem there. Using the JavaScript function ‘getElementsByTagName’ to find all the anchors. Then a simple for loop to check each HREF. If the link began with the external hostname I replaced the full HREF with an internal URL to his new message page. Simple enough. The JavaScript worked like a charm. Only problem is this external eCommerce system seems to be very unstable and there were days when I had to ‘activate’ and ‘de-activate’ JavaScript almost a dozen times. That’s it I cried. I need to put this function into the user’s hands. So I started on the journey to write this working JavScript into a WordPress plugin.

HREF Filter Setup How-to
1. First download the plugin.
2. Unzip this into the WordPress plugins folder ‘/wp-content/plugins’.
3. Access you WordPress admin. Navigate to the Plugins page. Click on the activate link in the right-most column.
4. Once the Plugin is activated, navigate to the Manage -> HREF Filter menu. Note this is not Options but Manage.

HREF Filter Usage
Upon activation there are two Filtered added as examples. There are basically two types of filters supports.

Replace only matched string – Think of this as a search and replace. Enter the searched pattern. Enter in the Replace pattern. For example your search is ‘Miles’ and the replace is ‘Davis’. Then is you have an href like http://www.miles.com/see-miles-play/. This will be filtered and changed to http://www.davis.com/see-davis-play/. The replace value can be any length and can also include the URL node seperator ‘/’.

Replace full HREF value – This is more ‘find the href the contains this pattern and replace the full href value’ filter. For example you have a search pattern of ‘google’ and a replace pattern of ‘http://www.yahoo.com’. Basically any href value that contains the search pattern will be replaced. For the replace you may use values with the leading slash as in ‘/someurl’. This replace filter will be checked and the site URL will be added to the beginning.

Also as part of the Filter setup is the ability to turn the filter off or on. This is handy in that you don’t need to delete and recreate the filter.

As mentioned before, the plugin uses 90% JavaScript code to search/replace the anchor href values. This JavaScript is added to the page’s html header via the WordPress ‘wp_head’ action. As part of this action the function ‘ch_hf_loader’ is called and the JavaScript ‘addLoadEvent’ is called to add the bootstrap function ‘ch_hf_proc_links’. This will start the processing.

You can also call this function ‘ch_hf_loader()’ function direct via PHP to load the needed JavaScript. Also if for some reason you don’t want to auto-load the JavaScript Event, you can also call the function with a single value ‘ch_hf_loader(1)’. This will disable the addLoadEvent call. You then need to call the function JavaScript function ‘ch_hf_proc_links’ yourself to start the processing.

This means once the filters are defined via the WordPress admin interface they will automatically be added to your page’s html head.
Enjoy and feel free to email me with request. I do have plans for the next version of this plugin coming up soon. This is the initial release.