Tag - Site

Ultimate Guide to Creating a WordPress Membership Site

Do you want to build a membership website? For a long time, website owners relied solely on advertising and affiliate revenue to monetize their content.

A membership website allows you to make money online by allowing users to pay for premium content, features, and access to the community.

You will need a platform that has features for managing users, memberships, payments, etc. Luckily, there are some really great membership plugins for WordPress that make it super easy.

In this step by step guide, we will show you how to easily create a WordPress membership site without any coding knowledge.

Creating a WordPress membership website

What Do You Need to Start a WordPress Membership Website?

Unlike 10 years ago, it’s quite easy to make a website these days. Out of all the platforms and website builders, WordPress makes it the easiest for anyone to build their own membership website and start selling with little to no technical skills.

You’ll need the following three things to start:

  1. A domain name. This will be your website’s address (Example, wpbeginner.com).
  2. A web hosting account. This is where your website files are stored.
  3. A membership addon (It will convert your regular website into a membership platform).

You can set up a fully functional membership website with WordPress in less than 30 minutes, and we’ll walk you through every step of the process.

Below are the steps that we will cover to help you make a powerful membership website with WordPress.

  1. Getting started with a membership site
  2. Choosing a WordPress membership plugin
  3. Setting up your membership website
  4. Adding payment methods
  5. Adding membership levels
  6. Restricting access based on membership plans
  7. Creating members only content
  8. Creating a pricing page
  9. Adding sign up and login forms
  10. Customizing email templates
  11. Viewing reports to grow your website
  12. Extending your membership website

Ready? Let’s get started.

Step 1. Getting Started with a WordPress Membership Site

To create a membership site, you must make sure that you are using the right WordPress platform. Yes, there are two types of WordPress.

We recommend using the self-hosted WordPress.org version because it gives you unrestricted access to all features and tools that you need (see the full comparison of WordPress.com vs WordPress.org).

For a self hosted WordPress site, you’ll need a WordPress hosting account, domain name, and a SSL certificate.

Typically, a domain name costs around $14.99 / year, web hosting around $7.99 / month, and SSL certificate costs around $69.99 / year.

If you are just starting out, then these startup costs can add up quickly.

Thankfully, we have a way to fix that.

Bluehost, an official WordPress recommended hosting provider, has agreed to offer our users a free domain name, free SSL certificate, and a discount on web hosting.

Basically, you can get all of the above for $2.75 per month.

→ Click here to Claim this Exclusive Bluehost offer ←

Note: At WPBeginner we believe in full transparency. If you sign up with Bluehost using our referral link, then we will earn a small commission at no extra cost to you (in fact, you will save money and get a free domain + SSL certificate). We would get this commission for recommending just about any WordPress hosting service, but we only recommend products that we use personally and believe will add value to our readers.

Once you have signed up for hosting, the next step is to install WordPress. Follow the instructions in our step by step guide on how to start a WordPress blog, and you’ll be up and running in no time.

Since Bluehost already comes with WordPress pre-installed, you can move on to setting up your WordPress membership site.

Step 2. Choosing a WordPress Membership Plugin

There are plenty of free and paid WordPress membership plugins that you can use. However, each one of them has its own pros and cons. We have a full comparison of the best WordPress membership plugins.

To choose the right WordPress membership plugin, you need to decide what kind of membership website do you want to build and what features will you need?

If you just want to allow user registration on your WordPress site, then you can use WPForms. It is a WordPress form builder plugin that allows you to easily create user login and registration forms. You can even allow users to submit articles without accessing the WordPress admin area.

On the other hand, if you want to sell subscriptions, paid content, or digital downloads, then you’ll need a more robust WordPress membership plugin, like MemberPress.

MemberPress comes with advanced membership features that allow you to accept payments, create membership levels, restrict access based on levels, and more.

Selling online courses can be another possible scenario. In this case, you’ll need LearnDash, a complete WordPress LMS plugin with all the learning management features.

You can also integrate LearnDash into MemberPress to create a powerful website with online courses as well as membership subscriptions.

That being said, let’s start setting up your WordPress membership website.

Step 3. Setting up Your WordPress Membership Website

We are choosing MemberPress as our go-to plugin because it has all the features we mentioned above, and it works perfectly with third-party plugins necessary for the growth of your business.

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

Upon activation, you need to visit the MemberPress » Options page to configure the plugin settings.

MemberPress options page

Step 4. Add a Payment Method

The options page is divided into different tabs. The first thing you need to set up is a payment gateway because it allows you to accept payments on your membership site.

You can do this by switching to the ‘Payments’ tab and then selecting your payment gateway.

MemberPress payments

MemberPress supports PayPal (Standard, Express, and Pro), Stripe, and Authorize.net out of the box. You need to select the payment method you want to setup and provide the required credentials.

You can also add multiple payment methods by clicking on the add button to add another payment method.

We typically use two options: Stripe for credit cards and PayPal as a secondary option because some users prefer PayPal over giving out credit card details.

Don’t forget to click on the ‘Update Options’ button at the bottom of the page to save your settings.

Step 5. Creating Membership Levels

