Display Login buttons in theme

Place the PHP code below to your theme’s file to display the social login buttons.

You might need to echo the NextendSocialLogin::renderButtonsWithContainer();, like this:

<?php
if(class_exists('NextendSocialLogin', false)){
    echo NextendSocialLogin::renderButtonsWithContainer();
}
?>

Button HTML source

NextendSocialLogin::renderLinkAndUnlinkButtons

This code can render the link and unlink buttons on any form.
Parameters:

• $heading the heading text that shows up above the link/unlink buttons
• $link(bool) whether the link buttons should be rendered
• $unlink(bool) whether the unlink buttons should be rendered

This code is available as shortcode as well. Example for the shortcode:

[nextend_social_login login="1" link="1" unlink="1" heading="Connect Social Accounts"]

Parameters

• login if the user is not logged in and the login is 0 the login buttons won’t be shown
• link: If set to 0 the link buttons won’t be shown so logged in WordPress users can’t connect social accounts to their profile
• unlink: If set to 0 the unlink buttons won’t be shown so logged in WordPress users can’t disconnect social accounts from their profile
• heading: the heading text that shows up above the buttons
• provider: you can restrict the shortcode to show only a certain provider’s login button
• style: you can set how the buttons should look like
  • default – text and icon
  • icon – icon only
  • grid – default style but with grid layout ( v3.0.20 )
  • fullwidth – default style but it goes as wide as the container (v3.0.29)
• redirect: you can specify a redirect URI that the user will see after the successful login
• trackerdata: you can do various custom actions when the user logs in with the current login button. See an example code.
• align: with this parameter, you can align the social buttons left, center or right ( v3.0.15 )
  • left
  • center
  • right
  • space-between – only for grid style
  • space-around – only for grid style
• labeltype: defines whether the login or register labels should be used ( v3.0.26 )
  • login
  • register – requires Custom label for register buttons to be enabled.
• customlabel: you can specify a custom text for the connect state ( login/register ) of the social buttons. Use the {{providerName}} placeholder to render the name of the given provider. If you use this parameter, the “labeltype” parameter will be ignored. ( v3.1.11 )

Classes & attributes for CSS

There is a container which is around all login buttons. This has the followign classes:

• nsl-container: always present
• nsl-container-block: only when the login style is default (not icon)
• nsl-container-inline: only when the login style is icon
• nsl-container-grid: only when the shortcode style is grid
• nsl-container-login-layout-below-separator: based on the used login layout. The italic part matches the selected layout’s PHP file name which you can find at the template-parts folder.

Launching the login

Any HTML element which launches the social login process when clicked.

• data-provider=”facebook”: starts the login process via the given provider.

Example:

<a href="http://example.com/wp-login.php?loginSocial=facebook" data-provider="facebook">Click here to log in with Facebook</a>

Button HTML

Default layout: <span><svg/><span>{{label}}</span></span>
Icon layout: <span><svg/></span>

Outer span CSS classes

• nsl-button
• nsl-button-default (When the login button layout is not icon)
• nsl-button-icon (When the login button layout is icon)
• nsl-button-facebook (Based on the given provider ID)

Customize Login with your Theme

You can find a /template-parts folder in Nextend Social Login’s folder. (Both in the Free version and in the Pro Addon.) You can create overrides for these templates and style in your theme.

1. Create a nsl folder in your theme’s root. (It can be the child theme as well.)
2. Put the files to the nsl folder which you want to override. Be sure to keep the same name and file format. E.g. login-layout-above-separator.php
3. Make the changes in the files, the plugin will recognize and use them.

Files you can override

your-theme/nsl/style.css <- template-parts/style.css

This file contains all necessary CSS codes for the wide and icon buttons. It’s called in every page where there is a login button.

your-theme/nsl/[type]/[layout_type].php <- template-parts/l[type]/[layout_type].php

These files put the buttons to their correct places at the login screen.
[type] means the type of the login form where Nextend Social Login will place the social login button. For example: WooCommerce, BuddyPress or Comment.
[layout_type] means the login layout you can select, for instance, Below or Below with separator.

To change the Embedded login‘s look when the Above with separator layout is selected, you can use the following path: your-theme/nsl/embedded-login/above-separator.php

Match WordPress password field

Nextend Social Login uses the same HTML elements for the Password field as WordPress does, hence the styling is not done by us but by WordPress.
If the login form specific styles of WordPress are not loaded onto the page, then our password field can look somewhat different, a typical example of this is when you use the Page for register flow setting.

If you want the password field in the custom registration flow to look somewhat similar to the WordPress default password field, you will need to load custom styles, something like this:

To apply this effect only to the page that you selected for our “Page for register flow” setting, you should add it to the page, e.g. via a Custom HTML block.