Wednesday, August 11, 2021

How to Properly Setup SAML Single Sign-On (SSO) in WordPress

Do you want to learn how to properly setup SAML single sign-on (SSO) in WordPress?

Adding single sign-on to WordPress lets your users quickly and securely login to your WordPress site without having to remember a username and password.

Instead they can use their Google login, Okta, or one of the many other SSO services.

In this article, we’ll show you how to properly setup SAML single sign-on in WordPress, step by step.

How to properly setup SAML Single Sign-On (SSO) in WordPress

Why Add SAML Single Sign On to WordPress?

SAML SSO is an open protocol that lets users login to multiple websites using the same credentials. For example, with single sign on you can log in to WordPress with your Google account.

This improves user satisfaction because they won’t have to go through the password reset process and can use an existing login instead.

From a website owner’s point of view, it lets you verify your users’ identities during login through a trusted provider which improves your WordPress security.

Single sign-on is very beneficial for internal company websites. Company admin / HR team loves it because it makes it easy to onboard new team members to multiple websites.

We use single-sign on for our internal company websites at Awesome Motive, so our team members can login across multiple websites using their company Gmail account without having to remember separate passwords.

Google sign in screen option

That being said, we’re going to share two different WordPress plugins that can help you setup SAML SSO in WordPress. Simply use the quick links below to choose the WordPress plugin you want to use.

Method 1. Setup SAML SSO with Google Apps Login

We recommend using the Google Apps Login plugin to easily set up SAML single sign-on in WordPress. It’s what we use here at WPBeginner so our team members can login to WordPress with their Google accounts.

The plugin is very easy to use and lets you give your users, employees, or students the option to sign in quickly with a secure Google login.

First thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once the plugin is activated, you need to navigate to the Google Cloud Platform Console to create a new API, so you can link your Google account and WordPress together.

To create the new API, first click the ‘Select a project’ drop-down menu at the top of the screen.

Your screen may look slightly different if you’ve already created a Google developer project, but you can still simply click the same drop down arrow to create a new project.

Select new Google project

This will bring up a popup window.

Here you need to click the ‘New Project’ button in the right-hand corner.

Click new project button

On the next screen, you need to name your project in the ‘Project name’ box. This will help you remember the purpose of the project, but it won’t appear to your visitors.

You also need to make sure the ‘Organization’ and ‘Location’ match your website’s domain name.

Name project and click create

After that, click the ‘Create’ button.

After the project is created, there will be a drop down notifications menu that shows your new project.

Click the ‘Select Project’ button to open up the project.

Notifications menu open new project

Next, click the ‘OAuth consent screen’ option in the left-hand menu.

Here you have two options to choose from. The ‘External’ option makes sense if you have a membership site or sell online courses and want to allow your users to login with Google.

The ‘Internal’ option only lets users within your company use the Google login. For this option, you need to have a premium Google Workspace account and your users need to be added as team members.

Whether you select Internal or External, every user that needs to login has to have an existing WordPress account set up under their Gmail address. Otherwise, they won’t be able to log in.

For more details, see our guide on how to add new users to WordPress.

With that said, we’ll select the ‘External’ option, since this gives us more flexibility about who can login.

Click oauth content screen and select external

After that, click the ‘Create’ button.

This brings you to a screen to enter your app details. First, you need to enter your ‘App name’ and select the ‘User support email’ from the drop down list.

Enter app name select user support email

Then, enter your ‘App domain’ information. You need to fill out all three fields.

Google needs this information to make sure that your website complies with online privacy regulations and user consent.

Enter app domain information

After that, scroll down to the ‘Authorized domains’ section.

Then, click the ‘Add Domain’ button to bring up a box where you’ll enter your domain name.

Add authorized domain name

Make sure you enter your domain without the http:// or https://.

Next, enter your email in the ‘Developer contact information box’, so Google can get in touch if there’s an issue with your project.

Enter developer contact information

Then, click the ‘Save and Continue’ button.

After that, click the ‘Credentials’ option in the navigation menu on the left-hand side of the page and then click ‘Create Credentials’.

Create credentials

This brings up a drop down menu.

You need to select the ‘OAuth client ID’ option.

select oauth client ID

On the next screen, click the ‘Application type’ drop down.