The next step is to create membership levels that your users can purchase. Each membership level can have different pricing plans, perks, and access. You can even have a free membership plan.

To create a membership level, you need to go to MemberPress » Memberships page and click on the ‘Add New’ button at the top.

Add membership level

On the next page, enter a title for this particular membership plan and then provide the plan details in the post editor.

You will need to set the pricing and expiration for this plan under the membership terms section.

Membership plan

In the example above, we have created a yearly membership plan.

After that, you need to scroll down to the membership options meta box below the post editor. This is where you can customize permissions and membership options for this particular plan.

Membership options

Once you are satisfied with the membership plan, you can click on the publish button to make it available.

Go ahead and repeat this process to create as many membership plans that you need.

Step 6. Restrict Access for Membership Plans

The next step is to select which content would be available to different membership plans on your website. MemberPress makes it very easy to control access using ‘Rules’.

You can setup rules by visiting the MemberPress » Rules page and clicking on the Add New button at the top.

Add new rules

The rule edit page allows you to select different conditions and associate them to a membership plan.

For example, you can select all content that matches a particular tag or category to be available only to members with the silver subscription plan.

Add a rules set to MemberPress

You can also create more specific rules. For example, a single post or page, child pages, or a specific URL.

Below the rules editor, you’ll see the content drip and expiration options.

Drip content allows you to gradually release content to users instead of giving it all away at once. The expiration option makes the content unavailable after a defined period of time.

If you are not sure, then you should leave them unchecked.

Once you are satisfied, go ahead and click on the ‘Save Rule’ button to save your rule settings.

Repeat the process to create more rules as needed for your membership site.

Step 7. Adding Members Only Content

MemberPress makes it super easy to create members-only content using Rules.

In the above example, we created a rule that restricted all content tagged as paid to be restricted. Now all we need to do is to create our paid content and add the paid tag to it.

Adding members only content

MemberPress also adds ‘MemberPress Unauthorized Access’ metabox below the post editor. This allows you to select what logged out users (non-members) will see when they reach this content.

Restricted content options

You can use the global default settings, or you can show excerpts, login form, or a custom message.

Once you have added members-only content, you can go ahead and publish it. As the page reloads, you will see a success message that this content is protected.

Protected content

Step 8. Create a Pricing Page

This is the page your users will see when they want to sign up for a membership plan. On this page, users will be able to select a membership plan and then move to the payment page.

Users who try to access the restricted or paid areas of your website will also be redirected to this page.

You can configure this by going to MemberPress » Groups page and clicking on the Add New button at the top.

Creating a group

First, enter a title for the group plan page. This will also be the title for the plans page that users will see.

Next, go down to ‘Group options’ metabox and add memberships that you want to display on the page.

Pricing group options

You can also select a theme for the pricing table. MemberPress comes with few ready-made templates for that.

Once satisfied, click on the ‘Publish’ button to make your plan publicly visible.

To preview your pricing page, click on the ‘View Group’ link after publishing it.

Pricing page

Redirect users to pricing page

Now that we have the pricing page ready, the next step is to redirect unauthorized users to the pricing page.

To do that, first you need to visit MemberPress » Groups page and copy the URL next to the group you created in the previous step.

Pricing page URL

After that, go to MemberPress » Options page and scroll down to the ‘Unauthorized Access’ section.

You need to check the box next to ‘Redirect unauthorized visitors to a specific URL’ option and then paste the group URL you copied earlier.

Redirect unauthorized users to pricing page

Click on the ‘Update Options’ button to save your settings.

Now unauthorized users will be redirected to the pricing plans page when they try to access a members only area.

Step 9. Add Sign up and User Login Forms

Now that you have everything set up, it is time to allow your users to easily find their way around your website.

First, you need to add a user login form so that members can sign in to their accounts.

Go to Appearance » Widgets and add ‘MemberPress login’ widget to a sidebar.

MemberPress login widget

Next, we will be adding the pricing page link to the navigation menu, so that new users can select a plan and register.

You can do this by visiting the Appearance » Menus page in your WordPress admin. From the left column, you need to click on the Groups tab to expand it. It will show the pricing plan group you created earlier.

Add pricing plans to the menu

Check the box next to your pricing page and then click on the ‘Add to menu’ button.

The pricing plan page will now appear in the right column. You can drag and drop to rearrange its position in the menu. You can also edit it and change the link text.

Edit menu item

Don’t forget to click on the save menu button to store your changes.

You can now log out of the WordPress admin area and visit your website to see everything in action.

Membership website preview

Step 10. Customizing Membership Email Templates

Your WordPress membership plugin will send several email notifications to members. MemberPress allows you to easily edit those emails and make changes to include your own branding.

Simply go to MemberPress » Options page and click on the ‘Emails’ tab. From here you can manage email notifications sent by MemberPress.

Editing email notifications in MemberPress

You will see all the email notifications sent by MemberPress to members as well as Administrators. You can click on the edit button to customize any of these notices.

Edit email notices

You can use a simple text editor to edit the email message with basic formatting options and smart tags to insert dynamic items like names, username, membership level, and more.

