MakeYourWP
Services
WordPress development
Gutenberg & Elementor editors
WooCommerce
PHP, JavaScript
Client
Website Learners
Year
2021
About The Client
MakeYourWP is a project by Website Learners – a company that works with WordPress sites and teaches people to do it. They share tutorials on various aspects of building and managing WordPress sites on a YouTube channel on their site. The service we work on provides accounts in which you add your sites according to the plan selected and manage them.
Location
India
Competence
Website building tutorials
Industry
SaaS
Problem
The company needed a new site based on their design. It had to have a custom theme and a set of plugins required for the order and payment functionality. Some of the plugins worked only with Elementor Pro, so we had to use it along with Gutenberg.
The task is to create the following set of pages:
– Homepage
– Sign In & Sign Up pages
– Account page
– A set of multi-level Settings pages
– Checkout & Payment pages
Solution
We began with creating a custom WordPress theme. It required a lot of adjustment and configuration because it was necessary to change the source files of all the plugins in the theme.
We developed 12 custom Gutenberg blocks for the homepage, and some of them depended on the plugins we had to use. It was a multi-level dependence: Dollie is the one the blocks were connected to; this plugin, in its turn, required WooCommerce and WooCommerce Subscriptions to load the products and Elementor as the page builder.
Pricing
The Pricing slider displays subscription prices for different plans and periods. To select the necessary period, users toggle Monthly or Yearly below. After that, the block loads information from WooCommerce Subscriptions and Dollie to show the corresponding prices.
The Blueprints
The Blueprints block is another custom block with complex functionality. This block shows templates with blank or custom site themes. They’re displayed in a 3×3 grid (the number on the screen is lower because only 5 options are currently available) with a search bar at the top. The search works on the Ajax technology. After a user performed the search, the filtered results appear in the block, not requiring the page to reload.
The Account Page
We needed to use the Dollie plugin; so, it defined the account functionality. Since this plugin cannot function without Elementor Pro, we used this page builder when working on the Account page. To make Elementor-dependent plugins, native WordPress functionality and the custom theme function together correctly, we overrode template files for all the plugins.
The Login Page
The Login page on this site is also provided by the WooCommerce plugin. However, to adapt it for the theme we’ve built and for the non-Elementor-dependent functionality, we had to change the template entirely. We added the social media login option with the plugin that we adapted for the site.
“Adding the plugins to this site was not as easy as it normally is to install a plugin. The main complication was the necessity to use the Dollie plugin, which required several other plugins to function. We had to coordinate work of these plugins (two WooCommerce plugins and Elementor) with everything on the site so that no conflict arises.”
The Dollie Plugin
The Dollie plugin provided the templates for the Account page, but we had to override them as well. The resulting page differs from the default option significantly – it was necessary due to the design we had. That also allowed us to change the list of the sites added to the account.
Checkout
Each item in the Pricing slider comes with a Choose button. After selecting a suitable subscription plan and clicking Choose, the user automatically proceeds to the checkout. Unlike the standard WooCommerce checkout template, the process is divided into two steps – Account Information and Payment. The Cart step is omitted. Apart from these rearrangements, we overrode the default WooCommerce checkout templates, building it almost from scratch so that it fits the design and technical specifications.
The Account Information
The Account Information screen displays a form where users provide the information needed to create an account and the plan selected. Above the block, there is a progress bar showing the current step. On the Payment step, users provide their billing and payment information in the form. Additionally to this and the plan selected, there is also the order summary with the total amount to pay and details.
Payment
MakeYourWP should accept credit cards and PayPal as payment methods. To add them, we used the Stripe payment system plugin with overridden templates. Once the payment is processed, the confirmation page appears. It provides the purchase details, the View button that displays the order details with invoice and a video with instructions.
Result
The site we’ve built is a bespoke solution with lots of custom-made blocks and functionality. It uses a custom theme, custom Gutenberg blocks, plugins with overridden templates, PayPal and Stripe payment systems and two editors (Gutenberg and Elementor Pro).
The custom Pricing block is connected with WooCommerce to load the subscription plans as products and add them to the cart when a user clicks Choose. The custom Blueprints block provides a selection of templates with search functionality that works based on Ajax database queries. Search results appear on the same page in the same block without causing the page to reload.
The Dollie and WooCommerce plugins are configured for the custom theme, and everything on the site works like clockwork. To achieve that, we overrode most of the plugins’ template files. As a result, the MakeYourWP site visually and functionally matches the design and technical requirements and uses all the required plugins without any internal conflict. We optimized the result so that page load time didn’t exceed acceptable limits.