Table of contents
Introduction
Before continuing, please make sure you are using Nextend Social Login 3.0.20 or newer, since the “grid” button style was not available in previous versions.
If you are using a previous version, please make sure you are using either the “default” or the “icon” style.
In this documentation you can find a guide about replacing the social buttons of the theme with the default social buttons of Nextend Social Login.
We will use PHP code and Shortcode, so the documentation:
will be useful in customizing our shortcode.
To override the layout of your theme, you need to create the exact same location and file name of the file you are trying to override in your child theme.
Download and install the premade child theme.
The premade child can be downloaded by clicking here.
The contents of this .zip file must be copied to your server at:
- wp-content/themes/
If everything was done right and you have the Listingpro theme installed, then the child theme will appear in the theme list and you will be able to activate it at Appearance>Themes.
Modifications for existing child theme:
If any of the following files are already included in your child theme, then you just need to modify them!
Important note: The following code parts will have 2 occurrences in each file! Don’t forget to replace both!
Replacing manually the social buttons in the default Sign In/Sign Up modal.
The social buttons in the default modals are coming from the file:
- wp-content/themes/listingpro/include/lp-needlogin.php
The same path must be recreated in your child theme, for example if the child theme folder is listingpro-child, then:
- wp-content/themes/listingpro-child/include/
Once the folder structure is ready, copy the original file from the original path into the created folder and then open this copy!
The social buttons in these forms are coming from the code part between:
<?php
if ( class_exists( 'NextendSocialLogin' ) ) {
...
?>
...
<?php
...
}
?>
tag, as it can be seen below:
The opening <?php, the closing ?> tag and the codes between them must be replaced with the following PHP code:
<?php if (class_exists('NextendSocialLogin', false) && count(NextendSocialLogin::$enabledProviders) > 0) { ?>
<p class="margin-top-15"><?php esc_html_e('Connect with your Social Network', 'listingpro'); ?></p>
<?php
echo do_shortcode('[nextend_social_login style="grid" align="center"]');
}
?>
just like it appears in the picture below:
Once it is done, we need to call in this file in the functions.php of the child-theme. So open this file:
- wp-content/themes/listingpro-child/functions.php
and add this code right after the opening <?php tag:
/* ============== login based file ============ */
if (!is_user_logged_in()) {
$customLoginPopupFilePath = get_theme_file_path('include/lp-needlogin.php');
if (file_exists($customLoginPopupFilePath)) {
require_once $customLoginPopupFilePath;
}
}
like it appears in the screenshot:
Replacing manually the social buttons in the Sign In/Sign Up modal of a Page Template.
To replace the social buttons of the custom login page created by Listingpro at WordPress>Pages>Add new>Template>Login Page, you need to copy the following file:
- wp-content/themes/listingpro/template-login.php
to the same path in your child theme, for example if the child theme folder is listingpro-child, then:
- wp-content/themes/listingpro-child/
The social buttons on the login template page are coming from the codeparts between the:
<?php if ( class_exists( 'NextendSocialLogin' ) ) {
...
}
?>
The opening <?php, the closing ?> tag and the codes between them must be replaced with the following PHP code:
<?php if (class_exists('NextendSocialLogin', false) && count(NextendSocialLogin::$enabledProviders) > 0) { ?>
<p class="margin-top-15"><?php esc_html_e('Connect with your Social Network', 'listingpro'); ?></p>
<?php
echo do_shortcode('[nextend_social_login style="grid" align="center"]');
}
?>
Replacing manually the social buttons in the mobile app view Sign In/Sign Up modal.
When you have the “App View” selected at WordPress>Theme Options>LISTING SETTINGS>Mobile View, then a different form will be displayed on mobile and tablet devices. The social buttons in these forms are coming from the file:
- wp-content/themes/listingpro/mobile/templates/login-reg-popup.php
The same folder structure must be recreated in your child theme, for instance if the child theme folder is listingpro-child, then:
- wp-content/themes/listingpro-child/mobile/templates/
Once the folder structure is ready, copy the original file from the original path into the created folder and then open this copy!
The corresponding codeparts are between the PHP code:
<?php if ( class_exists( 'NextendSocialLogin' ) ) { ?>
...
<?php } ?>
as it can be seen below:
The opening <?php, the closing ?> tag and the codes between them must be replaced with the following PHP code:
<?php if (class_exists('NextendSocialLogin', false) && count(NextendSocialLogin::$enabledProviders) > 0) {
echo do_shortcode('[nextend_social_login style="grid" align="center"]');
}
?>
just like it appears in the picture below:
Necessary CSS codes
The following CSS codes are necessary to make the social buttons fit into the modal of Listing Pro. These codes could be added at the end of the style.css of your child theme.
/*
Listingpro overrides the font color of the social buttons.
*/
div.nsl-container span {
color: #fff;
}
/*
We need more space for the grid styled social buttons.
*/
@media only screen and (min-width: 768px) {
div.login-form-popup {
width: 635px;
}
}
@media only screen and (max-width: 480px) {
/*
Mobile view - Login template - Available space is too narrow inside the container -> We need to reduce its padding.
*/
.siginincontainer, .siginupcontainer, .forgetpasswordcontainer {
padding: 0 20px;
}
/*
App view + Login template page - Available space is too narrow inside the container -> We need to reduce its padding.
*/
body.page-template-template-login-php .login-form-popup {
padding-left: 0;
padding-right: 0;
}
/*
We need to allow scrolling on regular mobile view.
*/
div.md-modal.md-effect-3.md-show#modal-3 {
overflow-y: scroll;
height: 100%;
}
/*
We need to allow scrolling on the Mobile App view
*/
.modal-open div#app-view-login-popup {
overflow-y: scroll !important;
}
/* Login Popup style2 - is not high enough */
.style2-popup-login#app-view-login-popup {
overflow-y: scroll !important;
}
/* Login Popup style2 - ListingPro pushes the content down 25% -> Top of the content will be cropped. */
.modal.fade.style2-popup-login#app-view-login-popup .modal-dialog {
-webkit-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
}
}
Important note: Using too many social buttons in the modal can make the absolute positioned modal overlap other elements. In that case you will probably need some additional CSS codes, to improve the results.