How to Add Web Push Notification to Your WordPress Site

Have you noticed the web push notifications used on popular websites like Facebook? Recently one of our readers asked if it was possible to add web push notifications in WordPress. Ofcourse, it is. In this article, we will show you how to add web push notification to your WordPress site.

Why Add Web Push Notifications to Your WordPress Site?

Web push notifications are clickable messages displayed on top of user's Desktop. They can be shown even when user's browser is not open.

Aside from desktop, Web push notifications also work on mobile browsers.

Popular sites including Facebook, Pinterest, LinkedIn, and many others are already using web push notifications. It is proving to be more engaging than SMS, email marketing, and other social media. According to a survey, push notifications have a 50% open rate on mobile devices.

This means more engaged audience for your WordPress site and significant boost in your overall page views and returning visitors.

Having said that, let's take a look at how to add web push notifications to a WordPress site.

Setting up Web Push Notifications in WordPress with OneSignal

OneSignal is a free service that allows you to add push notifications to any website, web, or mobile apps.

First thing you need to do is install and activate the OneSignal plugin. 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 OneSignal in your WordPress admin bar. Clicking on it will take you to plugin's settings page.

The settings page is divided into Setup and Configuration tabs. The setup tab is actually detailed documentation on how to setup OneSignal push notifications in WordPress. It has the same steps that we will show you in this tutorial.

To setup OneSignal, you will need to add different API keys and application IDs into the plugin settings.

Let's get started.

Step 1: Create Google Keys

First you need to visit Google Services Wizard website.

Simply provide a name for your app and add an Android package name. OneSignal does not use Android package name, but it is a required field.

Next, choose your country and region, then click on the 'Choose and configure services' button.

This will bring you to the next screen where you will be asked to select Google services you want to use with your app. You need to click on 'Enable Google Cloud Messaging' button.

You will now see your server API key and Sender ID.

You need to copy your Sender ID and paste it in WordPress plugin's Configuration tab under Google Project Number field.

You also need to copy your Server API key and paste it in a text file on your computer. You will need this API key later in this tutorial.

Step 2: Setting up Chrome and Firefox Push Notifications

We will now setup push notifications on Chrome and Firefox. First you need to visit OneSignal website and create your free account.

Once you have created your account, you need to login and click on 'Add a new app' button.

You will be asked to enter a name for your app. You can use any name you want and then click on 'Create' button to continue.

On the next page, you will be asked to select a platform to configure. You need to select 'Website Push' and then click on the next button to continue.

After which you will be asked to select browser platform. You will see Google Chrome and Mozilla Firefox in one box and Safari in another box.

You need to click on Google Chrome and Mozilla Firefox box. We will show you how to setup Safari, later in this article.

Click on the next button to continue.

In the next step, you will be asked to enter your WordPress site url, Google Server API key, and URL for your default notification icon image.

If your website does not support SSL/HTTPS, then you need to check the box next to 'My site is not fully HTTPS' option. You can also setup SSL on your website if you like, but it's not required.

Google Chrome does not support web push notifications for non-ssl or http websites. OneSignal solves this problem by subscribing users to a subdomain on their own https domain.

Checking 'My site is not fully HTTPS' option will display HTTP fallback options. You will need to choose a subdomain for your app and enter Google Project Number or Sender ID you generated in the first step.

Click on the Save button to continue. Now you can exit this dialog box. You will be prompted with a notice that your setup isn't complete yet and can be resumed later. Click Yes to close the dialog box.

Step 3: Getting OneSignal Keys

You now need to get OneSignal Keys for your website. From your app dashboard click on App Settings.

This will take you to your app settings page. You need to click on the Keys and IDs tab.

This will show your OneSignal App ID and Rest API Key.

You need to copy and paste them in OneSignal WordPress plugin's configuration tab on your site.

Step 4: Setting up Safari Web Push Notifications

Remember we skipped Safari web push notification settings. Now we will show you how to setup Safari web push notifications.

Login to your OneSignal account and go to your App Settings page. Scroll down to web platforms and click on the configure button next to Apple Safari.

This will bring up a dialog box where you will be asked to enter your site name and site url.

