Web
Analytics
Connect with us

WordPress

How to Add Web Push Notification to Your WordPress Site?

Published

on

The internet has become advanced enough and hence the possibilities too have expanded beyond just browsing and downloading. With the advent of hundreds of new marketing strategies, today I'll be showing you How to Add Web Push Notification to Your WordPress Site?

A decade back, owning your own website seemed like a dream, only companies and firms used to do so, today? Every kid around the corner has his own. Similarly, just couple years back Push Notifications were one such luxury for website owners.

But today? With the help of so many third party pieces of codes and stuff, answers to questions like How to Add Push Notifications to WordPress site, have become as easy as couple clicks.

What are Push Notifications?

Before asking your questions like Best Way to Add Push Notifications to Your WordPress Site, I think it's fair of me to explain to you a bit what Push Notifications exactly are, right?

Have you ever subscribed to price-comparison websites? Which compare the price of certain products you're looking for from various websites and then display a little tab at either corner of your desktop, even when you aren't browsing any website?

Let me just show you:-

How-to-Add-Push-Notifications-to-WordPress-site

So yeah those are Push Notifications.

Why do You Need Push Notifications?

There are couple benefits you'll be getting with Push Notifications, and so it's fast taking over the traditional marketing methods.

1. Push Notifications don't need you to be browsing the Internet. They can be delivered to you directly on your Desktop /Laptop Homescreens.

2. They can also be delivered to you if you're browsing something else, watching a movie, or anything else.

3. They don't need the user to do anything! Like with E-mail marketing the user needs to open his Email account, and then from the thousands of mails, needs to click on your mail to get the information, well with Push Notifications it's not so.

4. The combination of Text+Image kind of makes the notifications clickable.  If the content is good and the image you've used is lucrative enough, you're bound to get yourselves some clicks.

5. They can also be displayed on Mobile Devices!

6. A recent survey declared that Push Notifications have 51% more Open rates compared to the traditional SMS, Internet and Email methods.

How to Add Web Push Notification to Your WordPress Site:-

In order to Add Web Push Notifications to WordPress, you'd be needing a plugin (the god-solution to all WordPress Problems isn't it?)

So Go to your WordPress Dashboard, and click on Plugins>Add new

How-to-Add-Push-Notifications-to-WordPress-site

And search for OneSignal and install it.

How-to-Add-Push-Notifications-to-WordPress-site

Once you've Installed the plugin, just click on the “OneSignal” tab on the left sidebar and you'd be taken to the plugin's page.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Once you're on this page, you'd need couple API's and Key's, which I'll show in detail how to create. (Worry not it's no rocket science!)

So okay now you should head over to Add Google Services Page.

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

Basically just Name your project, and in the second box, give your android package a name. Don't worry the service won't be using any kind of android package, it's just a requirement for advanced users who might have different needs than us, but for us, we just need a name nothing else.

And then click on Choose and Configure Services.

The next screen would look something like this.

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

As you can see, there are three options out there,and you'd want to click on the “+” button that's on top of the “cloud messaging” option.

And then Click on Enable Google cloud Messaging option.

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

Then you'd be provided with your Server API Key and Sender ID,copy the sender ID and go to your OneSignal plugin's “configuration” tab and paste it there under “Google Project Number” tab

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

Step #2:- How To Make Your Blog Push Notification Ready in Easy Steps:-

So by now I gather you've your Sender ID (which is pasted in your plugin's configurations tab!) and your Server API key (which we will use later), right?

Now move on to OneSignal's Official Website, and create a free account over there.

Once you're logged in to your Free account on OneSignal, you should click on the Add a new app Tab.

How-to-Add-Web-Push-Notification-to-Your-WordPress-Site

A popup would come up asking you for a name, enter just about any name there and you're good to proceed.

 Best-Way-to-Add-Push-Notifications-to-Your-Wordpress-Site

On the next screen, you would want to select Google Chrome and Mozilla Firefox as the platforms.

 Best-Way-to-Add-Push-Notifications-to-Your-Wordpress-Site

And then just click on Configure. Once you do so, another popup would come up which would look something like this.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-asteps

Now here's the tricky part. You can enter your URL in the URL box, and then the URL of the image you want to display with the notifications in the Default Notifications Icon URL.

