How can I use the built in WordPress “browse link” functionality?

1 Views

I’m coding a widget and I’d like the user to be able to pick a link like you can when editing a regular posts or page (when you click on the little link icon and you get the AJAX search functionality in the pop up). Does anyone know how I get this working? I’ve got a HTML button which I would like to attach and click even to, and a field for the value to go in.

In class-wp-editor.php I found a few interesting things, and wondered if I might need these files..?

Read More
wp_enqueue_script('wp-fullscreen');
wp_enqueue_script('wplink');

On calling fullscreen.link();,like the file mentioned above, I get this error:

Uncaught ReferenceError: wpActiveEditor is not defined

..and I’m stumped for now, because the JS that references that variable looks crazy to me.

Care to point me in the right direction? I’d love to get this working, it will make a killer user interface for my widgets!

enter image description here

——edit——-

Not that much code so far, apart from the script inclusions that I have previously stated; 

<label for="<?php echo $this->get_field_name('link'); ?>">Link URL (including http://) : </label>
<input type="text" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" value="<?php if(isset($link)) echo esc_attr($link); ?>" class="widefat" />
<button class="secondary" id="choose_link">Link Browser</button>

..the part of the JS which is supposed to trigger the link script to open; 

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});
Post Views: 1

Related posts

2 comments

  1. I invoke the link dialogue within the metabox class I use for development. Its a tad hacky but can be done, until something more robust is developed.

    You can invoke the link box by first enqueing the required js, and then interacting with the wp-link js files methods.

    Make sure you have enqueued wp-link

    1 / wp_enqueue_script( 'wp-link' );

    2 / Set up your ui. I usually use a button to invoke the link dialogue from and a textfield to handle the links URL.

    3 / Invoke link dialogue

    var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners

function _init() {
    $('body').on('click', '.lm-link-button', function(event) {
        _addLinkListeners();
        _link_sideload = false;

        var link_val_container = $('#your_input_field');

        if ( typeof wpActiveEditor != 'undefined') {
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        } else {
            window.wpActiveEditor = true;
            _link_sideload = true;
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        }
        return false;
    });

}

/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
    $('body').on('click', '#wp-link-submit', function(event) {
        var linkAtts = wpLink.getAttrs();
        var link_val_container = $('#your_input_field');
        link_val_container.val(linkAtts.href);
        _removeLinkListeners();
        return false;
    });

    $('body').on('click', '#wp-link-cancel', function(event) {
        _removeLinkListeners();
        return false;
    });
}

function _removeLinkListeners() {
    if(_link_sideload){
        if ( typeof wpActiveEditor != 'undefined') {
            wpActiveEditor = undefined;
        }
    }

    wpLink.close();
    wpLink.textarea = $('html');//focus on document

    $('body').off('click', '#wp-link-submit');
    $('body').off('click', '#wp-link-cancel');
}

/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
    init:       _init,
};

})(jQuery);


// Initialise
jQuery(document).ready(function($){
 'use strict';
 link_btn.init();
});

    4 // enqueue scripts. Add the following to your functions.php file, and adjust the file names / paths to suit.

    function linkbtn_enqueue() {
    //register script
    wp_register_script('link_btn',get_template_directory_uri() . '/js/link_btn.js', array('jquery'), '1.0', true);
    //now load it
    wp_enqueue_script( 'link_btn');
}

 add_action( 'admin_enqueue_scripts', 'linkbtn_enqueue' );

    Should about do it. I use the same approach in my metabox class and it seems to work OK.

  2. RE: “How would you do it? (roughly?)”

    First, I would build it similarly to the link functionality in WordPress: An input text field, results, select functionality and submit (add link) button.

    Ajax – this would fire when text is entered into the input, returning set of results based on the search term. Take a look at what we did with our quicksearch plugin, WP Jarvis. You just need to set up the ajax call to target ajaxurl (admin-ajax.php) and set an action hook in your php to execute the query and echo the results in json format. You would want the results to include title, post-type and permalink for each result. Read more about ajax in plugins.

    Finally, selecting the result you’re interested in would grab the permalink from the json object and insert into the widget field.

    I know this isn’t a complete answer, but I hope this helps.

Comments are closed.