SimpleModal Login provides a modal Ajax login, registration, and password reset feature for WordPress which utilizes jQuery and the SimpleModal jQuery
SimpleModal Login 1.0 now includes a user registration and password reset feature!
SimpleModal Login provides a modal Ajax login, registration and password reset feature for WordPress and utilizes jQuery and the SimpleModal jQuery plugin.
SimpleModal Login allows you to create your own custom themes. See the FAQ for details.
Translations: https://plugins.svn.wordpress.org/simplemodal-login/I18n (check the version number for the correct file)
Install and Activate
simplemodal-login
folder and its contents into the wp-content/plugins/
directory of your WordPress installationImplement
There are 3 options for using the SimpleModal Login features:
a) Use wp_loginout()
or wp_register()
in your theme. SimpleModal Login will use the loginout and register filters to add the simplemodal-login
class or simplemodal-register
class to the respective link.
b) Enable the Keystroke Shortcut option. Once this is enabled, you will be able to invoke SimpleModal Login using the Ctrl+Alt+L
keystroke.
c) Manually add a Log In or Register link. If your theme does not use wp_loginout()
and you still want to use this plugin, you can manually edit your theme and add a login link as follows:
<a href="/wp-login.php" class="simplemodal-login">Log In</a> <a href="/wp-login.php?action=register" class="simplemodal-register">Register</a>
Configure
1) Configure the SimpleModal Login settings, if necessary, from the SimpleModal Login option in the Settings menu. You can choose from one of the available themes as well as enable/disable the keystroke shortcut.
2) The styles can be changed with the following methods:
simplemodal-login-default.css
or simplemodal-login-osx.css
.style.css
stylesheetNote: The first two options will ensure that SimpleModal Login updates will not overwrite your custom styles.
Login screen with the default theme.
Register screen with the default theme.
Reset Password screen with the default theme.
Activity indicator with the default theme.
Login screen with the osx theme.
Register screen with the osx theme.
Reset Password screen with the osx theme.
Activity indicator with the osx theme.
The SimpleModal Login admin settings page
Install and Activate
simplemodal-login
folder and its contents into the wp-content/plugins/
directory of your WordPress installationImplement
There are 3 options for using the SimpleModal Login features:
a) Use wp_loginout()
or wp_register()
in your theme. SimpleModal Login will use the loginout and register filters to add the simplemodal-login
class or simplemodal-register
class to the respective link.
b) Enable the Keystroke Shortcut option. Once this is enabled, you will be able to invoke SimpleModal Login using the Ctrl+Alt+L
keystroke.
c) Manually add a Log In or Register link. If your theme does not use wp_loginout()
and you still want to use this plugin, you can manually edit your theme and add a login link as follows:
<a href="/wp-login.php" class="simplemodal-login">Log In</a> <a href="/wp-login.php?action=register" class="simplemodal-register">Register</a>
Configure
1) Configure the SimpleModal Login settings, if necessary, from the SimpleModal Login option in the Settings menu. You can choose from one of the available themes as well as enable/disable the keystroke shortcut.
2) The styles can be changed with the following methods:
simplemodal-login-default.css
or simplemodal-login-osx.css
.style.css
stylesheetNote: The first two options will ensure that SimpleModal Login updates will not overwrite your custom styles.
The WordPress wp_loginout()
function allows for an optional $redirect
parameter which is the URL where the user will be sent after a logging in our logging out.
To have the user return to the page they were on, update the code to look like:
<?php wp_loginout($_SERVER['REQUEST_URI']); ?>
If you are using the Meta Widget (Appearance > Widgets), to use this feature, you may need to delete the Meta Widget and add the code to your sidebar.php file manually.
For example, after you delete the Meta Widget, open sidebar.php (in your theme) and add[1] the following code:
<ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> </ul>
[1] Place it wherever you’d like to display and modify the code to fit your needs.
Lastly, if you’ve manually added a log in link, you can change it to:
<a href="/wp-login.php?redirect_to=<?php echo $_SERVER['REQUEST_URI']; ?>" class="simplemodal-login">Log In</a>
This is for users familiar with CSS and JavaScript, namely jQuery and SimpleModal.
To create a new theme you’ll need to add two files under the simplemodal-login
plugin directory: css/THEME.css
and js/THEME.js
. Replace THEME with the name you would like to use.
I suggest copying one of the existing themes as a template to start with.
This is an advanced option for users familiar with HTML, PHP and WordPress.
Starting with SimpleModal Login 1.0, each form (login, register, password reset) has a filter available that allows you to modify the HTML.
The 3 available filters are:
To use the filter, you’ll need to add code to your theme’s functions.php file. For example:
add_filter('simplemodal_login_form', 'mytheme_login_form'); function mytheme_login_form($form) { // $form contains the SimpleModal Login login HTML // do stuff here // you have to return the code that you want displayed return $form; }
You’d probably want to start by copying the form HTML from the appropriate function in the main plugin file and then modifying to fit your requirements.
Things you’ll need to change:
Create a $users_can_register
variable in your function:
$users_can_register = get_option(‘users_can_register’) ? true : false;
Replace $this->users_can_register
with $users_can_register
Create an $options
variables in your function:
$options = get_option(‘simplemodal_login_options’);
Replace $this->options['registration']
with $options['registration']
Replace $this->options['reset']
with $options['reset']
Here are complete working examples for each of the three filters:
simplemodal_login_form: http://pastebin.com/rm3WWWRS
simplemodal_registration_form: http://pastebin.com/bVzZBKZf
simplemodal_reset_form: http://pastebin.com/jpd1RiP9
Have a question, comments or feature requests? Be sure to let me know.