Make sure that you click on ‘Send Test’ button to send yourself a couple of test notifications. This will ensure that MemberPress can send email notifications.

If you are having trouble receiving email notifications, then see our guide on how to fix WordPress not sending email issue.

Step 11. Viewing Reports to Grow your Membership Website

To grow any business, you need data to make informed decisions. MemberPress comes with built-in reports to see how your membership website is doing.

Simply go to the MemberPress » Reports page. From here, you can sort reports by monthly, yearly, or all time data.

MemberPress reports

It will show you number of active, inactive, free, paid, and total members. It will also show you average member lifetime value and other data. You can scroll below to see more charts and click on a date to view transactions.

However, the most important metric of judging a membership website’s success is user engagement.

This is where you’ll need Google Analytics. It allows you to see where your users are coming from and what they do when they are on your website.

MonsterInsights, the most popular Google Analytics plugin for WordPress, offers a complete MemberPress integration that makes it easy to enable Enhanced Ecommerce Tracking for MemberPress.

For detailed instructions, see our guide on how to track user engagement using Google Analytics in WordPress.

Taking Your Membership Website to The Next Level

MemberPress is a powerful WordPress membership plugin. It allows you to easily grow your membership website.

It works beautifully with LearnDash, which allows you to easily create courses and leave the selling part to MemberPress.

You can also use it alongside BuddyPress and bbPress.

Here are some other useful resources to help you grow your WordPress membership site.

That’s all, we hope this article helped you setup your WordPress membership website. You may also want to see our step by step WordPress SEO guide for beginners.

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 Ultimate Guide to Creating a WordPress Membership Site appeared first on WPBeginner.

Source link


How to Move WordPress From Local Server to Live Site (2 Methods)

One way to speed up your website development is to build your website locally on your own computer using a software like WAMP (for Windows) or MAMP (for Mac).

Once you’re finished perfecting your website, the next step is to move it from your computer to a live site and share your creation with the world. In this article, we will show you how to easily move WordPress from local server to a live site.

Move WordPress From Local Server to Live Site

We will cover two different methods to move WordPress from local server to your live website (step by step).

The first method uses a WordPress migration plugin and is recommended for beginners. In the second method, we will show you how to manually move WordPress from local server to a live site.

You can choose the method that best suits you:

Before You Begin

In order for you to migrate WordPress from localhost to live server, you need to have a few things in place.

First, we’re assuming that you have a WordPress site running on local server (also called localhost) on your computer, and you have full access to it.

Next, you’ll need to have a domain name and web hosting. We have a list of the best WordPress hosting companies that you can choose from.

To speed it up, you can use Bluehost. They’re an official WordPress recommended hosting provider, and they are offering our users an exclusive 60% off discount + a free domain.

If you need help setting up your website, follow our step by step guide on how to make a website.

Finally, you will need to have a FTP program and know how to use FTP, so you can upload your content to the live site.

Ready? Let’s begin migrating your WordPress site.

Method 1. Transfer WordPress from Local Server to Live Site Using a Migration Plugin

This method is easier and recommended for beginners. We’ll be using a WordPress migration plugin to move WordPress from localhost to a live site.

Step 1. Install and Setup Duplicator Plugin

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

Upon activation, you need to go to Duplicator » Packages page and click on the ‘Create New’ button.

Creating a new Duplicator package

After that, click on the next button to continue.

Duplicator will now run some tests to see if everything is in order. If all items are marked ‘Good’ then click on the ‘Build’ button.

Build package

This process may take a few minutes depending on the size of your website. You need to leave this tab open until the process is complete.

Once finished, you’ll see download options for Installer and the Archive package. You need to click on the ‘One click download’ link to download both files to your computer.

Download package

So what are these files?

Well, the archive file is a copy of your complete WordPress website. It includes all WordPress core files as well as your images, uploads, themes, plugins, and a backup of your WordPress database.

The installer file is a script that will automate the migration by unpacking the archive file.

Step 2. Create a Database for Your Live Site

Before you can run the installer or upload the WordPress website from localhost to your hosting server, you will need to create a MySQL database for your live website.

If you have already created a MySQL database, then you can skip this step.

To create a database you need to visit your hosting account’s cPanel dashboard. Scroll down to the Databases section and then click on the MySQL Databases icon.

Database icon in cPanel

On the next screen, you’ll see a field to create a new database. Simply provide a name for your database and click on the ‘Create Database’ button.

Create new database

cPanel will now create a new database for you. After that, you need to scroll down to the MySQL Users section.

Next, provide a username and password for your new user and click on the ‘Create a user’ button.

Add a MySQL user

The new user you just created, still does not have permission to work on the database. Let’s change that.

Scroll down to the ‘Add User to Database’ section. Simply select the database user you created from the dropdown menu next to the ‘User’ field, then select the database, and click on the add button.

Save user to the database

Your database is now ready to be used with your WordPress site. Make sure to note down the database name, username, and password. You’ll need this information in the next step.

Step 3. Upload Files from Local Server to Live Site

Now you need to upload the archive and installer files from your local site to your hosting account.

First, connect to your live site using an FTP client. Once connected, make sure that the root directory of your website is completely empty.

