Right after you update WordPress, you are redirected to view a welcome page. This welcome page helps you better understand the new features and bug fixes in the current update. The same is the case with a few plugins. When users install one of these plugins or update them, they are redirected to a welcome page. That welcome page is what we are going to build in this series.
Over the course of this four-part series, I'll explain the process of creating a welcome page for a WordPress plugin. By the end of the series, you'll know how to code a welcome page which may contain a promotional video, plugin features, subscription form, etc. So, let's get to it.
Before we dive in, let me explain how I will take this series ahead. There are four parts of this series:
If you create a getting started page for your WordPress plugin that lists all the features and steps related to the product, that page can be called a welcome page.
The idea of creating this page is to provide users with some information about the product they just installed. It can have any information related to your product, such as an explanatory video or guide to what to do next.
That's what we are going to build.
I am going to create a WP Welcome Page Boilerplate in the form of a WordPress plugin that could be used in any project. Let's dig in and study the architecture of our Welcome Page plugin. There are two constituents of a welcome page plugin:
The welcome page as a whole is the core ingredient of this entire series. It can contain elements like:
We are going to build this page with PHP, HTML, and CSS. Some parts of this page will be dynamic, e.g. the version number of your product.
How about we write something like a pseudo-algorithm for the redirection? Being a WordPress developer, I think it is an important part of your development workflow to start with a pseudo-algorithm (and optionally convert it to pseudo-code).
So, the welcome page plugin needs to redirect the user to the welcome page. Just about like the steps below:
That's pretty much all there is to this plugin. In the next article, I will explain how the transients API works in WordPress.
So far, I've mentioned the line of action which I'm going to adopt while coding the welcome page for my plugin. Before we jump into the technical details, let's take a look at some existing examples of welcome pages in the WordPress community.
Most WordPress plugins are not accustomed to the idea of adding a welcome page. I wonder why it is. I think welcome pages are superb as far as the user experience is concerned. They help connect and fill the gap instead of leaving the users in the middle of nowhere right after they install your product.
Here are a few examples of welcome pages.
It would be unfair if I missed out the default welcome page which appears when you update WordPress. At the time of writing, WordPress version number 4.4.2 has a feature-rich welcome screen.
What I like the most about it is the video and the Credits tab which acknowledges all the contributors (since you can find my name too!). But you get the idea.
It also notifies users about security and maintenance fixes. Then it displays the most recent default theme, i.e. Twenty Sixteen.
If you ask for the definition of a perfect getting-started workflow, then WooCommerce is the answer. It is by far has the most well-equipped multi-tier welcome page, or you could call it a workflow. It helps users to set up the plugin by reviewing the defaults or customizing them.
Upon activation, it helps users by installing the following items:
And finally it helps you add your first product.
In short, it offers a complete tour guide for its users.
Inspired by these products, I added a welcome page in one of my relatively new plugins, CF7 Customizer. My plugin needs the users to install Contact Form 7, and then to create a page with contact form 7 shortcode inside it and finally customize it.
There was no better way to communicate these steps than by redirecting users to a welcome page with Getting Started information. Otherwise, a new user who installs this plugin would get left in the middle of nowhere.
Next it displays the plugin features, a short video, and a subscription form.
So, by now you know how a welcome page could help improve the end user experience and what we are going do about it. In the next article, I'll highlight a few interesting facts about transients in WordPress and their role in building a welcome page.
Finally, you can catch all of my courses and tutorials on my profile page, and you can follow me on my blog and/or reach out on Twitter @mrahmadawais where I write about development workflows in the context of WordPress.
As usual, don't hesitate to leave any questions or comments below, and I'll aim to respond to each of them.