Custom Templates

Login With AJAX has a templating system that allows you to override our templates or add your own. This page will cover all aspects of templates and how they work in the plugin.

File Hierarchy

A template consists of a folder within one of the designated template folder locations.

template-name - Template with name template-name
- template-name/login.php - Login Form
- template-name/logged-in.php - Logged in Widget/Area

If either login.php or logged-in.php are missing, the plugin will look for that file in the parent template and then the default template respectively and use that file instead. This allows you to create only one custom template if needed. The templates included in LWA all share the same logged-in.php template located in the default theme.

HTML Structure

In order to integrate with our default JavaScript and AJAX functionalities, templates should adhere to a general hierarchy of HTML and relative class names.

`login.php`

The login form template file is the most important file in terms of HTML structure, because it is where most of the AJAX logic is found. Therefore it's important that the right classnames are added in the right place.

Below is a hierarchical list of where classnames should be assigned (on some level multiple classnames in the same class="..." definition), this can be in <div> or any other structured/nested HTML elements, unless specified such as form.classname refers to a <form> element with classname class..

lwa-wrapper
- lwa lwa-template lwa-login - Wrapper classnames containing template specific name, such as default

`logged-in.php`

The logged in widget area does not have any specific AJAX functionality, therefore no specific HTML structure is required to make things work with native LWA functionality.

CSS Theme

Our own themes come with a CSS template, which standardizes sizing and look as much as possible accross different themes. Your theme can automatically include this by adding the following classes to the top hierarchies above:

lwa-wrapper lwa-bones
- lwa pixelbones
...

Our CSS template is covered in greater detail on our Custom CSS documentation page.

Custom Template Locations

By default, LWA will search for template folders located in the following locations and in the same order, where the last location is the last checked folder and any conflicting folder names will be overwritten by the last found location.

/wp-content/plugins/login-with-ajax/templates/ - Or wherever LWA is installed.
/wp-content/themes/parent-theme/plugins/login-with-ajax/ - parent-theme is your current or parent theme
/wp-content/themes/child-theme/plugins/login-with-ajax/ - child-theme is your child theme (if applicable)
/wp-content/plugin-themes/login-with-ajax/ - If folder exists

*/ above is cosidered the root of your WP installation

If you would like to create a template that overrides our native templates, simply name it the same directory name. For example, to replace our default template, name the folder default

We recommend adding your custom templates to the /wp-content/plugin-themes/login-with-ajax/ folder, or if you have created your own custom child theme, inside the /plugins/login-with-ajax/ of that theme. This will ensure upgrade-safe templates that aren't deleted/oeerwritten should you update your theme or our plugin.

Creating a Template

The first basic step is simply to create a folder in any of the custom template folders listed above. The easiest and most convenient way we'd recommend is to copy the default folder from our plugin template folder, rename the folder and modify as needed.

At that point, the template will appear in your settings, blocks etc. and can also be used in shortcodes or PHP functions. The template name used in shortcode and PHP functions should be the same name as the folder (not the admin label/formatted name).

Secondly, you can add either a login.php, logged-in.php, or both. We recommend copying either of these files from the default folder as a starting reference point.

Finally, if you'd like to add a formatted label in template selection dropdowns in the admin area, you can also add a hook. In the example below, we created a template folder called custom-template and added a label called My Custom Template


		function my_lwa_get_template_data_custom_template( $template ){
			$template['label'] = 'My Custom Template';
			return $template;
		}
		add_action('lwa_get_template_data_custom-template', 'my_lwa_get_template_data_custom_template');

`$lwa` PHP Variable

You'll notice in our template files that the $lwa PHP variable is used regularly throughout. $lwa is an associative array containing all the options passed onto the LoginWithAJAX::output() function.

Parent Templates

In some cases, you may simply want to change the class name of our default template and then use CSS to custom-style our default template. All our templates are based off the default template and a combination of extra PHP/HTML, CSS and JS to change the appearance.

We can take the minimalistic theme as an example, check the login.php template file and notice it's only one line and simply loads the equivalent default template file!

include( LOGIN_WITH_AJAX_PATH . '/templates/default/login.php');

This is because $lwa['template'] is set to minimalistic which is then output as the class name and used for template identification via CSS or JS like so:


<div class="lwa lwa-<?php echo esc_attr($lwa['template']); ?> pixelbones lwa-login" ...

Furthermore, the modal-minimalistic template takes it one step further and makes the minimalistic theme as the parent theme.


$lwa['template'] = 'minimalistic';
$lwa['template-parent'] = 'modal-minimalistic';
...

By modifying the template and template-parent keys in $lwa the right classes will be added to the default HTML forms and allows some extra JS and CSS to modify the default template into the minimalistic template style. In this case, the modal button area will be given the lwa-modal-minimalistic class, and then the actual login form within the modal popup will have lwa-minimalistic to display the regular minimalistic-styled form.