Now you see the option that says “My site is not fully HTTPS”, right? And I'm considering majority of you reading this piece don't have SSL on their websites.

The bad news is that Google Chrome doesn't support Non-SSL sites, or plain HTTP sites for push notifications. Worry not that problem is solved as OneSignal will give you one of their own subdomains with the SSL certificates for this purpose.

So if you do not have SSL, just click that box, and then enter the subdomain you'd want to use, and click on save.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Done! Now for the last part!

You just need to get your OneSignal Keys, and for that, click on App Settings > Keys and ID's.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Now for the final part, just copy-paste both of these keys and paste them in your WordPress OneSignal Plugin's configurations tab.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Final Step:-

Now just login to your OneSignal account once again, and you'd see this box. You should click on the “select SDK” option.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

Now select “WordPress” from the SDKs.

Best-Way-to-Add-Push-Notifications-to-Your-Wordpress-Site

Finally just click on “Test Notifications” to test if your notifications are working which they should.

How-To-Make-Your-Blog-Push-Notification-Ready-in-easy-steps

 

You would get your notifications preview meaning you successfully setup Push Notifications for your WordPress site.

Final Words:-

So that was all I had on How to Add Web Push Notification to Your WordPress Site folks. I made sure to use as many images and illustrations as possible.

So I doubt any step would still be confusing you, right? But if you're not getting something right, make use of the commentbox and I'm here to your aid.

Also, if this piece helped you, I wouldn't mind if you hit the share buttons.

Evan Derek is the Founder and Chief SEO Analyst @ VebbLabbs. Specialising in Affiliate Marketing and helping newcomers to make it a stable profession in the online world, he boasts 6+ years of experience in the industry. 19 year has he spent on this planet successfully, and plans on spending atleast 50more !

Continue Reading
1 Comment

1 Comment

  1. Evan Derek

    November 4, 2016 at 1:06 pm

    Well being honest, we are trying a more professional approach rather than popping up on desktops with our next articles. If we’re good, you guys will come back to us and leave feedback like this anyway, thanks for that. 🙂
    And I believe these notifications are real help for companies with more than just “articles”, like maybe price-comparison things or new releases and stuff. Afterall not many people appreciate desktop notifications about random topics, do they? Although I’m happy you show a positive vibe for this 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Security

How to Password Protect WordPress Admin Directory

Published

on

How to Password Protect WordPress Admin Directory

Recently, I have written a tutorial on “How to install WordPress using Fantastico”. Now, I hope that you all know how to install WordPress. After installing WordPress, now it's the time when we have to think about security.

And how to protect our blog from malicious attacks and deface attacks. WordPress does not provide security automatically, we have to take some measures to prevent our blog/website from being Hacked.

So, today we are traversing towards the first step of security by showing a tutorial on “How to Password Protect WordPress Admin Directory“. WordPress Admin Directory is nothing but a “wp-admin”, which enables you to login into WordPress.

By protecting this directory you will cover an extra layer of authentication for security purposes. So, in this article, we will show you a Step by Step guide on “How to Password Protect WordPress Admin directory“.

Step by Step Guide on:

How to Password Protect WordPress Admin Directory

Step 1:

Login to your cPanel. Scroll down the screen and find a section that includes a title as “Security” and in that section, you will find an icon named “Password Protect Directories“.

Step 2:

Click on that icon and then the screen will be appear asking for directory location. Now, click on the web root and then navigate to the folder where your WordPress is hosted. Then click on the /wp-admin/ folder. You will see a screen similar to the below image:

Step 3:

Afterward, in that open screen you have to simply check the box to Password Protect WordPress Admin Directory and in “Name of the protected directory” – you can put the desired name of your choice and no need to remember that name.

Step 4:

Then, in that open screen only you have to fill “username & password” and you have to remember it. Hurray! You have enabled Password Protect WordPress Admin Directory.

Step 5:

Now, When you try to login in WordPress or when you try to access your wp-admin directory, then you will see an Authentication Required box, shown in the figure below:

To Fix Too many redirects loop error

Sometimes it may happen that after you have the Password Protect WordPress Admin Directory when you try to login into WordPress account then it will show “404 Error or Too many redirects loop error“.

To fix this issue, open your main WordPress .htaccess file (cPanel > File Manager) and add the following code there before the WordPress rules start.