Then, select ‘Web application’ from the list.

Select web application drop down

This will bring up a form where you can give your web app a name.

The name is only for your own reference, it won’t appear to your visitors.

Name web app

Next, scroll down to the ‘Authorized Javascript origins’ section.

Then, click the ‘Add URL’ button and enter the URL for your website.

Javascript origins enter URL

After that, click the ‘Add URL’ button in the ‘Authorized redirect URLs’ section and enter your login redirect URL.

This URL is the URL of your login page. For most WordPress websites, this will be ‘yoursite.com/wp-login.php’.

Add redirect URL

After that, click the ‘Create’ button.

This brings up a popup that has your ‘Client ID’ and ‘Client Secret’. You need to copy both of these into your favorite text editor.

Copy client ID and client secret ID

Now you need to navigate back to your WordPress admin panel and go to Settings » Google Apps Login.

On this screen, you’ll enter the ‘Client ID” and the ‘Client Secret’ strings that you copied from above.

Enter client ID and client secret ID

After that, click ‘Save Changes’.

Once you’ve done that, Google single sign-on will be enabled. Now, when you or a visitor goes to the WordPress login page, they can login with their Google account in a couple of clicks.

Google sign in screen option

Method 2. Setup SAML SSO with SAML Single Sign On

This method involves using the SAML Single Sign On plugin. This plugin lets you add SAML SSO to WordPress and supports a variety of different logins.

For example, you can add SSO with Google, Salesforce, Microsoft Office 365, OneLogin, Azure, and more. Since it supports various business tools, it’s more suited for businesses who want to allow only team members to log in.

First thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, navigate to miniOrange SAML 2.0 SSO » Plugin Configuration to bring up the plugin settings screen.

Here, you need to select your service provider. This is the service your users will be using to login.

Select identity provider

For this tutorial, we’ll be using ‘Google Apps’, but you can select the best provider for your website. The integration steps will be similar.

In order to set up SSO with Google Apps, you need a Google Workspace account. Google Workspace is a collection of premium productivity and business tools from Google.

You also need to create a WordPress account for every user you want to give login access to. The email address for each user needs to be a Gmail account, or a team member email from Google Workspace.

For more details, see our guide on how to add new users and authors to WordPress.

Once you have a premium Google Workspace account, you can move forward with setting up SSO in WordPress.

Next, click on the ‘Service Provider Metadata’ menu option.

Click service provider metadata menu

Then, scroll down the page until you find the chart where your ‘SP-EntityID/Issuer’ and ‘ACS URL’ are listed.

Copy both of these and paste them into your favorite text editor.

Copy entity ID and ACS URL

Once you’ve done that, you need to open up your Google Admin console in a new tab.

Then, go to Apps » Web and mobile apps in the left-hand navigation menu.

Google Admin console web and mobile apps

After that, click the ‘Add App’ drop down.

Then, select the ‘Add custom SAML app’ option.

Add custom SAML app

On the next screen, you’ll need to give your app a name, and you can upload a custom logo if you’d like.

Then, click the ‘Continue’ button.

Name app click continue

For the next step, you have two different options.

The easiest option is ‘Option 1’, all you have to do is click the ‘Download Metadata’ button. You’ll need to upload this data to WordPress at a later step.

Download metadata

After that, click ‘Continue’ at the bottom of the screen.

This will bring you to a screen where you can paste your ‘ACS URL’ and ‘Entity ID’ that you copied earlier.

Then, check the ‘Signed response’ checkbox.

Enter ACS URL and Entity ID

Next, select ‘EMAIL’ from the ‘Name ID format’ drop down.

Then, click ‘Continue’ at the bottom of the screen.

Choose email nameid

On the next screen, you need to click the ‘Add Mapping’ button.

This will map the data from your WordPress login form to Google.

Click add mapping button

Next, select the ‘First name’ field in the ‘Basic information’ section and type ‘firstname’ into the ‘App attributes’ box.

Then, click the ‘Add Mapping’ button, select the ‘Last name’ field, and type ‘lastname’ into the ‘App attributes’ box.

Set Google directory attributes

Once you’ve done that, click the ‘Finish’ button.

Now, you’ll be taken back to the SAML app you just created. Select your app, and then click on the ‘User access’ section.

Click user access