Then you need to check the box next to 'I'd like to upload my own notification icons' option.

You will now see an option to upload different icon sizes. These are square images, use Photoshop or any image editing program to create icons in the exact sizes.

Click on choose file buttons to upload all your icons.

Click on the Save button and then close the dialog box.

Refresh the App Settings page and scroll down to Web Platforms section. This time you will see 'Web ID' under Apple Safari.

You need to copy this web ID and paste it in Configuration tab of OneSignal plugin on your site.

That's all, you have successfully setup OneSignal web push notifications for your WordPress site.

Step 5: Testing Web Push Notifications on Your WordPress Site

By default, OneSignal plugin will add a subscription icon to your WordPress site. Visit your website in a supported browser and then click on the subscribe button.

You will see the default 'thank you for subscribing' message.

Now login to OneSignal account. Click on your app name, and then on App Settings.

Scroll down to the web platforms section and click on the configure button next to Google Chrome and Firefox.

You will see the platform configuration screen which you filled in earlier. Simply click on Save button and then click on Continue.

You will be asked to select target SDK. You need to select WordPress and then click on Next.

Since you only have one subscriber at the moment your subscriber ID will be automatically filled.

Click on the next button, and you will reach the 'Test Settings' step.

Click on 'Send Test Notification' button.

One Signal will now send a web push notification.

The notifications appearance may differ depending on which browser you used to subscribe. When the notification appears on your computer screen you need to click on it.

It will take you to confirmation screen, showing that you have successfully setup OneSignal web push notifications for your website.

Return back to the configure screen on OneSignal website and click on 'Check Notification Status' button.

You will now see another success message which indicates that you have successfully added web push notifications to your WordPress site.

How to Send Web Push Notifications in WordPress with OneSignal

The OneSignal web push notifications plugin on your WordPress site will automatically send a notification to all subscribers when you publish a new post.

You can also manually send notifications from your OneSignal App Dashboard. Login to your OneSignal account and click on your app name.

From the menu on your left, click on the 'New Message' button.

This will bring you to the new message screen. You can enter a title and some content for your notification.

You can also click on the Options, Segment, Schedule/Send Later to further customize your web push notification.

For example, you can link it to a particular page on your site, send it to a particular segment of your users, or schedule it to be sent at a specific time.

We hope this article helped you add web push notification your WordPress site. You may also want to see our list of the best membership plugins for WordPress.

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 Web Push Notification to Your WordPress Site appeared first on WPBeginner.

Nailing the Perfect Navigation for Your WordPress Site

It's a funny thing. We often place a large emphasis on the creation of great content and on the development of an effective design to wrap around that content. But without as much effort or thought put into your website's navigation, your visitors may never be able to enjoy all that your website has to offer.

A B2B Web Usability Report released last year uncovered some interesting facts in support of the importance of well-made website menus:

They asked: “When you get to an internal page on a vendor website from a referral site or search engine, how do you orient yourself?” Nearly 50% of those who responded to the survey said they use the main navigation. In addition, 36% said they expect the company's logo to take them back to the home page.

They also asked: “Which website elements annoy you or cause you to leave a website?” A total of 37% of respondents claimed a poor design or navigation as a source of frustration.

That being said, menu design and planning doesn't have to be difficult. But like with any other element of your website, it does require serious planning and special tools in place to pull off a well-executed menu. Here are just some of the questions you may need to ask yourself:

• Where do you want the menu to be?


• How many menus do you need?


• Will there be a home button or do you trust visitors to know that the logo is the link?


• Do you need a hamburger menu design?


• Do you want a static menu to be visible at all times?


• Which pages need to be on the top level of the navigation?


• Do you need to use color in the menu?


• What sort of animation should be applied to the menu?


• How do you want to organize the pages?

As you can see, there is a lot to consider in terms of building out a menu and each one of those features are open to customization. As a developer, you're responsible for making sure that whatever you choose aligns well with the rest of your website's style, functionality, and purpose.

Think of menus as a visitor's map or tour guide of your website. In the end, it won't matter how great your website looks if visitors can't figure out how to find the information that's the most important to them.

Planning Your Menu: Start with the Basics