Normally, root directory is the /home/public_html/ folder.

Some WordPress hosting companies automatically install WordPress when you sign up. If you have WordPress files there, then you need to delete them.

After that, you can upload the archive and installer files from Duplicator to your empty root directory.

Migration files in the root directory

Step 4. Runing The Migration Script

After you have uploaded the migration files, you need to visit the following URL in your browser:


Don’t forget to replace example.com with your own domain name.

This will launch the Duplicator migration wizard.

Duplicator intialized

The installer will automatically scan for the archive file and run a validation test. You need to check the terms & conditions checkbox and continue by clicking on the Next button.

On the next screen, it will ask you to enter your WordPress database information.

Your host will likely be localhost. After that, you will enter the details of the database you created in the earlier step.

Connect your database

Click on the next button to continue.

Duplicator will now import your WordPress database backup from the archive into your new database.

Next, it will ask you to update site URL or Path. You shouldn’t have to change anything since it automatically detects the URL of your live website, and its path.

Update site URL

Click on the next button to continue.

Duplicator will now finish the migration and will show you a success screen. You can now click on the ‘Admin Login’ button to enter the WordPress admin area of your live site.

Successfully moved

Once you login to your live site, Duplicator will automatically clean up the installation files.

That’s all, you have successfully moved WordPress from local server to your live site.

Method 2. Manually Transfer WordPress from Local Server to Live Site

In this method, we will show you how to manually move WordPress from local server to your live site. It will come in handy if the first method doesn’t work or you prefer to do it manually.

Step 1: Export Local WordPress Database

The first thing you need to do is export your local WordPress database. We’ll be using phpMyAdmin to do that. If you are unfamiliar with it, then you might want to take a look at our guide to WordPress database management using phpMyAdmin.

Simply go to http://localhost/phpmyadmin/ and click on your WordPress database. Next, click on the Export button from the top menu bar.

Export from localhost

In the Export Method option, you can choose “Quick” or “Custom”. Custom will provide you with more options to export your database.

We recommend choosing Quick, and then click the Go button to download your database.

Export WordPress database using phpMyAdmin

Step 2: Upload WordPress Files to Live Site

Now we’ll need to move all your website files to the live site.

To get started, go ahead and open your FTP client and connect to your web hosting account.

Once you’re connected to your live site, make sure you upload the files in the right directory. For example, if you want the site to be hosted on yoursite.com, then you would want to upload all the files in your public_html directory.

Now select your local WordPress files and upload them to your live server.

Uploading WordPress from localhost to live site

Step 3: Create MySQL Database on Live Site

While your FTP client is uploading your WordPress files, you can start importing your database to the live server. Most WordPress hosting providers offer cPanel to manage your hosting account, so we’ll show you how to create a database using cPanel.

First, you need to log in to your cPanel dashboard and click on the MySQL Databases icon which can be found in the databases section.

Database section in cpanel

On the next screen, create a database by entering a name for your database and clicking the Create Database button.

New database

After creating your database, scroll down to the MySQL Users section and create or add an existing user to the database.

After adding the user, cPanel will take you to set MySQL privileges for that user. Simply grant all privileges to the user by making sure every box is checked, and then click the Make Changes button.

grant all privileges to database user

Step 4: Import WordPress Database on Live Site

The next step in the process is to import your WordPress database.

Go to your cPanel dashboard, scroll down to the databases section and click on phpMyAdmin.

This will take you to phpMyAdmin where you want to click on the database you created in Step 3. PhpMyAdmin will show your new database with no tables.

Click on the Import tab in the top menu. On the import page, click on Choose File button and then select the database file you saved in Step 1.

Lastly, press the Go button at the bottom of the page. PhpMyadmin will now import your WordPress database.

Import database via phpMyAdmin

Step 5: Change the Site URL

Now you need to change the site URL in your database, so that it will connect with your live WordPress site.

In phpMyAdmin, look for the wp_options table in your database that we just imported in step 4. If you changed your database prefix, then instead of wp_options it might be prefix_options.

Click on the Browse button next to wp_options or the link that you see in the sidebar to open the page with a list of fields within the wp_options table. See screenshot below:

Browse the wp options table

Under the field options_name, you need to look for siteurl. Click the Edit Field icon which can be found at the far left at the beginning of the row.

Edit siteurl in phpMyAdmin

When you click the edit field, an edit field window will appear. In the input box for option_value, you will see the URL of your local install probably something like: http://localhost/test. Carefully insert your new site url in this field, for example: https://www.wpbeginner.com

Save the field by clicking the Go button.

edit the siteurl field

Next, you need to replicate this step for the option name: home. The wp_options page can be a few pages long, so simply find the home tab.

Usually it is on the second page which you can navigate to by clicking on the pagination arrows in phpMyAdmin.

Update the home url to be the same as your siteurl.

Step 6: Setup Your Live Site

Now that we have imported the database and all of our content should be uploaded, it’s time to configure WordPress.

At this time, your site should be showing an Error Establishing Database Connection error.

To fix this, connect to your website using an FTP client and edit wp-config.php file.

You will need to provide the database name, user and password you created earlier in Step 3.