Then, in the ‘Service status’ box, click the ‘ON for everyone’ radio button.

After that, click ‘Save’.

Turn on for everyone

You’ve now successfully created and enabled your SAML SSO app.

Now, go back to your WordPress admin panel and navigate to miniOrange SAML 2.0 SSO » Plugin Configuration.

On this screen, make sure that ‘Google Apps’ is selected and scroll down to the ‘Configure Service Provider’ section and click the ‘Upload IDP Metadata File/XML’ button.

Configure service provider section

Now, type ‘Google’ into the ‘Identity Provider Name’ box and click the ‘Choose File’ button.

Then, select the XML file that you downloaded earlier and click the ‘Upload’ button.

Upload metadata file

After that, click the ‘Attribute/Role Mapping’ menu option.

With the free version of the plugin, you have to keep the default attribute options.

Attribute and role mapping section

Then, scroll down to the ‘Role Mapping’ section.

Here you can change the default role, which will be assigned to all non-admin users when they login with SSO.

If it isn’t already selected, then select ‘Subscriber’ from the drop down list and click the ‘Save’ button at the bottom of the screen.

Role mapping subscriber role

Now you need to add a simple login link to your WordPress blog.

To do this, navigate to Appearance » Widgets and look for the widget area you’d like to add your login link to. In this tutorial, we’re adding our login widget to our Right Sidebar widget area.

Under the widget area, click the ‘+’ icon to add a new block.

Add new widget block

Then, type ‘Login’ into the search bar so you can find and select the ‘Login with Google’ widget.

This will insert a ‘Login with Google’ link into the widget area.

Login with Google widget

You can also add a title to the login block, if you like.

Make sure to click the ‘Update’ button before you leave the page.

Update widget block

Now when your users are on your website, they have the option to login with their Google accounts.

When they click the link they’ll be taken to the Google login screen to select their account.

Login with Google link

We hope this article helped you learn how to properly setup SAML single sign-on in WordPress. You may also want to see our guide on how to get a free email domain, or our expert comparison of the best business phone services for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Properly Setup SAML Single Sign-On (SSO) in WordPress appeared first on WPBeginner.


August 11, 2021 at 04:46PM

Tuesday, August 10, 2021

How to Change or Remove ‘Howdy Admin’ in WordPress (Easy Way)

Do you want to change or remove the ‘Howdy’ greeting that is displayed on the WordPress admin bar after logging in?

Many people never use that word in real life. You might like to change it to a greeting that sounds more familiar.

In this article, we’ll show you how to change or remove ‘Howdy Admin’ with 3 easy solutions.

How to Change or Remove Howdy Admin in WordPress

Why Change or Remove ‘Howdy Admin’?

Whenever a user logs into the dashboard of their WordPress website, they are greeted by the word ‘Howdy’ followed by their display name.

For example, if John Smith logged in, then he’d see the words ‘Howdy, John Smith’ near the top right of the screen.

Howdy, John Smith

That greeting might not sound natural to some users. ‘Howdy’ is short for ‘How do you do?’, but many English speakers never use the word. It may sound out of place, outdated, or even a bit annoying.

Luckily, you can change the greeting to something that sounds more familiar, like Welcome, Hello, Hey, or Hi. You can also leave it out entirely, so you’ll just see the user’s display name.

There are a few ways to change or remove ‘Howdy Admin’ and we’ll show you three. The first two methods are easiest and use a plugin.

You only need to use one of these methods. Simply click the link below to skip to the method that best suits your needs:

Method 1: Removing ‘Howdy Admin’ Using a Plugin

First, you need to install and activate the Admin Trim Interface plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The Admin Trim Interface plugin lets you remove features you don’t need from the WordPress admin area, including the ‘Howdy’ greeting. Once you remove it, you’ll just see the username with no greeting.

Once you activate the plugin, go to the Appearance » Admin Trim Interface page in your WordPress dashboard. Here you will see the list of ten interface elements that can be hidden.

Admin Trim Interface Page

All you need to do now is click the Hide “Howdy” checkbox, and then click the Save Changes button.

Click the Hide Howdy Checkbox

When you look at the top of the screen now, you’ll notice that the ‘Howdy’ greeting has been removed.

Howdy Is Removed