ErrorDocument 401 default

And your problem will be solved, now try to login to the WordPress account.

I hope you have understood and now you can Password Protect WordPress Admin Directory.

If you have any problem then don't hesitate, just put your problem-related comment via below comment form and we will surely help you resolve your problem.

Continue Reading

Tutorials

How to Install WordPress Using Fantastico

Published

on

How to install Wordpress using Fantastico

New to WordPress? Don’t you know how to install WordPress? Then No Problem at all! You’re at the right place because today I will show a tutorial on “How to install WordPress using Fantastico”.

Yeah! I know Fantastico is a new word for you, so first let’s understand that word. Fantastico – a tool which installs WordPress for your blog/website or its also called “One-Click Installation Tool”.

Nowadays most of all Hosting Provider provides Fantastico for fast installing of WordPress. Its very simple to install WordPress using Fantastico, just you have to enter some information regarding your blog and click on install WordPress.

Within a minute you will get your installation finished and you are ready with your blog. Now, let’s get on the topic: How to install WordPress using Fantastico, below is the step by step guide on this.

How to install WordPress using Fantastico

Step by Step guide:

Step 1:

Login into cPanel with username and password provided by your Hosting Provider at the time buying Hosting. After login, you will see a screen similar to the below image that will be displayed on your computer.

Step 2:

Scroll down the screen and find a section which includes the title as “Software/Services” and in that, you will find a blue smiley icon named as “Fantastico De Luxe

Step 3:

Click on the “Fantastico De Luxe” and you will see a screen similar to the below image on your computer display.

Step 4:

From the appeared screen, see the left panel consisting of many options from that you have to select “WordPress” to start the installation process.

Step 5:

Click on “New installation” from the WordPress Installation Screen. As you click it will display the form as shown in the below image.

Step 6:

Now you have to fill data as per below instruction:

Install in a domain – should always include your domain.

Install in a directory – must leave blank.

Admin access data – enter username and password that you have to remember because you will need to login into your blog. If you can’t remember than better to store it.

Admin access data – put your name instead of the nickname because it will be displayed as the author of any posts that you post on your blog.

Admin e-mail – email linked to the blog, so you can receive a notification like comments, etc.

Site name – the name of the blog.

Description – put a tagline for the blog.

Now, when you have filled all the information correctly then click on the “Install WordPress” button. It will take hardly 1-2 minutes to install and when the installation is being completed you will see a screen similar to the below image.

Step 7:

Yuppie! You have successfully installed WordPress and at last, it will suggest you put your email to send login details. So, that you can refer to it later.

I hope you have understood well and now you can install WordPress using Fantastico. If you face any problem regarding installing using Fantastico then put your comments below via comment form so that we will surely help you!

Continue Reading

Tutorials

How to Display Related Posts in WordPress without Plugin

Published

on

How to Display Related Posts in WordPress witnout Plugin

Owning a blog or a website is not a great thing, but to manage the consistency of the blog or a website that's a hard task. We all (blogger) familiar about the word – “Bounce Rate”, and this word has great importance in our blogging life. 

Bounce rate essentially represents the percentage of initial visitors to a site who jumps away to a different site, rather than continue on to other pages within the same site. If you have a high bounce rate that means your website isn't impressive enough to explore it more.

There are many reasons why visitors leave your website without exploring it further such as “Broken navigation links”,  “Irrelevant content”, “Popups” and much more. And this problem will be not solved ASAP then the no. of visitors will decrease.

Our revenue totally depends upon the visitors (exceptions are always there), so to decrease the bounce rate of our blog/website and to increase no. of visitors and revenue you can Display Related Posts in WordPress.

Read: How to Install WordPress Using Fantastico

There are many plugins out which helps you to “Display Related Posts in WordPress“, but every time it's not necessary to use the plugin. Plugin consumes space in your WordPress database.

It also increases the loading time of your website. That's why today in this article I will show you “How to Display Related Posts in WordPress without Plugin”.

Display Related Posts in WordPress without Plugin

<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo ‘Related Posts';
$first_tag = $tags[0]->term_id;
$args=array(
‘tag__in' => array($first_tag),
‘post__not_in' => array($post->ID),
‘posts_per_page'=>5,
‘caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a>

<?php
endwhile;
}
wp_reset_query();
}
?>