Next, save the wp-config.php file and upload it back to your server.

You can now visit your website, and it should be live now.

Next, you need to login to your WordPress admin panel and go to Settings » General. Without changing anything, scroll to the bottom and click the Save Changes button.

This will ensure that the site URL is corrected anywhere else that it needs to be.

After that go to Settings » Permalink and click Save Changes to ensure that all post links are working fine.

Step 7: Fix Images and Broken Links by Updating Paths

Whenever you are moving a WordPress site from one domain to another, or from local server to a live site, you’ll face broken links and missing images.

You can either use the SQL query or use the Velvet Blues WordPress plugin.

For those who want to do it via SQL, here is a simple SQL query that should solve this problem:

UPDATE wp_posts SET post_content = REPLACE(post_content, 'localhost/test/', 'www.yourlivesite.com/');

Simply go to phpMyAdmin, click on your database and then click on SQL from top menu. Write this query, but don’t forget to change it with your own local site and live site URLs.

Fixing WordPress images and broken URLs after moving to live site

That’s all, you have successfully migrated WordPress from localserver to a live site!

Hopefully now your live website is up and running smoothly. Be sure to check out your website to make sure that everything is working as expected. If you notice any errors, you can check out our guide to common WordPress errors for help troubleshooting.

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.

Source link


How to Test Your Site for Updating to Gutenberg (WordPress 5.0)

Are you excited to use the new WordPress Gutenberg editor? Officially launched with WordPress 5.0, Gutenberg is the new default content editor for WordPress that allows you create visually stunning content using blocks.

The challenge is that some themes and plugins may not properly support Gutenberg, so updating your website can cause unexpected issues.

In this article, we’ll show you how to test your WordPress site for updating to Gutenberg and WordPress 5.0.

Testing your site for update to Gutenberg and WordPress 5.0

Why Test Your WordPress Site Before Updating to Gutenberg?

WordPress 5.0 brings a totally new way of creating content with a brand new editor called The Block Editor or Gutenberg. It uses blocks which are content elements that you can move around the editor.

New WordPress Block Editor also known as Gutenberg

WordPress 5.0 with Gutenberg editor is indeed a revolutionary improvement to the WordPress platform.

However due to this massive change, some users are reluctant to update their sites right away, fearing that something would not work, or it may break their website.

Gutenberg was developed over a long period with enough time for theme and plugin developers to make their products Gutenberg compatible. All top WordPress plugins are already fully compatible with Gutenberg and most themes would work without a hiccup.

However, to avoid any conflicts you may want to test your site with Gutenberg and WordPress 5.0. This would allow you to find if any of your plugins or theme are incompatible. You can also catch unexpected errors and fix them before updating your live site.

That being said, now let’s go ahead and check how to test your website for updating to Gutenberg or WordPress 5.0 step-by-step.

Step 1: Create a Complete Backup of Your Website

You must always create a complete back of your WordPress website before any major update. Backups protect you against any unfortunate damage that can happen during the update process.

Keeping regular website backups is important even if you aren’t updating your site because they can save you in catastrophic situations like malware attack, hacking, etc.

There are plenty of WordPress backup plugins that you can choose from. We recommend using UpdraftPlus because it allows you to setup automatic backups and store them on a remote location.

Step 2: Test Your Site on Local Server or Staging Site

After you’ve created a complete backup of your website, you are now ready to test your website with WordPress 5.0 and the new Gutenberg editor.

There are two common methods to test new updates without actually affecting your live site.

  1. Test your website on a local server installed on your computer
  2. Test your website on a staging server

Both options allow you to test WordPress 5.0 with the new Gutenberg editor with your existing content, plugin, and themes.

1. Test Your Website on Local Server

Using a local server simply means installing your WordPress site on your personal computer with a software like WAMP or MAMP (for Mac).

In this method, you’ll first move a copy of your live WordPress site to local server using a migration plugin like Duplicator.

Duplicator WordPress plugin

Then on the local site, you can update to WordPress 5.0 and test out all your plugins / themes for compatibility with the new editor.

You can also make changes on the local site and upload it to your live site when you are done.

If you didn’t need to make any changes to the local site, and everything seemed ok, then you can go ahead and update your live site to WordPress 5.0.

2. Test Your Website on Staging Environment

A staging site is a separate development version of your website where you can try out new features.

It’s usually a sub-domain of your site that’s restricted from public access. It’s where you can test new updates, themes, plugins, or use it for all your development. Once you’ve tested everything necessary, you can then upload it to your live site.

Most top WordPress hosting companies offer 1-click staging site installation from your hosting account.

If your site is hosted with Bluehost, then you’ll find an option to create a staging site under the Bluehost menu in your WordPress admin dashboard.

Creating a staging site in Bluehost

You can also create 1-click staging sites on WPEngine and SiteGround. If you are not using any of these hosting companies, then you should ask your host because they may offer this feature.

If your hosting service doesn’t have staging site installation feature, then you can still do it manually on your own. Here’s our step by step tutorial on how to create a staging environment in WordPress.

Step 3: Install the Classic Editor Plugin

