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
WordPress Insert/Edit Link Class Dropdown

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:
  3. Then, in your theme’s functions.php add the following:

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

Comments

  1. Looks like custom classes aren’t added into the Insert/edit link popup anymore. I’m using WordPress 3.9.1

    • Thanks for your comment Luke. You are correct. This method was written for much older WP versions…3.0.1 and prior. WordPress completely redid the insert link popup more than a year ago, which I believe made this solution no longer work. I have not revisited this to learn a new solution. If you find one, please post a link to it here.