ThemeBing/add-to-menu.php

## add-to-menu.php
<?php
/**
 * Automatically add a Login link to Primary Menu
 */
add_filter( 'wp_nav_menu_items', 'pt_login_link_to_menu', 10, 2 );
function pt_login_link_to_menu ( $items, $args ) {
    if( ! is_user_logged_in() && $args->theme_location == apply_filters('login_menu_location', 'primary') ) {
        $items .= '<li class="menu-item login-link"><a href="#pt-login">'.__( 'Login/Register', 'ptheme' ).'</a></li>';
    }
    return $items;
}

## ajax-handle.php
<?php
// LOGIN
function pt_login_member(){

  		// Get variables
		$user_login		= $_POST['pt_user_login'];
		$user_pass		= $_POST['pt_user_pass'];


		// Check CSRF token
		if( !check_ajax_referer( 'ajax-login-nonce', 'login-security', false) ){
			echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Session token has expired, please reload the page and try again', 'ptheme').'</div>'));
		}

	 	// Check if input variables are empty
	 	elseif( empty($user_login) || empty($user_pass) ){
			echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Please fill all form fields', 'ptheme').'</div>'));
	 	} else { // Now we can insert this account

	 		$user = wp_signon( array('user_login' => $user_login, 'user_password' => $user_pass), false );

		    if( is_wp_error($user) ){
				echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.$user->get_error_message().'</div>'));
			} else{
				echo json_encode(array('error' => false, 'message'=> '<div class="alert alert-success">'.__('Login successful, reloading page...', 'ptheme').'</div>'));
			}
	 	}

	 	die();
}
add_action('wp_ajax_nopriv_pt_login_member', 'pt_login_member');


// REGISTER
function pt_register_member(){

  		// Get variables
		$user_login	= $_POST['pt_user_login'];
		$user_email	= $_POST['pt_user_email'];

		// Check CSRF token
		if( !check_ajax_referer( 'ajax-login-nonce', 'register-security', false) ){
			echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Session token has expired, please reload the page and try again', 'ptheme').'</div>'));
			die();
		}

	 	// Check if input variables are empty
	 	elseif( empty($user_login) || empty($user_email) ){
			echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Please fill all form fields', 'ptheme').'</div>'));
			die();
	 	}

		$errors = register_new_user($user_login, $user_email);

		if( is_wp_error($errors) ){

			$registration_error_messages = $errors->errors;

			$display_errors = '<div class="alert alert-danger">';

				foreach($registration_error_messages as $error){
					$display_errors .= '<p>'.$error[0].'</p>';
				}

			$display_errors .= '</div>';

			echo json_encode(array('error' => true, 'message' => $display_errors));

		} else {
			echo json_encode(array('error' => false, 'message' => '<div class="alert alert-success">'.__( 'Registration complete. Please check your e-mail.', 'ptheme').'</p>'));
		}


	 	die();
}
add_action('wp_ajax_nopriv_pt_register_member', 'pt_register_member');

## ajax.js
function pt_open_login_dialog(href){

	jQuery('#pt-user-modal .modal-dialog').removeClass('registration-complete');

	var modal_dialog = jQuery('#pt-user-modal .modal-dialog');
	modal_dialog.attr('data-active-tab', '');

	switch(href){

		case '#pt-register':
			modal_dialog.attr('data-active-tab', '#pt-register');
			break;

		case '#pt-login':
		default:
			modal_dialog.attr('data-active-tab', '#pt-login');
			break;
	}

	jQuery('#pt-user-modal').modal('show');
}

function pt_close_login_dialog(){

	jQuery('#pt-user-modal').modal('hide');
}

jQuery(function($){

	"use strict";
	/***************************
	**  LOGIN / REGISTER DIALOG
	***************************/

	// Open login/register modal
	$('[href="#pt-login"], [href="#pt-register"]').click(function(e){

		e.preventDefault();

		pt_open_login_dialog( $(this).attr('href') );

	});

	// Switch forms login/register
	$('.modal-footer a, a[href="#pt-reset-password"]').click(function(e){
		e.preventDefault();
		$('#pt-user-modal .modal-dialog').attr('data-active-tab', $(this).attr('href'));
	});


	// Post login form
	$('#pt_login_form').on('submit', function(e){

		e.preventDefault();

		var button = $(this).find('button');
			button.button('loading');

		$.post(ptajax.ajaxurl, $('#pt_login_form').serialize(), function(data){

			var obj = $.parseJSON(data);

			$('.pt-login .pt-errors').html(obj.message);

			if(obj.error == false){
				$('#pt-user-modal .modal-dialog').addClass('loading');
				window.location.reload(true);
				button.hide();
			}

			button.button('reset');
		});

	});


	// Post register form
	$('#pt_registration_form').on('submit', function(e){

		e.preventDefault();

		var button = $(this).find('button');
			button.button('loading');

		$.post(ptajax.ajaxurl, $('#pt_registration_form').serialize(), function(data){

			var obj = $.parseJSON(data);

			$('.pt-register .pt-errors').html(obj.message);

			if(obj.error == false){
				$('#pt-user-modal .modal-dialog').addClass('registration-complete');
				// window.location.reload(true);
				button.hide();
			}

			button.button('reset');

		});

	});

	if(window.location.hash == '#login'){
		pt_open_login_dialog('#pt-login');
	}

});

