What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Create Push Notifications for WordPress Posts

How to Create Push Notifications for WordPress Posts

Push notifications are not a new idea as they have been around for years on mobile apps. However, creating push notifications for WordPress posts is quite a new technology that allows you to notify readers of updates on your site by sending messages to their desktops and phones directly even if they are not visiting your site.

As soon as they open a web browser that is supported by the push notification service you use, they will receive the messages, and then they can view your updates and go to your site by following the links.

There are two great reasons to use push notifications just as some popular websites have already done.

  • Since your visitors have to give their permissions before you can send push notifications to them, those who accept the notifications are probably your target audience. Keeping them notified of your updates will certainly increase the valuable website traffic.
  • Keeping engaged with your target audience could bring an increase to the conversion rate and sales.

In this tutorial, we will show how to create push notifications for WordPress posts in detail. To make things easy, we have used a plugin named OneSignal which is completely free. The setup of this plugin might be a little bit complicated, but the helpful features in it are definitely worth the efforts.

Create Push Notifications for WordPress Posts by Using OneSignal

Set up OneSignal for Chrome and Firefox Push Notifications

OneSignal supports all of Chrome, Firefox and Safari. Depending on what you need, you can configure push notifications for all these web browsers or any one of them. The setup may take 10 minutes or longer because there are several steps to finish.

First of all, you have to install the OneSignal plugin by using the installer in WordPress dashboard. The activation of the plugin will generate a menu named OneSignal Push. What you need to do next is to get the following information required to make the plugin work.

Plugin Configuration

Get the required Google keys

To enable push notifications in Chrome, a Google Project is required to authorize OneSignal to use the Google web push services. To create a Google Project, visit this page and log in with your Google account. Then, select “Create a project” as is shown in the screenshot below.

Create a Project

In the popup, give the project a name, and click on “Create”.

Configure Project

Wait for a few seconds for the new project to be created, and then you will be redirected to the Google Cloud dashboard. Find the block for your project and copy the project number. Store this number somewhere because it is important for the next steps.

Project Number

Then, find the “Use Google APIs” block in the dashboard and enable APIs by clicking on the link.

Use Google APIs

On the next page, search “cloud messaging” and select “Google Cloud Messaging” as the API.

Google Cloud Messaging

After enabling the API, go to the “Credentials” menu in the left sidebar, click on “Create credentials” and select “API Key”.

Create Credentials

In the new popup, select “Server Key”. And on the new page, you don’t need to touch anything but clicking on the “Create” button.

Create Server Key

Now a popup should appear displaying your API key. Note the information done. You will need it when setting up push notifications for Chrome.


Since you have got the project number and the API key, let’s move to the next step.

Create and configure a OneSignal app

The OneSignal plugin doesn’t work until it is associated with a OneSignal app which is properly configured. To create such an app, you need to go to OneSignal website, create a free account, and follow the steps below.

Create a OneSignal Account

After logging in successfully, choose to add an app, and enter an app name as you like in the popup.

Add an App

On the next screen, select “Website Push” and proceed on.

Website Push

As for the sub-platform, select Chrome here. Safari will be configured later.

Select Chrome as Platform

In the next step, there are several fields to complete.

  • Site URL – Enter your website URL. Trailing slash and sub-folders should not be included. Besides, if SSL is enabled on your site, make sure to use HTTPS instead of HTTP.
  • Google Server API Key – Enter the API key copied from Google Cloud.
  • Notification Icon URL – If you want to use a custom image for the notification icon, enter the URL of the image here. The size of the image should be 80×80 pixels.

Configure the App

OneSignal suggests all users upgrade to HTTPS for the better use of its services. But if your WordPress site doesn’t come with an SSL certificate, there is a fallback option for you to create a subdomain on OneSignal which is HTTPS enhanced. For the fallback option, you need to choose a custom subdomain and enter your Google project number.

HTTPS Fallback Option

After saving the configurations, exit the popup screen without taking the rest steps. Then, click on the “App Settings” menu in the sidebar and open the “Keys & IDs” tab. Here you will see the App ID and Rest API Key. This information is needed to set up the OneSignal plugin, so copy it.

App ID

Set up OneSignal plugin

Now that you have collected all the information needed to make the plugin work, go back to WordPress dashboard, click on the OneSignal Push menu, and open the “Configuration” tab. Fill in the Google Project Number, OneSignal App ID and Rest API Key. If you have set up a subdomain, enter it in the corresponding field, too.

Finish Plugin Configuration

As soon as these settings are saved, push notifications start working on your WordPress site. If you visit your site in Chrome or Firefox, you will see a noticeable button in the bottom right of the screen that allows visitors to subscribe to your notifications.

OneSignal Notify Button

Clicking on the button will generate a popup in which your users can allow your website to send them push notifications.

Push Notifications Subscription Popup

The notify button is enabled by default with some pre-defined settings, while you can customize the size, position, color, theme, and any text you can imagine to make it fit your website design. This can be done in the “Prompt Settings”.

Prompt Settings

Set up OneSignal for Safari Push Notifications

Since you have already created a OneSignal app for your website during the steps above, it is much easier to enable Safari push notifications now.

Firstly, log into your OneSignal account, select the app you have created, and enter the “App Settings”. Among the available platforms, find the web platforms and choose to configure Apple Safari.

Apple Safari Web Platform

In the configuration popup, you need to:

  • Enter a site name that you want your visitors to see in the subscription popup.
  • Enter your site URL (with the correct protocol and no trailing slash).
  • Optionally upload custom notification icons. Note that multiple sizes of the icons are required. The requirements are presented once you decide to upload icons.

Safari Configuration

After saving the configurations, close the popup and refresh the page. Then you will see that a “Web ID” is displayed for the Apple Safari platform.

Safari Web ID

Copy the Web ID, and then paste it in the “Safari Web ID” section under the “Configuration” tab of the OneSignal plugin.

Enter Safari Web ID in Plugin Configuration

As soon as the plugin configurations are saved, you can visit your site in Safari to see the notify button. Clicking on the button, you will get the following notification which enables people to subscribe to your push notifications.

Push Notifications Subscription Popup in Safari

Send Push Notifications upon Post Publishing

By default, the OneSignal plugin is set up to send push notifications automatically once posts are published. If you don’t want this and would like to send each push notification manually, you can disable the feature in the plugin’s notification settings.

Notification Settings

Besides the settings here, you can decide whether to create a push notification for individual posts by editing the post and checking/un-checking the “send notification” option.

Send Push Notification

Up to now, you have set up push notifications for all of Chrome, Firefox and Safari. You can create a new post immediately and test the push notifications in different web browsers.

Explore More with OneSignal

The excellence of OneSignal mainly lies in the rich features it is built with. After enabling push notifications for your blog posts, you can also do the following things to get more control over the notifications. All can be done either in the plugin configurations in WordPress dashboard or in the app settings on OneSignal website.

  • Customize all the texts in the subscription popup, including the action message, the texts for accept button and cancel button, example notification title and description, etc.
  • Use featured images as the notification icon.
  • Schedule notification messages.
  • Create message templates which track the click rates of notifications.
  • Create A/B split tests easily by sending two different notifications to random users.
  • Manage the subscribers and create different segments. Push notifications can be sent based on the user segments for better clicks and conversions.

All in all, OneSignal is a great service for making push notifications for WordPress posts. It is definitely worth a try if you want to boost your traffic with push notifications.


Joyce is a professional writer & SEOer who loves trying new things and sharing the experience through blogging. She loves clean design, playing with different WordPress themes, SEO, etc. Very often, you could find her in various WordPress event as invited speakers.