The most significant change in WordPress 5.0 is the new Gutenberg editor.

This means that if you were to run into any issues, then it’ll likely be caused by a plugin or theme’s incompatibility with the new editor.

It is also possible that you may not like the new editor.

Luckily, you can update to WordPress 5.0 and still keep the classic WordPress editor.

You can simply disable Gutenberg by installing the Classic Editor plugin on your WordPress site. Doing this will allow you to safely update to WordPress 5.0, while still keeping the classic editor that you’re familiar with.

Switching to the classic editor

Classic Editor is an official WordPress plugin from WordPress core contributors to allow you to switch back to the classic editor. With this plugin, you can hide the Gutenberg editor and create content the same way as before.

If you had to install Classic Editor because a theme or plugin wasn’t working after updating to WordPress 5.0, then you still have work to do.

You need to reach out to the theme or plugin developer and request them to make it compatible with the latest WordPress release.

If you don’t get a positive response, then you need to find an alternative theme or plugin to replace incompatible ones.

Step 4. Things to Do After Updating to Gutenberg in WordPress 5.0+

If you are just starting your first WordPress blog, then you are in luck. You’ll quickly get used to the awesome new block editor which is faster, modern, and incredibly powerful.

On the other hand, if you have been using WordPress for a while, then the new editor is an exciting new experience for you.

Most of us are used to working with the old editor and have setup our workflows around it.

Good news is that you can still do all the things you did in the old editor with Gutenberg, and then some more.

To help you learn new features, we have created a complete Gutenberg tutorial it shows how to use new block editor and create visually stunning content for your site.

We hope this article helped you to learn how to test your WordPress site for updating to Gutenberg or WordPress 5.0. For troubleshooting common errors you may encounter, check out our guide on most common WordPress errors and how to fix them.

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 Test Your Site for Updating to Gutenberg (WordPress 5.0) appeared first on WPBeginner.

Source link


How to Add Web Push Notification to Your WordPress Site

Do you want to add push notifications to your WordPress site? Push notifications allow you to send notifications to users even when they are not visiting your website.

In this article, we will show you how to easily add web push notifications to your WordPress site. We will also talk about the best WordPress push notification plugins and how to send desktop & mobile push notifications from your WordPress site.

Adding web push notifications to a WordPress site

What is Push Notification?

Push notifications are clickable messages displayed on top of user’s desktop or notification area on their mobile device. They can be shown even when the user’s browser is not open.

web push notifications shown on a desktop

Aside from desktop, web push notifications also work on mobile devices. This allows you to reach your users across devices with latest updates and offers. Web push notifications have proven to be a very effective way to convert website visitors into customers and loyal followers.

Why Add Web Push Notifications to Your WordPress Site?

We have already discussed that 70% of people who leave your website will never come back. This is why you need to convert those website users into subscribers or customers.

You can do this by utilizing multiple channels at once. This includes email marketing, social media, mobile or SMS marketing, and web push notifications.

While email lists are still the most dominant and effective marketing tool at your disposal, push notifications for us are proving to be quite effective.

Here is why:

  • Users need to give their explicit permission to receive push notifications. This means they are already interested in what you have to offer and are more likely to engage with notifications.
  • Push notifications are shorter and demand less attention than email or social media updates.
  • There is no algorithm, so nearly 100% of messages are delivered.
  • Users can control how their devices display notifications, they can snooze them, or turn them off entirely.
  • Not as many companies are using it.

Popular sites including Facebook, Pinterest, LinkedIn, and many others understand the importance and are already using web push notifications.

These notifications are more engaging than SMS, email marketing, and social media platforms. According to a survey, push notifications have a 50% higher open rate than email and twice as much click-rate.

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 push notification service for WordPress websites. It allows you to easily add push notifications to any website.

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

OneSignal 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 API Key and APP ID into the plugin settings.

Let’s get started.

Step 1: Setting up OneSignal Push Notifcations

First, you need to visit the OneSignal website and click on the get started button next to the Web Push option.

OneSignal get started

You’ll be asked to provide your email and password to create a free account. After your account is created, you’ll reach the OneSignal dashboard.

Add OneSignal app

On the dashboard, click on the ‘Add App’ button to create your first app.

You’ll be asked to provide a name for your app. You can use anything here that helps you identify it.

Enter a name for your app

Next, you’ll need to select a platform. You can select multiple platforms for an app. For now, we recommend selecting ‘Web Push’ and click on the next button to continue.

Choose app platform

In the next step, you’ll be asked to select an integration method. Go ahead and click on ‘WordPress Plugin or Website Builder’ box and then select WordPress.

Select integration method

When you scroll down a bit, you will see a ‘WordPress Site Setup’ section.

You need to enter your website name, URL, and upload a logo. This logo would appear in your notifications, so we recommend using your site icon (favicon) or website logo.

WordPress site setup

Below that, you will see a toggle that you can turn on if your WordPress site is not using SSL/HTTPS. You can only send web push notifications from a secure HTTPS URL. If your WordPress site is not using HTTPS, then you need to turn this setting on and enter a label.