## bootstrap.min.js
/*!
 * Bootstrap v3.3.5 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=853fe4082743c174b300)
 * Config saved to config.json and https://gist.github.com/853fe4082743c174b300
 */
if (typeof jQuery === 'undefined') {
  throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
+function ($) {
  'use strict';
  var version = $.fn.jquery.split(' ')[0].split('.')
  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')
  }
}(jQuery);

/* ========================================================================
 * Bootstrap: button.js v3.3.6
 * http://getbootstrap.com/javascript/#buttons
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

  // BUTTON PUBLIC CLASS DEFINITION
  // ==============================

  var Button = function (element, options) {
    this.$element  = $(element)
    this.options   = $.extend({}, Button.DEFAULTS, options)
    this.isLoading = false
  }

  Button.VERSION  = '3.3.6'

  Button.DEFAULTS = {
    loadingText: 'loading...'
  }

  Button.prototype.setState = function (state) {
    var d    = 'disabled'
    var $el  = this.$element
    var val  = $el.is('input') ? 'val' : 'html'
    var data = $el.data()

    state += 'Text'

    if (data.resetText == null) $el.data('resetText', $el[val]())

    // push to event loop to allow forms to submit
    setTimeout($.proxy(function () {
      $el[val](data[state] == null ? this.options[state] : data[state])

      if (state == 'loadingText') {
        this.isLoading = true
        $el.addClass(d).attr(d, d)
      } else if (this.isLoading) {
        this.isLoading = false
        $el.removeClass(d).removeAttr(d)
      }
    }, this), 0)
  }

  Button.prototype.toggle = function () {
    var changed = true
    var $parent = this.$element.closest('[data-toggle="buttons"]')

    if ($parent.length) {
      var $input = this.$element.find('input')
      if ($input.prop('type') == 'radio') {
        if ($input.prop('checked')) changed = false
        $parent.find('.active').removeClass('active')
        this.$element.addClass('active')
      } else if ($input.prop('type') == 'checkbox') {
        if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
        this.$element.toggleClass('active')
      }
      $input.prop('checked', this.$element.hasClass('active'))
      if (changed) $input.trigger('change')
    } else {
      this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
      this.$element.toggleClass('active')
    }
  }


  // BUTTON PLUGIN DEFINITION
  // ========================

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.button')
      var options = typeof option == 'object' && option

      if (!data) $this.data('bs.button', (data = new Button(this, options)))

      if (option == 'toggle') data.toggle()
      else if (option) data.setState(option)
    })
  }

  var old = $.fn.button

  $.fn.button             = Plugin
  $.fn.button.Constructor = Button


  // BUTTON NO CONFLICT
  // ==================

  $.fn.button.noConflict = function () {
    $.fn.button = old
    return this
  }


  // BUTTON DATA-API
  // ===============

  $(document)
    .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
      var $btn = $(e.target)
      if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
      Plugin.call($btn, 'toggle')
      if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault()
    })
    .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
      $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
    })

}(jQuery);

/* ========================================================================
 * Bootstrap: modal.js v3.3.6
 * http://getbootstrap.com/javascript/#modals
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

  // MODAL CLASS DEFINITION
  // ======================

  var Modal = function (element, options) {
    this.options             = options
    this.$body               = $(document.body)
    this.$element            = $(element)
    this.$dialog             = this.$element.find('.modal-dialog')
    this.$backdrop           = null
    this.isShown             = null
    this.originalBodyPad     = null
    this.scrollbarWidth      = 0
    this.ignoreBackdropClick = false

    if (this.options.remote) {
      this.$element
        .find('.modal-content')
        .load(this.options.remote, $.proxy(function () {
          this.$element.trigger('loaded.bs.modal')
        }, this))
    }
  }

  Modal.VERSION  = '3.3.6'

  Modal.TRANSITION_DURATION = 300
  Modal.BACKDROP_TRANSITION_DURATION = 150

  Modal.DEFAULTS = {
    backdrop: true,
    keyboard: true,
    show: true
  }

  Modal.prototype.toggle = function (_relatedTarget) {
    return this.isShown ? this.hide() : this.show(_relatedTarget)
  }

  Modal.prototype.show = function (_relatedTarget) {
    var that = this
    var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

    this.$element.trigger(e)

    if (this.isShown || e.isDefaultPrevented()) return

    this.isShown = true

    this.checkScrollbar()
    this.setScrollbar()
    this.$body.addClass('modal-open')

    this.escape()
    this.resize()

    this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

    this.$dialog.on('mousedown.dismiss.bs.modal', function () {
      that.$element.one('mouseup.dismiss.bs.modal', function (e) {
        if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
      })
    })

    this.backdrop(function () {
      var transition = $.support.transition && that.$element.hasClass('fade')

      if (!that.$element.parent().length) {
        that.$element.appendTo(that.$body) // don't move modals dom position
      }

      that.$element
        .show()
        .scrollTop(0)

      that.adjustDialog()

      if (transition) {
        that.$element[0].offsetWidth // force reflow
      }

      that.$element.addClass('in')

      that.enforceFocus()

      var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

      transition ?
        that.$dialog // wait for modal to slide in
          .one('bsTransitionEnd', function () {
            that.$element.trigger('focus').trigger(e)
          })
          .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
        that.$element.trigger('focus').trigger(e)
    })
  }

  Modal.prototype.hide = function (e) {
    if (e) e.preventDefault()

    e = $.Event('hide.bs.modal')

    this.$element.trigger(e)

    if (!this.isShown || e.isDefaultPrevented()) return

    this.isShown = false

    this.escape()
    this.resize()

    $(document).off('focusin.bs.modal')

    this.$element
      .removeClass('in')
      .off('click.dismiss.bs.modal')
      .off('mouseup.dismiss.bs.modal')

    this.$dialog.off('mousedown.dismiss.bs.modal')

    $.support.transition && this.$element.hasClass('fade') ?
      this.$element
        .one('bsTransitionEnd', $.proxy(this.hideModal, this))
        .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
      this.hideModal()
  }

  Modal.prototype.enforceFocus = function () {
    $(document)
      .off('focusin.bs.modal') // guard against infinite focus loop
      .on('focusin.bs.modal', $.proxy(function (e) {
        if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
          this.$element.trigger('focus')
        }
      }, this))
  }

  Modal.prototype.escape = function () {
    if (this.isShown && this.options.keyboard) {
      this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
        e.which == 27 && this.hide()
      }, this))
    } else if (!this.isShown) {
      this.$element.off('keydown.dismiss.bs.modal')
    }
  }

  Modal.prototype.resize = function () {
    if (this.isShown) {
      $(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
    } else {
      $(window).off('resize.bs.modal')
    }
  }

  Modal.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
      that.$body.removeClass('modal-open')
      that.resetAdjustments()
      that.resetScrollbar()
      that.$element.trigger('hidden.bs.modal')
    })
  }

  Modal.prototype.removeBackdrop = function () {
    this.$backdrop && this.$backdrop.remove()
    this.$backdrop = null
  }

  Modal.prototype.backdrop = function (callback) {
    var that = this
    var animate = this.$element.hasClass('fade') ? 'fade' : ''

    if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

      this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

      this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
        if (this.ignoreBackdropClick) {
          this.ignoreBackdropClick = false
          return
        }
        if (e.target !== e.currentTarget) return
        this.options.backdrop == 'static'
          ? this.$element[0].focus()
          : this.hide()
      }, this))

      if (doAnimate) this.$backdrop[0].offsetWidth // force reflow

      this.$backdrop.addClass('in')

      if (!callback) return

      doAnimate ?
        this.$backdrop
          .one('bsTransitionEnd', callback)
          .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
        callback()

    } else if (!this.isShown && this.$backdrop) {
      this.$backdrop.removeClass('in')

      var callbackRemove = function () {
        that.removeBackdrop()
        callback && callback()
      }
      $.support.transition && this.$element.hasClass('fade') ?
        this.$backdrop
          .one('bsTransitionEnd', callbackRemove)
          .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
        callbackRemove()

    } else if (callback) {
      callback()
    }
  }

  // these following methods are used to handle overflowing modals

  Modal.prototype.handleUpdate = function () {
    this.adjustDialog()
  }

  Modal.prototype.adjustDialog = function () {
    var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight

    this.$element.css({
      paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
      paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
    })
  }

  Modal.prototype.resetAdjustments = function () {
    this.$element.css({
      paddingLeft: '',
      paddingRight: ''
    })
  }

  Modal.prototype.checkScrollbar = function () {
    var fullWindowWidth = window.innerWidth
    if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
      var documentElementRect = document.documentElement.getBoundingClientRect()
      fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
    }
    this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
    this.scrollbarWidth = this.measureScrollbar()
  }

  Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    this.originalBodyPad = document.body.style.paddingRight || ''
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', this.originalBodyPad)
  }

  Modal.prototype.measureScrollbar = function () { // thx walsh
    var scrollDiv = document.createElement('div')
    scrollDiv.className = 'modal-scrollbar-measure'
    this.$body.append(scrollDiv)
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
    this.$body[0].removeChild(scrollDiv)
    return scrollbarWidth
  }


  // MODAL PLUGIN DEFINITION
  // =======================

  function Plugin(option, _relatedTarget) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.modal')
      var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)

      if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
      if (typeof option == 'string') data[option](_relatedTarget)
      else if (options.show) data.show(_relatedTarget)
    })
  }

  var old = $.fn.modal

  $.fn.modal             = Plugin
  $.fn.modal.Constructor = Modal


  // MODAL NO CONFLICT
  // =================

  $.fn.modal.noConflict = function () {
    $.fn.modal = old
    return this
  }


  // MODAL DATA-API
  // ==============

  $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
    var $this   = $(this)
    var href    = $this.attr('href')
    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
    var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

    if ($this.is('a')) e.preventDefault()

    $target.one('show.bs.modal', function (showEvent) {
      if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
      $target.one('hidden.bs.modal', function () {
        $this.is(':visible') && $this.trigger('focus')
      })
    })
    Plugin.call($target, option, this)
  })

}(jQuery);

## enqueue.php
function ajax_login_scripts() {

	wp_enqueue_style( 'user-login', get_template_directory_uri() . '/ajax-login-register/user-login.css', array(), null );

	wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/ajax-login-register/bootstrap.min.js', array( 'jquery' ), null, true );
	wp_enqueue_script( 'ajax-login-register-script', get_template_directory_uri() . '/ajax-login-register/user-login.js', array( 'jquery' ), null, true );

	wp_localize_script('ajax-login-register-script', 'ptajax', array(
			    	'ajaxurl' => admin_url( 'admin-ajax.php' ),
			    ));
}
add_action( 'wp_enqueue_scripts', 'ajax_login_scripts' );

## form-attach-to-footer.php
<?php
function pt_login_register_modal() {

		// only show the registration/login form to non-logged-in members
	if( ! is_user_logged_in() ){
?>
		<div class="modal fade pt-user-modal" id="pt-user-modal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog" data-active-tab="">
				<div class="modal-content">
					<div class="modal-body">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<?php

							if( get_option('users_can_register') ){ ?>

								<!-- Register form -->
								<div class="pt-register">

									<h3><?php printf( __('Join %s', 'ptheme'), get_bloginfo('name') ); ?></h3>
									<hr>

									<form id="pt_registration_form" action="<?php echo home_url( '/' ); ?>" method="POST">

										<div class="form-field">
											<label><?php _e('Username', 'ptheme'); ?></label>
											<input class="form-control input-lg required" name="pt_user_login" type="text"/>
										</div>
										<div class="form-field">
											<label for="pt_user_email"><?php _e('Email', 'ptheme'); ?></label>
											<input class="form-control input-lg required" name="pt_user_email" id="pt_user_email" type="email"/>
										</div>

										<div class="form-field">
											<input type="hidden" name="action" value="pt_register_member"/>
											<button class="btn btn-theme btn-lg" data-loading-text="<?php _e('Loading...', 'ptheme') ?>" type="submit"><?php _e('Sign up', 'ptheme'); ?></button>
										</div>
										<?php wp_nonce_field( 'ajax-login-nonce', 'register-security' ); ?>
									</form>
									<div class="pt-errors"></div>
								</div>

								<!-- Login form -->
								<div class="pt-login">

									<h3><?php printf( __('Login to %s', 'ptheme'), get_bloginfo('name') ); ?></h3>
									<hr>

									<form id="pt_login_form" action="<?php echo home_url( '/' ); ?>" method="post">

										<div class="form-field">
											<label><?php _e('Username', 'ptheme') ?></label>
											<input class="form-control input-lg required" name="pt_user_login" type="text"/>
										</div>
										<div class="form-field">
											<label for="pt_user_pass"><?php _e('Password', 'ptheme')?></label>
											<input class="form-control input-lg required" name="pt_user_pass" id="pt_user_pass" type="password"/>
										</div>
										<div class="form-field">
											<input type="hidden" name="action" value="pt_login_member"/>
											<button class="btn btn-theme btn-lg" data-loading-text="<?php _e('Loading...', 'ptheme') ?>" type="submit"><?php _e('Login', 'ptheme'); ?></button> <a class="alignright" href="#pt-reset-password"><?php _e('Lost Password?', 'ptheme') ?></a>
										</div>
										<?php wp_nonce_field( 'ajax-login-nonce', 'login-security' ); ?>
									</form>
									<div class="pt-errors"></div>
								</div>

								<div class="pt-loading">
									<p><i class="fa fa-refresh fa-spin"></i><br><?php _e('Loading...', 'ptheme') ?></p>
								</div><?php

							} else {
								echo '<h3>'.__('Login access is disabled', 'ptheme').'</h3>';
							} ?>
					</div>
					<div class="modal-footer">
							<span class="pt-register-footer"><?php _e('Don\'t have an account?', 'ptheme'); ?> <a href="#pt-register"><?php _e('Sign Up', 'ptheme'); ?></a></span>
							<span class="pt-login-footer"><?php _e('Already have an account?', 'ptheme'); ?> <a href="#pt-login"><?php _e('Login', 'ptheme'); ?></a></span>
					</div>
				</div>
			</div>
		</div>
<?php
	}
}
add_action('wp_footer', 'pt_login_register_modal');

## hyperlink
<a href="#pt-register">Login</a>
<a href="#pt-login">Register</a>

## require-file.php
<?php
require get_template_directory() . '/ajax-login-register/ajax-login-register.php';

## styles.css
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.fade.in {
    opacity: 1;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 30px 10px;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    -ms-transform: translate(0,-25%);
    -o-transform: translate(0,-25%);
    transform: translate(0,-25%);
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    /*border-radius: 6px;*/
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-body {
    position: relative;
    padding: 40px;
}
.modal-footer {
    padding: 20px 40px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
.pt-register, .pt-login, .pt-reset-password, .pt-register-footer, .pt-login-footer {
    display: none;
}
div[data-active-tab="#pt-reset-password"] .pt-reset-password,
div[data-active-tab="#pt-reset-password"] .pt-login-footer,
div[data-active-tab="#pt-login"] .pt-login,
div[data-active-tab="#pt-register"] .pt-register,
div[data-active-tab="#pt-register"] .pt-login-footer,
div[data-active-tab="#pt-login"] .pt-register-footer {
    display: block;
}
.pt-loading {
    display: none;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert>p, .alert>ul {
    margin-bottom: 0;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}
#pt-user-modal h3 {
	clear: none;
	margin-bottom: 20px;
}
.form-field {
	margin: 20px 0;
    position: relative;
}
@media (min-width: 768px) {
	.modal-dialog {
	    width: 600px;
	    margin: 70px auto;
	}
	.modal-content {
	    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
	    box-shadow: 0 5px 15px rgba(0,0,0,.5);
	}
}

## user-login.css
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.fade.in {
    opacity: 1;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 30px 10px;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    -ms-transform: translate(0,-25%);
    -o-transform: translate(0,-25%);
    transform: translate(0,-25%);
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    /*border-radius: 6px;*/
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-body {
    position: relative;
    padding: 40px;
}
.modal-footer {
    padding: 40px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
.pt-register, .pt-login, .pt-reset-password, .pt-register-footer, .pt-login-footer {
    display: none;
}
div[data-active-tab="#pt-reset-password"] .pt-reset-password,
div[data-active-tab="#pt-reset-password"] .pt-login-footer,
div[data-active-tab="#pt-login"] .pt-login,
div[data-active-tab="#pt-register"] .pt-register,
div[data-active-tab="#pt-register"] .pt-login-footer,
div[data-active-tab="#pt-login"] .pt-register-footer {
    display: block;
}
.pt-loading {
    display: none;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert>p, .alert>ul {
    margin-bottom: 0;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}
#pt-user-modal h3 {
	clear: none;
	margin-bottom: 20px;
}
.form-field {
	margin: 20px 0;
    position: relative;
}
@media (min-width: 768px) {
	.modal-dialog {
	    width: 600px;
	    margin: 70px auto;
	}
	.modal-content {
	    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
	    box-shadow: 0 5px 15px rgba(0,0,0,.5);
	}
}
	<?php
	// LOGIN
	function pt_login_member(){

	// Get variables
	$user_login = $_POST['pt_user_login'];
	$user_pass = $_POST['pt_user_pass'];


	// Check CSRF token
	if( !check_ajax_referer( 'ajax-login-nonce', 'login-security', false) ){
	echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Session token has expired, please reload the page and try again', 'ptheme').'</div>'));
	}

	// Check if input variables are empty
	elseif( empty($user_login) \|\| empty($user_pass) ){
	echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Please fill all form fields', 'ptheme').'</div>'));
	} else { // Now we can insert this account

	$user = wp_signon( array('user_login' => $user_login, 'user_password' => $user_pass), false );

	if( is_wp_error($user) ){
	echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.$user->get_error_message().'</div>'));
	} else{
	echo json_encode(array('error' => false, 'message'=> '<div class="alert alert-success">'.__('Login successful, reloading page...', 'ptheme').'</div>'));
	}
	}

	die();
	}
	add_action('wp_ajax_nopriv_pt_login_member', 'pt_login_member');



	// REGISTER
	function pt_register_member(){

	// Get variables
	$user_login = $_POST['pt_user_login'];
	$user_email = $_POST['pt_user_email'];

	// Check CSRF token
	if( !check_ajax_referer( 'ajax-login-nonce', 'register-security', false) ){
	echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Session token has expired, please reload the page and try again', 'ptheme').'</div>'));
	die();
	}

	// Check if input variables are empty
	elseif( empty($user_login) \|\| empty($user_email) ){
	echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Please fill all form fields', 'ptheme').'</div>'));
	die();
	}

	$errors = register_new_user($user_login, $user_email);

	if( is_wp_error($errors) ){

	$registration_error_messages = $errors->errors;

	$display_errors = '<div class="alert alert-danger">';

	foreach($registration_error_messages as $error){
	$display_errors .= '<p>'.$error[0].'</p>';
	}

	$display_errors .= '</div>';

	echo json_encode(array('error' => true, 'message' => $display_errors));

	} else {
	echo json_encode(array('error' => false, 'message' => '<div class="alert alert-success">'.__( 'Registration complete. Please check your e-mail.', 'ptheme').'</p>'));
	}


	die();
	}
	add_action('wp_ajax_nopriv_pt_register_member', 'pt_register_member');
	function pt_open_login_dialog(href){

	jQuery('#pt-user-modal .modal-dialog').removeClass('registration-complete');

	var modal_dialog = jQuery('#pt-user-modal .modal-dialog');
	modal_dialog.attr('data-active-tab', '');

	switch(href){

	case '#pt-register':
	modal_dialog.attr('data-active-tab', '#pt-register');
	break;

	case '#pt-login':
	default:
	modal_dialog.attr('data-active-tab', '#pt-login');
	break;
	}

	jQuery('#pt-user-modal').modal('show');
	}

	function pt_close_login_dialog(){

	jQuery('#pt-user-modal').modal('hide');
	}

	jQuery(function($){

	"use strict";
	/***************************
	** LOGIN / REGISTER DIALOG
	***************************/

	// Open login/register modal
	$('[href="#pt-login"], [href="#pt-register"]').click(function(e){

	e.preventDefault();

	pt_open_login_dialog( $(this).attr('href') );

	});

	// Switch forms login/register
	$('.modal-footer a, a[href="#pt-reset-password"]').click(function(e){
	e.preventDefault();
	$('#pt-user-modal .modal-dialog').attr('data-active-tab', $(this).attr('href'));
	});


	// Post login form
	$('#pt_login_form').on('submit', function(e){

	e.preventDefault();

	var button = $(this).find('button');
	button.button('loading');

	$.post(ptajax.ajaxurl, $('#pt_login_form').serialize(), function(data){

	var obj = $.parseJSON(data);

	$('.pt-login .pt-errors').html(obj.message);

	if(obj.error == false){
	$('#pt-user-modal .modal-dialog').addClass('loading');
	window.location.reload(true);
	button.hide();
	}

	button.button('reset');
	});

	});


	// Post register form
	$('#pt_registration_form').on('submit', function(e){

	e.preventDefault();

	var button = $(this).find('button');
	button.button('loading');

	$.post(ptajax.ajaxurl, $('#pt_registration_form').serialize(), function(data){

	var obj = $.parseJSON(data);

	$('.pt-register .pt-errors').html(obj.message);

	if(obj.error == false){
	$('#pt-user-modal .modal-dialog').addClass('registration-complete');
	// window.location.reload(true);
	button.hide();
	}

	button.button('reset');

	});

	});

	if(window.location.hash == '#login'){
	pt_open_login_dialog('#pt-login');
	}

	});
	/*!
	* Bootstrap v3.3.5 (http://getbootstrap.com)
	* Copyright 2011-2016 Twitter, Inc.
	* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
	*/

	/*!
	* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=853fe4082743c174b300)
	* Config saved to config.json and https://gist.github.com/853fe4082743c174b300
	*/
	if (typeof jQuery === 'undefined') {
	throw new Error('Bootstrap\'s JavaScript requires jQuery')
	}
	+function ($) {
	'use strict';
	var version = $.fn.jquery.split(' ')[0].split('.')
	if ((version[0] < 2 && version[1] < 9) \|\| (version[0] == 1 && version[1] == 9 && version[2] < 1) \|\| (version[0] > 2)) {
	throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')
	}
	}(jQuery);

	/* ========================================================================
	* Bootstrap: button.js v3.3.6
	* http://getbootstrap.com/javascript/#buttons
	* ========================================================================
	* Copyright 2011-2015 Twitter, Inc.
	* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
	* ======================================================================== */


	+function ($) {
	'use strict';

	// BUTTON PUBLIC CLASS DEFINITION
	// ==============================

	var Button = function (element, options) {
	this.$element = $(element)
	this.options = $.extend({}, Button.DEFAULTS, options)
	this.isLoading = false
	}

	Button.VERSION = '3.3.6'

	Button.DEFAULTS = {
	loadingText: 'loading...'
	}

	Button.prototype.setState = function (state) {
	var d = 'disabled'
	var $el = this.$element
	var val = $el.is('input') ? 'val' : 'html'
	var data = $el.data()

	state += 'Text'

	if (data.resetText == null) $el.data('resetText', $el[val]())

	// push to event loop to allow forms to submit
	setTimeout($.proxy(function () {
	$el[val](data[state] == null ? this.options[state] : data[state])

	if (state == 'loadingText') {
	this.isLoading = true
	$el.addClass(d).attr(d, d)
	} else if (this.isLoading) {
	this.isLoading = false
	$el.removeClass(d).removeAttr(d)
	}
	}, this), 0)
	}

	Button.prototype.toggle = function () {
	var changed = true
	var $parent = this.$element.closest('[data-toggle="buttons"]')

	if ($parent.length) {
	var $input = this.$element.find('input')
	if ($input.prop('type') == 'radio') {
	if ($input.prop('checked')) changed = false
	$parent.find('.active').removeClass('active')
	this.$element.addClass('active')
	} else if ($input.prop('type') == 'checkbox') {
	if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
	this.$element.toggleClass('active')
	}
	$input.prop('checked', this.$element.hasClass('active'))
	if (changed) $input.trigger('change')
	} else {
	this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
	this.$element.toggleClass('active')
	}
	}


	// BUTTON PLUGIN DEFINITION
	// ========================

	function Plugin(option) {
	return this.each(function () {
	var $this = $(this)
	var data = $this.data('bs.button')
	var options = typeof option == 'object' && option

	if (!data) $this.data('bs.button', (data = new Button(this, options)))

	if (option == 'toggle') data.toggle()
	else if (option) data.setState(option)
	})
	}

	var old = $.fn.button

	$.fn.button = Plugin
	$.fn.button.Constructor = Button


	// BUTTON NO CONFLICT
	// ==================

	$.fn.button.noConflict = function () {
	$.fn.button = old
	return this
	}


	// BUTTON DATA-API
	// ===============

	$(document)
	.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
	var $btn = $(e.target)
	if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
	Plugin.call($btn, 'toggle')
	if (!($(e.target).is('input[type="radio"]') \|\| $(e.target).is('input[type="checkbox"]'))) e.preventDefault()
	})
	.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
	$(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
	})

	}(jQuery);

	/* ========================================================================
	* Bootstrap: modal.js v3.3.6
	* http://getbootstrap.com/javascript/#modals
	* ========================================================================
	* Copyright 2011-2015 Twitter, Inc.
	* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
	* ======================================================================== */


	+function ($) {
	'use strict';

	// MODAL CLASS DEFINITION
	// ======================

	var Modal = function (element, options) {
	this.options = options
	this.$body = $(document.body)
	this.$element = $(element)
	this.$dialog = this.$element.find('.modal-dialog')
	this.$backdrop = null
	this.isShown = null
	this.originalBodyPad = null
	this.scrollbarWidth = 0
	this.ignoreBackdropClick = false

	if (this.options.remote) {
	this.$element
	.find('.modal-content')
	.load(this.options.remote, $.proxy(function () {
	this.$element.trigger('loaded.bs.modal')
	}, this))
	}
	}

	Modal.VERSION = '3.3.6'

	Modal.TRANSITION_DURATION = 300
	Modal.BACKDROP_TRANSITION_DURATION = 150

	Modal.DEFAULTS = {
	backdrop: true,
	keyboard: true,
	show: true
	}

	Modal.prototype.toggle = function (_relatedTarget) {
	return this.isShown ? this.hide() : this.show(_relatedTarget)
	}

	Modal.prototype.show = function (_relatedTarget) {
	var that = this
	var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

	this.$element.trigger(e)

	if (this.isShown \|\| e.isDefaultPrevented()) return

	this.isShown = true

	this.checkScrollbar()
	this.setScrollbar()
	this.$body.addClass('modal-open')

	this.escape()
	this.resize()

	this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

	this.$dialog.on('mousedown.dismiss.bs.modal', function () {
	that.$element.one('mouseup.dismiss.bs.modal', function (e) {
	if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
	})
	})

	this.backdrop(function () {
	var transition = $.support.transition && that.$element.hasClass('fade')

	if (!that.$element.parent().length) {
	that.$element.appendTo(that.$body) // don't move modals dom position
	}

	that.$element
	.show()
	.scrollTop(0)

	that.adjustDialog()

	if (transition) {
	that.$element[0].offsetWidth // force reflow
	}

	that.$element.addClass('in')

	that.enforceFocus()

	var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

	transition ?
	that.$dialog // wait for modal to slide in
	.one('bsTransitionEnd', function () {
	that.$element.trigger('focus').trigger(e)
	})
	.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
	that.$element.trigger('focus').trigger(e)
	})
	}

	Modal.prototype.hide = function (e) {
	if (e) e.preventDefault()

	e = $.Event('hide.bs.modal')

	this.$element.trigger(e)

	if (!this.isShown \|\| e.isDefaultPrevented()) return

	this.isShown = false

	this.escape()
	this.resize()

	$(document).off('focusin.bs.modal')

	this.$element
	.removeClass('in')
	.off('click.dismiss.bs.modal')
	.off('mouseup.dismiss.bs.modal')

	this.$dialog.off('mousedown.dismiss.bs.modal')

	$.support.transition && this.$element.hasClass('fade') ?
	this.$element
	.one('bsTransitionEnd', $.proxy(this.hideModal, this))
	.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
	this.hideModal()
	}

	Modal.prototype.enforceFocus = function () {
	$(document)
	.off('focusin.bs.modal') // guard against infinite focus loop
	.on('focusin.bs.modal', $.proxy(function (e) {
	if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
	this.$element.trigger('focus')
	}
	}, this))
	}

	Modal.prototype.escape = function () {
	if (this.isShown && this.options.keyboard) {
	this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
	e.which == 27 && this.hide()
	}, this))
	} else if (!this.isShown) {
	this.$element.off('keydown.dismiss.bs.modal')
	}
	}

	Modal.prototype.resize = function () {
	if (this.isShown) {
	$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
	} else {
	$(window).off('resize.bs.modal')
	}
	}

	Modal.prototype.hideModal = function () {
	var that = this
	this.$element.hide()
	this.backdrop(function () {
	that.$body.removeClass('modal-open')
	that.resetAdjustments()
	that.resetScrollbar()
	that.$element.trigger('hidden.bs.modal')
	})
	}

	Modal.prototype.removeBackdrop = function () {
	this.$backdrop && this.$backdrop.remove()
	this.$backdrop = null
	}

	Modal.prototype.backdrop = function (callback) {
	var that = this
	var animate = this.$element.hasClass('fade') ? 'fade' : ''

	if (this.isShown && this.options.backdrop) {
	var doAnimate = $.support.transition && animate

	this.$backdrop = $(document.createElement('div'))
	.addClass('modal-backdrop ' + animate)
	.appendTo(this.$body)

	this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
	if (this.ignoreBackdropClick) {
	this.ignoreBackdropClick = false
	return
	}
	if (e.target !== e.currentTarget) return
	this.options.backdrop == 'static'
	? this.$element[0].focus()
	: this.hide()
	}, this))

	if (doAnimate) this.$backdrop[0].offsetWidth // force reflow

	this.$backdrop.addClass('in')

	if (!callback) return

	doAnimate ?
	this.$backdrop
	.one('bsTransitionEnd', callback)
	.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
	callback()

	} else if (!this.isShown && this.$backdrop) {
	this.$backdrop.removeClass('in')

	var callbackRemove = function () {
	that.removeBackdrop()
	callback && callback()
	}
	$.support.transition && this.$element.hasClass('fade') ?
	this.$backdrop
	.one('bsTransitionEnd', callbackRemove)
	.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
	callbackRemove()

	} else if (callback) {
	callback()
	}
	}

	// these following methods are used to handle overflowing modals

	Modal.prototype.handleUpdate = function () {
	this.adjustDialog()
	}

	Modal.prototype.adjustDialog = function () {
	var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight

	this.$element.css({
	paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
	paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
	})
	}

	Modal.prototype.resetAdjustments = function () {
	this.$element.css({
	paddingLeft: '',
	paddingRight: ''
	})
	}

	Modal.prototype.checkScrollbar = function () {
	var fullWindowWidth = window.innerWidth
	if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
	var documentElementRect = document.documentElement.getBoundingClientRect()
	fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
	}
	this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
	this.scrollbarWidth = this.measureScrollbar()
	}

	Modal.prototype.setScrollbar = function () {
	var bodyPad = parseInt((this.$body.css('padding-right') \|\| 0), 10)
	this.originalBodyPad = document.body.style.paddingRight \|\| ''
	if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
	}

	Modal.prototype.resetScrollbar = function () {
	this.$body.css('padding-right', this.originalBodyPad)
	}

	Modal.prototype.measureScrollbar = function () { // thx walsh
	var scrollDiv = document.createElement('div')
	scrollDiv.className = 'modal-scrollbar-measure'
	this.$body.append(scrollDiv)
	var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
	this.$body[0].removeChild(scrollDiv)
	return scrollbarWidth
	}


	// MODAL PLUGIN DEFINITION
	// =======================

	function Plugin(option, _relatedTarget) {
	return this.each(function () {
	var $this = $(this)
	var data = $this.data('bs.modal')
	var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)

	if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
	if (typeof option == 'string') data[option](_relatedTarget)
	else if (options.show) data.show(_relatedTarget)
	})
	}

	var old = $.fn.modal

	$.fn.modal = Plugin
	$.fn.modal.Constructor = Modal


	// MODAL NO CONFLICT
	// =================

	$.fn.modal.noConflict = function () {
	$.fn.modal = old
	return this
	}


	// MODAL DATA-API
	// ==============

	$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
	var $this = $(this)
	var href = $this.attr('href')
	var $target = $($this.attr('data-target') \|\| (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
	var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

	if ($this.is('a')) e.preventDefault()

	$target.one('show.bs.modal', function (showEvent) {
	if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
	$target.one('hidden.bs.modal', function () {
	$this.is(':visible') && $this.trigger('focus')
	})
	})
	Plugin.call($target, option, this)
	})

	}(jQuery);
	function ajax_login_scripts() {

	wp_enqueue_style( 'user-login', get_template_directory_uri() . '/ajax-login-register/user-login.css', array(), null );

	wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/ajax-login-register/bootstrap.min.js', array( 'jquery' ), null, true );
	wp_enqueue_script( 'ajax-login-register-script', get_template_directory_uri() . '/ajax-login-register/user-login.js', array( 'jquery' ), null, true );

	wp_localize_script('ajax-login-register-script', 'ptajax', array(
	'ajaxurl' => admin_url( 'admin-ajax.php' ),
	));
	}
	add_action( 'wp_enqueue_scripts', 'ajax_login_scripts' );
	<a href="#pt-register">Login</a>
	<a href="#pt-login">Register</a>
	<?php
	require get_template_directory() . '/ajax-login-register/ajax-login-register.php';
	.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
	}
	.fade {
	opacity: 0;
	-webkit-transition: opacity .15s linear;
	-o-transition: opacity .15s linear;
	transition: opacity .15s linear;
	}
	.fade.in {
	opacity: 1;
	}
	.modal-dialog {
	position: relative;
	width: auto;
	margin: 30px 10px;
	}
	.modal.fade .modal-dialog {
	-webkit-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
	-webkit-transform: translate(0,-25%);
	-ms-transform: translate(0,-25%);
	-o-transform: translate(0,-25%);
	transform: translate(0,-25%);
	}
	.modal.in .modal-dialog {
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
	}
	.modal-content {
	position: relative;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #999;
	border: 1px solid rgba(0,0,0,.2);
	/border-radius: 6px;/
	outline: 0;
	-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
	box-shadow: 0 3px 9px rgba(0,0,0,.5);
	}
	.modal-body {
	position: relative;
	padding: 40px;
	}
	.modal-footer {
	padding: 20px 40px;
	text-align: center;
	border-top: 1px solid #e5e5e5;
	}
	.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
	}
	.modal-backdrop.fade {
	filter: alpha(opacity=0);
	opacity: 0;
	}
	.modal-backdrop.in {
	filter: alpha(opacity=50);
	opacity: .5;
	}
	.pt-register, .pt-login, .pt-reset-password, .pt-register-footer, .pt-login-footer {
	display: none;
	}
	div[data-active-tab="#pt-reset-password"] .pt-reset-password,
	div[data-active-tab="#pt-reset-password"] .pt-login-footer,
	div[data-active-tab="#pt-login"] .pt-login,
	div[data-active-tab="#pt-register"] .pt-register,
	div[data-active-tab="#pt-register"] .pt-login-footer,
	div[data-active-tab="#pt-login"] .pt-register-footer {
	display: block;
	}
	.pt-loading {
	display: none;
	}
	.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	}
	.alert>p, .alert>ul {
	margin-bottom: 0;
	}
	.alert-danger {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	}
	.alert-warning {
	color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
	}
	.alert-success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
	}
	.alert-info {
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
	}
	.close {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	filter: alpha(opacity=20);
	opacity: .2;
	}
	button.close {
	-webkit-appearance: none;
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
	}
	#pt-user-modal h3 {
	clear: none;
	margin-bottom: 20px;
	}
	.form-field {
	margin: 20px 0;
	position: relative;
	}
	@media (min-width: 768px) {
	.modal-dialog {
	width: 600px;
	margin: 70px auto;
	}
	.modal-content {
	-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	}
	}