1

I have a fair understanding of PHP, but am rather new to WordPress.

On a previous HTML/PHP/JS-only website, I have a PHP script that queries a MySQL DB table and lists the entries (seminars with date and location).

For each listed seminar, there is a link to a registration form (window popup). This is all working perfectly.

Now I want to do the same in a WP-based website by embedding the seminar listing within a WP page. I have successfully embedded a shortcode into said WP page. This shortcode calls a function that does exactly the same as the PHP script mentioned above.

That part is working fine. I get the listing with the seminars and their corresponding registration form links.

But now I'm stuck at next step: how to have the registration form popup when clicking on the link generated via the shortcode?

Maybe the shortcode route is not the appropriate one for this kind of endeavour?

I would appreciate any hint/suggestion/pointer.

Thanks in advance. Larry.

Excerpt of PHP called by the shortcode:

   function golwebdes_seminar_output () {

include('golwebdes_conf.inc.php');

setlocale(LC_TIME, 'de_DE.utf8');

global $wpdb;

$seminare = $seminare_gki;

if (isset($_GET['semid'])) { // Einzelseminar
    $sql = "SELECT * FROM ".$seminare." WHERE id=".$_GET['semid'];
    $result = $wpdb->get_row($sql) or die(mysql_error());
    $html = '<div class="container-fluid">';

    $kateg = $result->kategorie;
    $html .= '<div class="col-sm-12"><div class="row" style="margin-bottom:3%;">
    <div class="col-sm-3">
    <img src="/pics/icon-workshops-indien.gif" alt="" class="img-responsive">
    </div>
    <div class="col-sm-9" style="padding-left:3%;">';
    $html .= '<p><span class="small">'.$seminarkategorien[$kateg].'</span><br><span style="font-weight:bold;">'.$result->titel.'</span></p>';
    $html .= '<p>'.$result->kurzinfo.'</p>';
    $html .= '<p>'.$result->beschreibung.'</p>';
    $html .= '<p>'.$result->inhalt.'</p>';


    /**** BEGINN - Erzeugen der Termine: Ort Datum Anmeldelink ***/
    $termine='';

    /* 1 */
    if ($result->ort1!='')
        $ort1 = $result->ort1;

    if ($result->datum_beginn1!=0) {
        if ($result->datum_ende1!=0) {
            if (date("m",$result->datum_beginn1) == date("m",$result->datum_ende1))
                $datum1 = date("j.",$result->datum_beginn1)."/".date("j.",$result->datum_ende1).strftime(" %B %Y", strtotime(date("m/d/Y", $result->datum_beginn1)));
            }
        else 
            $datum1 = date("j.",$result->datum_beginn1).strftime(" %B %Y", strtotime(date("m/d/Y", $result->datum_beginn1)));
        }
    else
        $datum1 = "Termin folgt.";

    if ($result->datum_ende1 !=0 && $result->datum_ende1 >= time())
        $termin1 = "<strong>".$ort1."</strong> ".$datum1." <a href=\"#\" class=\"anmeldung\" onclick=\"window.open('seminaranmeldung.php?s=".$result->id."&o=1','anmeldung','').focus();return false;\" >zur Anmeldung</a>";
    else if ($result->datum_ende1 ==0 && $result->datum_beginn1 !=0 && $result->datum_beginn1 >= time())
        $termin1 = "<strong>".$ort1."</strong> ".$datum1." <a href=\"#\" onclick=\"window.open('seminaranmeldung.php?s=".$result->id."&o=1','anmeldung','').focus();return false;\" class=\"anmeldung\">zur Anmeldung</a>";
    else if ($result->datum_beginn1 ==0)
        $termin1 = $ort1." ".$datum1;

    $termine = $termine.$termin1.'<br>';


    /* 2 */
    if ($result->ort2!='')
        $ort2 = $result->ort2;

    if ($result->datum_beginn2!=0) {
        if ($result->datum_ende2!=0) {
            if (date("m",$result->datum_beginn2) == date("m",$result->datum_ende2))
                $datum2 = date("j.",$result->datum_beginn2)."/".date("j.",$result->datum_ende2).strftime(" %B %Y", strtotime(date("m/d/Y", $result->datum_beginn2)));
            }
        else 
            $datum2 = date("j.",$result->datum_beginn2).strftime(" %B %Y", strtotime(date("m/d/Y", $result->datum_beginn2)));
        }
    else
        $datum2 = "Termin folgt.";

    if ($result->datum_ende2 !=0 && $result->datum_ende2 >= time())
        $termin2 = "<strong>".$ort2."</strong> ".$datum2." <a href=\"#\" class=\"anmeldung\" onclick=\"window.open('seminaranmeldung.php?s=".$result->id."&o=2','anmeldung','').focus();return false;\"  >zur Anmeldung</a>";
    else if ($result->datum_ende2 ==0 && $result->datum_beginn2 !=0 && $result->datum_beginn2 >= time())
        $termin2 = "<strong>".$ort2."</strong> ".$datum2." <a href=\"#\" class=\"anmeldung\" onclick=\"window.open('seminaranmeldung.php?s=".$result->id."&o=2','anmeldung','').focus();return false;\"  >zur Anmeldung</a>";
    else if ($result->datum_beginn2 ==0)
        $termin2 = $ort2." ".$datum2;


    $termine = $termine.$termin2.'<br>';
  • Hi. Welcome to WPSE. How does your modal actually handle the registration? How does it output data? Some code would be nice to be seen. – Jack Johansson Jul 4 '17 at 18:00
  • Thanks for answering. Well, that's the point of my question. I don't have any working modal handling the registration. That's precisely what I'm trying to achieve... I'll try to post excerpts of the present code. – LarryG001 Jul 4 '17 at 18:08
0

What you want to do can be achieved in two steps. First, create a registration form, then send the response to server and create the user.

Since you have skill in JS and HTML, I'll directly get to business. Below is a very simple registration form. You will set this form to be hidden, for now.

Registration Form

<div id="ajax-register-modal">
    <input type="text" id="ajax-username" placeholder="<?php _e( 'Username', 'text-domain' ); ?>"/>
    <input type="password" id="ajax-password" placeholder="<?php _e( 'Password', 'text-domain' ); ?>"/>
    <span id="register-modal-send"><?php _e( 'Register', 'text-domain' ); ?></span>
</div>

Then when you click the link, you will make it visible by jQuery.

jQuery('#YourLinkID').click(function($){
    $('#ajax-register-modal').toggle();
});

So it pops up when we click the link. Now we send the data when the user clicks the register button.

Let's bind an action to our button:

jQuery('#register-modal-send').click(function($){
    registerTheUser();
});

Server-side Registration

Now the AJAX handler:

function registerTheUser(){
    // Get the field values for username and password
    var username = $('#ajax-username').val();
    var password = $('#ajax-password').val();
    // Send them to server via AJAX
    jQuery.ajax({
        type: 'GET',
        url: 'REST URL HERE',
        data: { ajaxUsername: username , ajaxPassword: password},
    });
}

But wait, where would the data go? The final stage is to create a REST handler in the back-end, to deal with the registration. We simply create a REST route and register the user.

add_action( 'rest_api_init', function () {
    //Path to REST route for registration
    register_rest_route( 'LarryG001/v2', '/ajax_registration/', array(
            'methods' => 'GET', // I suggest using POST
            'callback' => 'register_the_user' // Callback PHP function
    ) );
});

Alright, let the registration begin!

function register_the_user(){
    // Get the username and password
    $username = $_GET['ajaxUsername'];
    $password = $_GET['ajaxPassword'];
    // A basic creation of user based on username and password. Email is optional
    $id = wp_create_user( $username, $password, $email );
    // Return the ID of the new user
    return $id;
}

Remember the URL in our AJAX call? This is what we should use there, since our request goes to this URL:

http://example.com/wp-json/LarryG001/v2/ajax_registration/

Done. We just created a new user by using wp_create_user function.

I omitted a lot of stuff here, such as checking if the values are set ( By using if(isset($_GET['ajaxUsername']) ).

After the data is returned, you can use it as your AJAX response.

  • Thank you. Wow, it's a lot to process for me now. I think I can make good use of the first parts. However, I will not need the "user registration" part, as I won't do that. But rather I will just send an email with the user data to the registration office... Unfortunately, I will not be able to work on all that right away... – LarryG001 Jul 4 '17 at 18:55
  • But if I understand correctly, the "hidden registration form" must also be output by the function called through the shortcode? – LarryG001 Jul 4 '17 at 18:58
  • @LarryG001 You're welcome. That's quite alright. I did a full process for you, so you can change wherever of it you want. Was just a demonstration of how to connect a modal to back-end. – Jack Johansson Jul 4 '17 at 18:58
  • You can include the form in your shortcode, or anywhere on screen. Take a look at this page. Click on the login button to see the modal. You can check the source there. – Jack Johansson Jul 4 '17 at 19:00
  • 1
    I voted your answer as useful, but due to my low reputation, apparently it does not appear... Well... – LarryG001 Jul 4 '17 at 19:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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