Method 2: Changing ‘Howdy Admin’ Using a Plugin

For the second method, you need to install and activate the Admin Customizer plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Admin Customizer lets you customize your WordPress login screen and admin area, including changing the word ‘Howdy’ to something else.

Once you activate the plugin, go to the Settings » AS Admin Customizer page in your WordPress dashboard. To change the greeting, you’ll need to click on the Dashboard Section button.

Click on the Dashboard Section Button

Next, type your preferred greeting in the Update the Howdy Text text box and make sure you click the Save Changes button. We’ll type the word ‘Welcome’.

Type Welcome in the Update the Howdy Text Box

Tip: You don’t need to type a comma. That will be added automatically.

Now you can see in your dashboard that the ‘Howdy’ greeting has been changed to ‘Welcome’.

The Howdy Greeting Has Been Changed to Welcome

Method 3: Change or Remove ‘Howdy Admin’ Using Code

You can also change or remove ‘Howdy Admin’ without using a plugin by adding a custom code snippet to your theme’s functions.php file. We don’t recommend this method to inexperienced users, because even a small mistake could break your website.

If this is your first time adding code to your WordPress files, then you should check out our guide on how to copy and paste code snippets in WordPress.

We’ll use the Code Snippets plugin mentioned in that guide, so you’ll need to install that first. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled Snippets to your WordPress admin bar. When you click it, you’ll see a list of example custom code snippets.

Go ahead and click on the Add New button to add your first custom code snippet in WordPress.

Click the Add New Button to Add a Custom Code Snippet

This will bring you to the ‘Add New Snippet’ page.

You need to start by entering a title for your custom code snippet. Let’s call it Howdy Admin. After that, copy and paste the code snippet below into the code box.

add_filter( 'admin_bar_menu', 'replace_wordpress_howdy', 25 );
function replace_wordpress_howdy( $wp_admin_bar ) {
$my_account = $wp_admin_bar->get_node('my-account');
$newtext = str_replace( 'Howdy,', 'Welcome,', $my_account->title );
$wp_admin_bar->add_node( array(
'id' => 'my-account',
'title' => $newtext,
) );
}</code>

Paste the Code Snippet Into the Code Box

Notice that Line 4 replaces the word ‘Howdy’ with ‘Welcome’.

When you come across this snippet in the future, you may not remember what it’s for. So it’s a good idea to type something helpful in the description as a reminder.

Type Something Helpful in the Description

You can also assign tags to your code snippet. This will help you sort your code snippets by topic and functionality.

Finally, you can click on the ‘Save Changes and Activate’ button. Once the snippet is activated, the ‘Howdy’ greeting will be replaced with ‘Welcome’.

The Howdy Greeting Will Be Replaced with Welcome

To use a different greeting, just replace the word ‘Welcome’ on Line 4 with something else, such as ‘Hello’. To remove the greeting altogether, delete the word ‘Welcome’ and the comma so there is nothing between the second set of quotes on Line 4, like this.

add_filter( 'admin_bar_menu', 'replace_wordpress_howdy', 25 );
function replace_wordpress_howdy( $wp_admin_bar ) {
$my_account = $wp_admin_bar->get_node('my-account');
$newtext = str_replace( 'Howdy,', '', $my_account->title );
$wp_admin_bar->add_node( array(
'id' => 'my-account',
'title' => $newtext,
) );
}

If you’d like to return to the ‘Howdy’ greeting, then just turn off the switch on the Snippets page.

Return to Howdy by Turning off the Switch

Alternatively, you can click the Save Changes and Deactivate button at the bottom of the Edit Snippet page.

Return to Howdy by Deactivating the Code Snippet

We hope this article helped you learn how to customize the greeting in the WordPress backend. Next, see our guide on how to choose the best WordPress hosting, or check out our list of must have WordPress plugins to grow your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Change or Remove ‘Howdy Admin’ in WordPress (Easy Way) appeared first on WPBeginner.


August 10, 2021 at 04:00PM

Monday, August 9, 2021

How to Add Live Ajax Search to Your WordPress Site (The Easy Way)

Do you want to add live Ajax search to your WordPress site?

Adding instant search to WordPress improves the default site search and makes it easier for your visitors to find the pages and posts they’re looking for.

