Gutenberg & Elementor editors
About the project
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.
Website building tutorials
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:
– Sign In & Sign Up pages
– Account page
– A set of multi-level Settings pages
– Checkout & Payment pages
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.
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 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.
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.
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.