Paste the above code in single.php where you want to Display Related Posts in WordPress. This is the easiest way to Display Related Posts in WordPress without Plugin.

If you face any problem in finding the single.php file or in placing the code then you can surely contact us via comments below.

Continue Reading

Tips

How to Display Recent Posts in WordPress

Published

on

How to Display Recent Posts in WordPress

If you want that reader must stay up to maximum time on your website/blog then provide content as per their choice.

Earlier, to decrease the “bounce rate” of the blog I have written an article on “How to Display Related Posts in WordPress without Plugin” and now if the reader wants some fresh & recent articles then Display Recent Posts in WordPress.

Mostly, we Display Recent Posts in WordPress on the sidebar but there are other users who also want some change. In this article, we will show you the different ways to Display Recent Posts in WordPress.

Display Recent Posts in list format:

We know, the list format is mostly used in sidebars so if you want to display Recent Posts in a sidebar then put the following code in a template file (sidebar.php):

', ''); ?>

I have put the default no. posts at 10, if you want some less or more posts to display then change according to your requirement.

Display Recent Posts with Summary:

To give a small overview of the post to the reader, some people display Recent Posts with a title and a short description. For them, I have found two ways to display Recent Posts.

The First Way:

  • have_posts()) : $the_query -> the_post(); ?>
  • ”>
 

If you put the above code in a template file (sidebar.php) then you have to specify a short description of the post. So, you have to rewrite the excerpt as per the word limit.

So, here is the second way to display Recent Posts in WordPress. First, you have to download this Limit Post plugin and activate it. Once the plugin is activated then paste the following code in your theme files where you want to display Recent Posts.

  • have_posts()) : $the_query -> the_post(); ?>
  • ”>
 

Here I have put the description limit as 250 you can change according to your blog.

Display Recent Posts with Full Content:

If you want to display Recent Posts with Full Content then place the following code in your theme files:

  • have_posts()) : $the_query -> the_post(); ?>
  • ”>
 

Here also you can change the no. of posts.

I hope now you can Display Recent Posts in WordPress blog easily. If you face any difficulty in placing code then connect with via the comments section below.

Continue Reading

Tips

How To Use Google Advanced Image Search For Finding Royalty FREE Images

Published

on

Let us start with a simple question, what's the most common way that you use to find images? Most of the people just Google about the topic, save the images that they like and use them for their purpose.

Many people even put their own watermarks on the images they found on Google, well all these things are actually wrong you may have to pay a fine of almost 1000$ per image.

You never know that the image you downloaded from Google is copyrighted or not. Personally speaking, many of my fellow blogger friends have already faced an issue because of using copyrighted images.

Sometimes you may even have to shut your blog down.

You must be thinking that the best way is to generate the images yourself. Well, this is not the only solution, no doubt this is one of the best ways. I

n this article, I will be showing you How To Use Google Advanced Image Search For Finding Royalty FREE Images.

You must be wondering what do I exactly mean by Royalty free images, these are some images which are not acclaimed/copyrighted by any online firm or blog.

It means you guys can use these images in any way you want, no one will charge you even if you put on your own watermark on these images.

These images also prove to be pretty handy to the people who design flyers/posters for different firms and educational agencies.

So without any further delay lets get down to the main topic, below are given the steps using which you will easily be able to find some useful and royalty free images.

Follow the steps as listed below:-

  1. Google whichever topic that you want to search the image on and select the images tab.
  2. Now all the right you will see a gear icon, all you need to do is just click on that gear icon and go to advanced search.
  3. Now once you click on Advanced search, it will open up a completely new window in the same tab, here you will see a lot many setting, all you need to do is just simply scroll down to Usage Rights once you click on that it will open up a drop-down menu, from this drop-down menu select “Free to use and share even commercially “.
  4. Now once you have done this, without playing around with the other options, just go ahead and click on advanced search button which will be on the right side in blue colour.
  5. Once you click on the button it will take you back to the image window in the same tab, but this time all the images you see up there are completely royalty free and meant to be used in any way that you want to.
  6. So all good to go? you will now also get some additional features, for eg:- when you click on Labeled for reuse you will get several options and you select the one you feel the most suitable to you.

Hope this article helped you out, Keep stalking for more tricks 🙂

Continue Reading

Trending