Website navigation needs to do exactly what the name implies: help visitors navigate through the site. Here are some tips to get your planning off to a good start:

• Identification: Identify all of the different pages that will need to exist on the website.


• Optimization: Using the keyword research you used in writing content for the website, apply those same guidelines and principles for naming your website's pages. It'll also be important to strike a balance between optimizing a page's name for SEO with something simple and straight-to-the-point.


• Visualization: Use a visual mapping tool to lay out the pages of your website. For smaller websites (less than ten pages and a singular menu bar), Excel or PowerPoint would work just fine for your purposes. For anything larger, consider using a free trial with Slickplan or Power Mapper.


• Minimization: When planning the levels of navigation, it's best to keep the amount of clicking visitors need to do to a minimum. Ideally, there should be no more than two or three levels of navigation within a single menu. If so, consider multiple menus instead.


• Organization: Navigation needs to be logical, from top-to-bottom and left-to-right. Introduce who you are (About), what you do (services, products, etc.), what resources you offer (blog, white papers, free consultation, etc.), and your contact info (Contact). The pages of your website will of course be tailored to your specific business, but the basic logic remains the same. Educate, speak to your audience's pain, demonstrate your expertise, and then offer a point of contact.


• Location: Place your menu in an easy-to-find location. No one should have to hunt around to find the menu that is going to help them explore the rest of the site.


• Omnipresence: Consider making a menu “sticky” so that as visitors scroll down through a long page, the menu is ever-present. And if you do make the menu sticky, make sure it shrinks in size so that, while always there, it doesn't distract from the rest the content.


• Truncation: If you've got a very large menu, consider instead forcing it inside a hamburger menu or mega menu, and save that prime real estate on your site for something else. Hamburger menus are easily recognizable these days since they're the standard menu for mobile devices, so you shouldn't have to worry about visitors not knowing where to go on their desktops to find it.


• Consistency: Any design or stylistic touches you make to the website should align with what is done to the menu. Complimentary colors, animation, and website CTAs should all be inspiration used to create the look and movement of a menu.


• Mobility: The menu, like anything else on websites, absolutely, positively needs to be mobile-friendly and responsive.

Setting up Your Menu: Consider the Options

As with everything else in WordPress, you've got options when it comes to setting up your website's menus. We're going to review each of these options and then provide you with some basic knowledge that you'll need to make the most out of each.

Option 1: Theme Menu Setup

Many WordPress themes will include a Menus module for simple setup and customization of your website's theme. If you want to start within your theme's settings, here is what you'll want to do:

In WordPress, go to the Appearance tab and click on “Customize.” This will take you to your theme's customization settings and provide you with a live preview of any changes you make.

The Customize sidebar that appears to the left of your site's live preview.

From Customize, you'll then see a sidebar to the left of the live preview of your site. Click on the Menus tab. (Interestingly enough, you'll see that WordPress has done a great job of setting up their own menus logically and with simple labels for easy navigation.)

The options in the “Menus” menu in “Customize.”

You'll have two options from the Menus tab. Start with Main Navigation since this will allow you to define the setup of your main menu.

The Main Navigation menu in “Menus”

From the Main Navigation tab, you can then add new pages, remove pre-defined defaults, rename navigation labels, and revise the hierarchy structure, all through drag-and-drop. At the bottom, you can also define where the main navigation should exist on the website.

The Menu Locations option in “Menus”

Click on the back arrow and then navigate to the Menu Locations tab. From here you'll be able to define which menus will exist on different parts of your website. There are two important things to note here: 1) Your view and options will differ based on the theme you're using. 2) If you're planning on having more than one menu on your website, you'll have to define those other menus through a different process before you can assign them a location. (Steps for that can be found below.)

Regardless of which of the setup options you pursue, the theme customization modules are an important tool to have when setting up the basics of a website. For information on WPMU DEV's Upfront theme's menu customization, check out this article.

How to Choose a Template for Your Site on WordPress

WordPress is one of the most popular CMS today. It is easy to configure and use it for creating any website, but it was originally positioned as a platform for creating blogs. WordPress attracted to blogging a lot of people by the exuberance of the themes. But few beginners understand that not all templates are equally good, and to be honest, many of them are very dangerous.