I maintain a wordpress site that is javascript heavy and includes a lot of content in modals created with the the Tingle Modal library. The site is designed as a single-column site for the main page, with hash based navigation to take users up and down the page. What I would like to achieve, is to make the modal content accessible by url, so that external users can be directed to the content.

The modals themselves pull in info from a custom content type and are triggered by a jquery function called by clicking a url on the mainpage. I assume to get the functionality I want I would need to implement some sort of custom URL handler which would trigger the modal function submission, but I'm not sure what the best way to implement this would be ( .htaccess, PHP script, Jquery, combination?). Anyway, I wanted to know if anyone has dealt with something like this and had suggestions?

closed as too broad by Max Yudin, Jacob Peattie, Mark Kaplun, TheDeadMedic, fuxia Aug 12 at 22:59

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Can you share the site URL? – Prasad Nevase Aug 9 at 11:36
  • site is www.greentec-capital.com, the modals are on the team and advisors sections. – nizz0k Aug 9 at 12:00
  • You could hook into admin-ajax.php or create a custom REST API endpoint. – Jacob Peattie Aug 10 at 2:02
  • I'm guessing this got down-voted because it's not considered WP-enough? – nizz0k Aug 10 at 9:03

You could try with javascript, the following logic:

  • On page load check if a hash exist in the url with something like:

var hash = decodeURIComponent(location.hash.substr(1));

var teamHashes = ['peter-grouev', 'erick-yong'];

  • After that you will check if the hash is inside of one of your tables*:

if teamHashes.indexOf(hash) !== -1 { //show modal logic }

*if hash not in teamHashes table, then check the advisorsHashes table.

Now inside the above if, to show the modal, we need to declare the $modal like in your code and construct the url and make the ajax call to it, like:

if teamHashes.indexOf(hash) !== -1 {
    var $teamModal = new tingle.modal({
        footer: true,
        stickyFooter: false,
        closeMethods: ['overlay', 'escape'],
        closeLabel: "Close",
        cssClass: ['team-modal'],
        onOpen: function() {
            console.log('modal open');
        },
        onClose: function() {
            console.log('modal closed');
            $modal.setContent("");
        },

    var teamUrl = "https://greentec-capital.com/team/"+hash+"/";

    $.ajax({
           type: "POST",
           url: teamUrl,
           data: {},
           success: function(result){
               $modal.setContent(result);
               $modal.open();
           }
        });
});

That should do it.

  • Appreciate the detailed answer, wow, you even included the tingle modal syntax, which is above and beyond what I would have expected!!!! – nizz0k Aug 10 at 9:02
  • just took it from your code :) glad it helped. – Cubakos Aug 10 at 9:30
  • well, you provided the "how" part of the question, I generally knew what had to happen, but it was outside of the range of my familiarity. I always appreciate the extra step. Many mahalos. – nizz0k Aug 10 at 9:38

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