Add A CSS Class to WordPress Insert/Edit Link Dropdown

WordPress Situation

Note: This applies to WordPress 3.0.1 versions and prior. Newer versions of WordPress use a different insert link box and this solution no longer works.

Want to have a way to format a link in the WordPress content editor box using only the “Visual” tab (ie not having to go to the “HTML” tab and manually type in a class for the link.

Solution

Add a CSS class to the insert/edit link dropdown menu

The Reason

Although we (developers and designers) tell our clients that Content Management Systems like WordPress are “really easy to use, you’ll have no problem at all,” we know that pages still tend to get broken…often.

So, I’m always looking for better ways to “foolproof” and help my clients add and edit their content using WordPress.

When adding link in WordPress’s content editor recently I realized that to format the link the way I wanted (and the way the designer designed it), I was going to have to view the HTML tab and assign the link a CSS class. I can manage that no problem, but 9 out of 10 of my clients can’t or don’t think it should be that hard.

How To

I found some simple, effective information on a few options on the WordPress Support site here (especially kchevalier’s response).

If you want a plugin for this, here’s one called Link Indication.

Or, if you want to set it up yourself, here’s how:

1. Create a stylesheet in your theme directory and name it whatever you’d like ‘dropdowns.css’ (for example).
2. Add your desired link classes in there, like so:

   a.bigbold {
      font-size: big;
      font-weight: bold;
   }

3. Then, in your theme’s functions.php add the following:

   function addLinkClasses( $wp ) {
      $wp .= ',' . get_bloginfo('stylesheet_directory') . '/dropdowns.css';
      return $wp;
   }
   
   if ( function_exists( 'add_filter' ) ) {
      add_filter( 'mce_css', 'addLinkClasses' );
   }

That’s it. Simple, yet effective for your clients (or you) to try to stay within the look and feel you designed for them.