A label is basically a subdomain hosted on OneSignal servers using a secure HTTPS URL. This subdomain will be used to send your push notifications.

If you want to setup HTTPS on your own WordPress site, then see our step by step tutorial on how to move WordPress from HTTP to HTTPS. We highly recommend using your own domain with SSL than a subdomain on OneSignal, so you’re not forever locked in to their platform.

Once you are done, click on the save button to store your OneSignal settings. You’ll now see the API keys that you need to copy.

Copy the API keys

Now, you can switch back to OneSignal plugin settings on your WordPress site and switch to the ‘Configuration’ tab. You need to paste the APP and API keys you copied earlier.

Paste API Keys

These API keys will only allow you to send push notifications via Chrome and Firefox web browsers.

You will also need Safari Web ID in order to send Push notifications via Safari web browser.

To get the Safari API key, you need to switch back to OneSignal website and go to the settings page for your app. Once there, you need to click on the edit icon next to Apple Safari.

Push notification setup for Safari

Next, you’ll be asked to enter your website title, URL, and optionally upload a site icon.

Safari settings for push notification

Click on the Save button to store your settings. After that, you’ll see your Safari Web ID on the screen which you need to copy.

Safari Web ID

Once again, switch back to the plugin’s settings page on your WordPress site and paste the Safari Web ID under the configuration tab.

Save OneSignal plugin settings

Don’t forget to click on the save button to store your plugin settings.

You can now visit your website in a new incognito browser tab. You will see a push notification popup on the top and a bell notification icon at the bottom right corner of the screen.

Push notification optin

The push notification popup will also appear on mobile browsers.

Push notification optin on mobile browser

Note: The appearance of push notification popup prompt may differ based on http/https settings of your site.

Now, you may be wondering why this push notification prompt looks different than what you see on some other websites?

Normally users see the browser default notification prompt, which looks something like this:

Default browser prompt for push notification

Now the problem is that, if a user clicked on ‘Block’ button, then they will never see a prompt for subscribing to notifications. To fix this, OneSignal comes with two different prompt types.

The first one is the push notification popup and the other one is the subscription bell icon. Both of them are fully customizable, and you can change them to meet your needs.

Step 2. Customizing The Push Notification Popup Prompt

The basic push notification popup is quite simple. It uses generic language and displays your site’s logo. You may want to customize that to make it more personal.

Simply switch to the configuration tab under OneSignal plugin’s settings page on your WordPress site and scroll down to the ‘HTTP Pop-Up Settings’ section.

Customize push notification popup

You need to click on the toggle next to ‘Customize the HTTP Pop-Up Prompt text’, and then start adding your own text.

Don’t forget to click on the Save button to store your settings before testing the prompt.

Step 3. Customize the Bell Notification Icon

Normally, the browser prompt for notification and the popup disappear when a user dismisses them.

What if users later change their mind and want to receive push notifications?

The subscription bell in OneSignal allows you to keep showing users a prompt to subscribe push notifications on your site.

The bell icon is also fully customizable from the plugin’s settings page. Simply scroll down to ‘Prompt Settings & Subscription Bell’ section and turn on the customization options that you want to change.

Subscription bell settings

You can then scroll down and change settings for each option you want to customize. Ideally, you would want to change bell icon colors to match your own theme colors.

Bell icon customization

Note: We don’t use the bell icon because we feel it’s a bit too intrusive.

Step 4. Sending Push Notifications from Your WordPress Site

By default, the OneSignal plugin automatically sends push notifications for all new posts published on your website. If you want, then you can turn this feature off from plugin’s settings page under ‘Automatic Notification Settings’ section.

Automatic notification settings

You can also manually send a notification when you publish or update a post. Simply edit a WordPress post or page, and you will see the OneSignal meta box under document settings column on the right.

OneSignal notification box in Gutenberg

If you are using the old classic editor, then you will see the meta box like this:

Send push notification box in classic editor

Check the box next to ‘Send notification on post update / publish’ and then click on update or publish button.

OneSignal will now send your article as a push notification to all your subscribers.

Send a welcome push notification to new subscribers

You can also send a welcome push notification to your new subscribers. Visit OneSignal’s settings page in your WordPress admin area and scroll down to the ‘Welcome Notification Settings’ section.

Welcome notification

Now when a new subscribes for push notifications, they will receive a welcome notification on their device. Depending on their browser and device the notification may look different.

Welcome notification displayed on Mac via Firefox

That’s all, you have successfully added web push notifications to your WordPress site.

You can also send custom notifications from the OneSignal app dashboard. The process is quite intuitive and you can follow onscreen instructions once you login to OneSignal.

Other Good WordPress Push Notification Plugins

It is important to choose the right web push notification service from the start. Since most providers try to lock you in their platform, changing your push notification service can result in losing your old subscribers. Meaning if you switch, then you will be starting from scratch.

This is why we recommend asking the provider you choose for all settings you need to configure to make your subscriber list portable.

At WPBeginner, we use OneSignal because it has the features that we need at a reasonable price.

  • OneSignal offers a free WordPress push notification plugin with unlimited mobile push and web push notifications for upto 30K subscribers.
  • Even their free plan includes features like segmentation, localization, tracking with Google analytics, and a robust API.
  • You can use it with all top email marketing services to send your newsletter emails via web push notifications

