Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

1 Answer 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.

share|improve this answer
    
Thank you very much for your help. I solved the style/script references with using: <? wp_editor('', ''); ?> - So maybe I can get a shorter solution! But there is still the question on how to receive the selected link. –  Benny Neugebauer Sep 7 '13 at 15:12
    
Thanks for posting this; it led to me finding the answer I needed. In my case I just had to explicitly enqueue the "wpdialogs" script, which wasn't working when specified as a dependency. wp_enqueue_script('wpdialogs'); –  Inigoesdr Jul 10 at 22:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.