How to use “Add link” pop up for a WordPress widget

by

In the WYSIWYG editor of WordPress you get pop up if you want to add a link for a text. Is there a possibility to access this functionality? Because I want to use this pop up for a WordPress widget that I created so that you can add links to a widget if you configure it in the backend.

Here is a screenshot of what I mean:
enter image description here

1

I tried for a bit and could not get this to work perfectly, but it’s close, it’s hard to extend with the <form> for the popup styles being hardcoded, thought possible with more work.

To get started you can:

Enqueue the link popup javascript and styles, the main .js file is wp-includes/wplink.js. Depending on where you loading this you might need to add more or less scripts/styles since it relies on several (thickbox, jQuery-ui, ui-dialog, etc).

wp_enqueue_script('wplink');
wp_enqueue_script('wpdialogs-popup'); //also might need this

// need these styles
wp_enqueue_style('wp-jquery-ui-dialog');
wp_enqueue_style('thickbox');

Set the translatable variable:

var wpLinkL10n = {"title":"Insert\/edit link","update":"Update","save":"Add Link","noTitle":"(no title)","noMatchesFound":"No matches found."};

Now you should be able to extend the wpLink function using something like:

// test button
<button class="link-btn">Click button for Links</button>

jQuery('.link-btn').on('click', function(event) {
  wpActiveEditor = true;
  wpLink.title = "Hello"; //Custom title example
  wpLink.open();    // Open the link popup
  return false;
});

You need a <form> element for the pop-up which by defualt is way to long to paste here, you can see the defualt one here: https://gist.github.com/wycks/6402573

Now there are major problems with this namely I did not add any closing or submission (or checking) javascript to the function, such as wpLink.close or wpLink.textarea, so see wplink.js for further info.

Sorry this just takes way to long to fiddle with, unless I am missing something basic, but that should get you most of the way.

Leave a Comment