WordPress is all about choices. Here are some other WordPress push notification plugins that you can also try.

  • PushEngage Web Push Notifications – This is the connector plugin for PushEngage, a push notifications service provider. They have a free plan limited to 2500 subscribers, 120 notifications, and 5000 clicks.
  • PushAlert – Web Push Notifications – Helps you connect to PushAlert web push notification service. They also offer a free plan limited to 3000 subscribers.
  • PushCrew – Connects your website to PushCrew’s push notification service. They offer a free plan limited to 2000 subscribers.
  • PushAssist – Connector plugin for PushAssist web push notification service. Their free plan is limited to 2000 subscribers.

We hope this article helped you learn how to add web push notifications to your WordPress site. You may also want to see our guide on how to get a free business email address for 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 Add Web Push Notification to Your WordPress Site appeared first on WPBeginner.

Source link


7 Ways to Spread the Holiday Spirits with Your WordPress Site

Are you looking for ways to promote the true spirit of holidays on your WordPress website? It is the best time to share the joys of the season with your users while promoting your business. Since many of our readers asked for recommendations on the top WordPress holiday plugins and themes, we have highlighted the best ways to spread the holiday spirits with your WordPress site.

Spread the holiday spirit with your WordPress site

How to Spread the Holiday Spirits with WordPress?

The best way to celebrate the holiday season is to include your users into your happiness. You can offer them discounts on your products and services. You can also add holiday decorations like snowfall effects, Christmas bells, lights, and more on your WordPress website.

There are many third-party WordPress plugins and themes for holiday season. You can use them on your website to make it look more festive.

Another way to spread the holiday spirits is by sending gifts to your users through a lucky draw. You should check out our guide on amazing holiday gift ideas and share the happiness with your customers.

That being said, let’s take a look at the best ways to spread the holiday spirits with your WordPress site.

1. OptinMonster


OptinMonster is the best lead generation and optin form plugin for WordPress sites. It has a powerful exit-intent ® technology that helps in converting your abandoning visitors into subscribers and customers.

OptinMonster comes with a holiday campaign theme that you can use with their lightbox popup, sidebar, floating bar, fullscreen optin, and other campaign types. You can also create a countdown popup to boost your holiday sales.

Optin holiday template

The countdown timer creates a sense of urgency that helps you get more sales during the holiday season.

You can use OptinMonster to also show a seasonal greeting and any other promotion that you may want.

2. Snow Storm

Snow Storm

Snow Storm is a popular WordPress plugin for holiday celebrations. It allows you to show falling snowflakes on your website. The plugin allows you to change the color of the snow, manage the amount of snow, animation interval, melt effects, and more. The plugin will add a beautiful snowy effect to your WordPress site.

3. Christmas Ball on Branch

Christmas ball on branch

Christmas Ball on Branch is a simple and free plugin that lets you add a Christmas ball on a branch to your site. There are no settings for the plugin. You can simply install and activate it. It’ll display the branch and the ball on the top right corner of your site. It’s particularly useful if you don’t want your on-site holiday decorations to take over the content.

4. Christmas Countdown Widget

Christmas countdown widget

Christmas Countdown Widget is a free WordPress plugin that adds a countdown timer to your sidebar and other widget-ready areas. It comes with a stunning Santa Claus that shows countdown timer until Christmas. On the day of Christmas, Santa will greet your users with “Merry Christmas”.

It has a transparent background which means you can use it on any WordPress themes. You can also use the shortcode to display Santa Claus with countdown timer on your posts and pages.

5. Xmas Lights

Xmas Lights

Xmas Lights is another free WordPress plugin for holidays. It displays Christmas lights on the top of your homepage. You can install the plugin and it will automatically show the christmas lights on your WordPress site without any configuration.

6. Christmas Music

Christmas music

Christmas Music is a WordPress plugin for holiday music. You can use this plugin to add Christmas music (Jingle Bells) on your entire website or specific posts and pages. It shows a play/pause button on the bottom right corner for users to enable or disable the music.

7. WordPress Themes for Holidays

We don’t usually recommend our users to change their WordPress theme for a specific event or holiday season. However, if you have a personal website and really want to change your theme to a holiday theme, then you should check out our handpicked list of the best WordPress themes for holidays.

Christmas Bell

Christmas bell

Christmas Bell is a free and multipurpose WordPress theme. It can be used to add the looks and feels of a festival, holiday, or specifically Christmas decorations on your website. It features a custom logo, featured content slider, header media options, and more. The theme beautifully adds a festive feel to your WordPress website.



Snowflakes is a free WordPress holidays theme with photos. It comes with bright colors and a cheerful festive look. Snowflakes has multiple color options, navigation menus, image galleries, and more. You can use this theme to transform your site for the holidays.

We hope this article helped you find the best ways to spread the holiday spirits with your WordPress site. You may also want to see our expert tips on growing your business online on a small budget.

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 7 Ways to Spread the Holiday Spirits with Your WordPress Site appeared first on WPBeginner.

Source link