In this article, we’ll show you how to add live Ajax search to your WordPress site, step by step.

How to add live Ajax search to your WordPress site (the easy way)

Why Add Live Ajax Search to WordPress?

Live Ajax search, also called instant search, improves the default WordPress search experience by adding the drop down and autocomplete feature that’s common in search engines like Google.

Here’s an example of this in action:

Google search live example

Live search guesses what users are searching for as they type and helps them find relevant content faster. This is a huge improvement from the default WordPress search.

By helping users find what they’re looking for quickly, live search will help them stay on your site longer, which can increase pageviews and reduce bounce rate.

That being said, let’s take a look at how you can simply add live Ajax search to your WordPress blog or website.

Adding Ajax Search to WordPress with a WordPress Plugin

The easiest way to add Ajax live search to WordPress is using the SearchWP plugin. It’s the best WordPress search plugin on the market used by over 30,000 websites.

SearchWP

This plugin goes beyond indexing post content and will index everything on your website, like custom fields, PDF documents, text files, WooCommerce products, and more.

For this tutorial, you can use the free SearchWP Live Ajax Lite Search plugin, since it automatically enables Ajax live search.

First thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the default WordPress search form will now automatically include the Ajax live search feature.

Displaying Ajax Live Search on Your WordPress Site

Since any active search bar now has live search, all you have to do is decide where you want them to display.

Below you’ll learn how to add the live search bar to common locations on your WordPress website.

Adding Live Ajax Search to WordPress Sidebar

One of the most popular areas to add a search bar is the WordPress sidebar. This makes it easy for your visitors to do a search no matter where they are on your website.

To add the search widget to WordPress, simply go to Appearance » Widgets to bring up the blocks based widget editor.

Customize widget blocks

Each widget area of your WordPress theme will have a separate tab in the block editor.

On our test site, our sidebar widget area is called ‘Right Sidebar,’ but yours may have a different name depending on your theme.

Simply click the ‘+’ icon underneath the sidebar section.

Add sidebar widget block

Then, type ‘SearchWP’ into the search bar and click the ‘SearchWP Live Search’ icon.

This will automatically insert the live Ajax search widget into your sidebar.

Add SearchWP live search widget

You can customize the Title section to change the heading for the search box. When you’re finished, click the Update button to save your changes and make the search bar live.

Customize and save live search widget

Now your live search bar will be usable by all of your website visitors.

Live widget search example

You can follow the same process to add the live search bar to any other widget area of your website. To add it to your navigation menu area, see our guide on how to add a search bar to your WordPress menu.

Adding Live Ajax Search to WordPress Pages

You may also want to add a live Ajax search box to other pages of your website. For example, you could have an archive page that lets your visitors search through your content.

To do this, you’ll need to navigate to the post or page you want to edit. For this example, we’ll show you how to add the live search bar to a WordPress page.

First, go to Pages » All Pages and then click on the page you want to edit.

Open up WordPress page

Once the page is open, click the ‘+’ icon on the page editor screen.

This will bring up the blocks menu.

Add new page block

Next, type ‘Search’ into the box and then click on the ‘Search’ icon to add it to your page.

It will automatically place the search bar for you.

Select search block

You can also customize the search title and the placeholder text inside the search box.

After that, make sure to click the ‘Update’ button in the upper right corner of your page.

Save live search block on page

Now, your visitors can use the live search bar on your website to quickly find what they’re looking for.

You can use the same process to add a search bar to any post or page.

Live search page example

Customizing Instant WordPress Search Results

SearchWP is a very versatile search plugin and goes beyond just the post content and indexes everything on your site including custom fields, ACF fields, text files, PDF document content, custom tables, custom taxonomies, WooCommerce product attributes, and more.

The pro version of the SearchWP plugin lets you completely customize your search results by creating your own relevance scale and adjust the algorithm without writing any code.

SearchWP Custom Engines

You also get the Metrics feature that lets you see what your visitors are searching for, and many other powerful features to further improve your on-site search feature.

We hope this article helped you learn how to add live Ajax search to your WordPress site. You may also want to see our guide on how to choose the best domain name registrar, and our expert picks of the best webinar software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Live Ajax Search to Your WordPress Site (The Easy Way) appeared first on WPBeginner.


August 09, 2021 at 04:18PM