Theme Developer Docs

Display Login buttons in your theme

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

<?php
if(class_exists('W3SocialLogin', false)){
    W3SocialLogin::renderButtonsWithContainer();
}

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

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

Default HTML source of the buttons

<div class="dz-container dz-container-block dz-container-login-layout-below-separator" style="display: block;">
   <a href="***?loginSocial=facebook" rel="nofollow" aria-label="Continue with <b>Facebook</b>" data-plugin="nsl" data-action="connect" data-provider="facebook">
      <span class="dz-button dz-button-default dz-button-facebook" style="background-color:#4267b2;">
         <svg xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff"></path>
         </svg>
         <span>Continue with <b>Facebook</b></span>
      </span>
   </a>
   <a href="***?loginSocial=google" rel="nofollow" aria-label="Continue with <b>Google</b>" data-plugin="nsl" data-action="connect" data-provider="google">
      <span class="dz-button dz-button-default dz-button-google" style="background-color:#dc4e41;">
         <svg xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff"></path>
         </svg>
         <span>Continue with <b>Google</b></span>
      </span>
   </a>
   <a href="***?loginSocial=twitter" rel="nofollow" aria-label="Continue with <b>Twitter</b>" data-plugin="nsl" data-action="connect" data-provider="twitter">
      <span class="dz-button dz-button-default dz-button-twitter" style="background-color:#4ab3f4;">
         <svg xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff"></path>
         </svg>
         <span>Continue with <b>Twitter</b></span>
      </span>
   </a>
   <a href="***?loginSocial=linkedin" rel="nofollow" aria-label="Continue with <b>LinkedIn</b>" data-plugin="nsl" data-action="connect" data-provider="linkedin">
      <span class="dz-button dz-button-default dz-button-linkedin" style="background-color:#0074b3;">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="#fff"></path>
         </svg>
         <span>Continue with <b>LinkedIn</b></span>
      </span>
   </a>
</div>

W3SocialLogin::renderLinkAndUnlinkButtons

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

  1. $heading the heading text that shows up above the link/unlink buttons
  2. $link(bool) whether the link buttons should be rendered
  3. $unlink(bool) whether the unlink buttons should be rendered

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

[w3_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
    1. icon – icon only
    2. grid – default style but with grid layout ( v3.0.20 )
    3. 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 )
    1. left
    2. center
    3. right
    4. space-between – only for grid style
    5. space-around – only for grid style
  • labeltype: defines whether the login or register labels should be used ( v3.0.26 )
    1. login
    2. register – requires Custom label for register buttons to be enabled.

Classes and attributes to apply custom CSS styles

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

  1. dz-container: always present
  1. dz-container-block: only when the login style is default (not icon)
  1. dz-container-inline: only when the login style is icon
  1. dz-container-grid: only when the shortcode style is grid
  1. dz-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.

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

Example:Click here to log in with Facebook

Button HTML

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

Outer span CSS classes

  1. dz-button
  1. dz-button-default (When the login button layout is not icon)
  1. dz-button-icon (When the login button layout is icon)
  1. dz-button-facebook (Based on the given provider ID)

Customize W3 Social Login with your Theme

You can find a /template-parts folder in W3 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/dz/[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 W3 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/dz/embedded-login/above-separator.php

What are your Feelings