Как установить разные роли для настраиваемого шаблона регистрации Wordpress

Question

Ищем решение, как установить две разные роли для настраиваемого шаблона WordPress. Я не хочу использовать плагин и пытаюсь сделать это самостоятельно.

Как видите, у меня есть две вкладки инженер и клиент с подпиской подробности ниже, которые я могу выбрать с помощью javascript.

Если пользователи хотят зарегистрировать учетную запись как клиент , я хочу установить для них роль Подписчик . Если пользователи хотят зарегистрировать учетную запись как инженер , я хочу установить для них роль Редактор .

Мне нужно сделать это автоматически, а не вручную для каждого клиента в admin, но у меня нет навыков программирования. Кто-нибудь может помочь мне исправить это?

Вот мой код:

<?php

/*

Template name: SIGNUP

*/


get_header();
global $wpdb;

if ($_POST) {

    $username = $wpdb->escape($_POST['txtUsername']);
    $email = $wpdb->escape($_POST['txtEmail']);
    $password = $wpdb->escape($_POST['txtPassword']);
    $ConfPassword = $wpdb->escape($_POST['txtConfirmPassword']);

    $error = array();
    if (strpos($username, ' ') !== FALSE) {
        $error['username_space'] = "Username has Space";
    }

    if (empty($username)) {
        $error['username_empty'] = "Needed Username must";
    }

    if (username_exists($username)) {
        $error['username_exists'] = "Username already exists";
    }

    if (!is_email($email)) {
        $error['email_valid'] = "Email has no valid value";
    }

    if (email_exists($email)) {
        $error['email_existence'] = "Email already exists";
    }

    if (empty($password)) {
        $error['password_empty'] = "Needed Password must";
    }

    if (count($error) == 0) {

        wp_create_user($username, $password, $email);
        echo "User Created Successfully";
        exit();
    }else{

        print_r($error);

    }
}
?>
<section>

                        <div class="container mb-5">

                            <div class="heading">

                                <h1 class="text-center reg-name">Sign Up</h1>

                            </div>


                            <div class="row">

                                <div class="tabs col text-center mt-5 mb-5">

                                    <button id="openTab" class="tablinks usr-btn col-3" onclick="openTab(event, 'engineer')">For engineer

                                    <button class="tablinks usr-btn col-3" onclick="openTab(event, 'customer')">For customer</button>

                                </div>

                            </div>  

                            <div class="row">

                                <div id="engineer" class="col-6 tabcontent text-center m-auto">

                                    <form method="post">

                                        <p>

                                            <label>Enter engineer Username</label>

                                            <div>

                                                <input type="text" name="txtUsername" id="txtUsername" />

                                            </div>

                                            <label>Enter engineer Email</label>

                                            <div>

                                                <input type="email" name="txtEmail" id="txtEmail" />

                                            </div>

                                            <label>Enter engineer Password</label>

                                            <div>

                                                <input type="password" name="txtPassword" id="txtPassword" />

                                            </div>

                                        </p>

                                        <input type="submit" name="btnSubmit">

                                    </form>

                                </div>



                                <div id="customer" class="col-6 tabcontent text-center m-auto">

                                    <form method="post">

                                        <p>

                                            <label>Enter customer Username</label>

                                            <div>

                                                <input type="text" name="txtUsername" id="txtUsername" />

                                            </div>

                                            <label>Enter customer Email</label>

                                            <div>

                                                <input type="email" name="txtEmail" id="txtEmail" />

                                            </div>

                                            <label>Enter customer Password</label>

                                            <div>

                                                <input type="password" name="txtPassword" id="txtPassword" />

                                            </div>

                                        </p>

                                        <input type="submit" name="btnSubmit">

                                    </form>

                                </div>

                            </div>

                        </div>

</section>


<script>
function openTab(evt, rolesName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(rolesName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("openTab").click();
</script>


<?php get_footer(); ?>