Expertise: Custom WP Plugin

  • Amarello Magazine: say hey to the Block Editor era

    This project marks an important milestone on my WordPress development timeline: the shift from classic themes to block-based themes. As a native-first aficionado, and with the rise of Gutenberg, I started to explore it from the first betas and gradually adopting it.

    Being an independent publication, Amarello had a clear business model: subscriptions. They wanted to turn the physical subscription to work on the site either, include a store, and import all the existing content from current to the new one.

    WordPress was already their CMS, but data was not very well structured, using Portfolio custom post type to store the articles, leaving default Post empty. The subscription was valid only for the bimestral physical magazine, and they wanted to implement the subscription model on the website as well, giving subscribers access to all the content of the printed magazine, along with free access content.

    v1.0 — Building with the Block Editor in the early days

    In the first iteration, while frontend designer at ESTUDIO CRU, the site was put online with a commercial paywall plugin, which integrated with WooCommerce, responsible for the store, and its Subscriptions add-on, allowing the payments to be recurring.

    When the project started, Gutenberg was on the way to be fully merged into WordPress Core as Block Editor [1]. This was my initial challenge: build my first fully Gutenberg powered theme, after years developing themes from scratch [2] with my own components/blocks built with ACF [3].

    This actually fitted my needs for a long time and I could simple keep with this way but Gutenberg/Block Editor would become the default in a short term, I was already experimenting with it for quite a while at that time and I was literally the entire studio’s dev team, which means the decision was only mine — so it was: Block Editor here we go.

    1. WordPress 5.0 “Bebo”
    2. Underscores
    3. ACF Flexible Content field

    The custom paywall solution

    About one year after I left the studio, Amarello’s team came with an already modified version of the site: they outsourced the store to a custom Shopify store, and wanted to change how the paywall was working, since Shopify wouldn’t integrate with WooCommerce Subscriptions.

    The solution came in form of a custom paywall plugin. First of all, I needed to scope the desired output:

    1. Articles that contained the selected tags would be accessible only to subscribers and admin users and Amarello must be able to control the selected tags.
    Feature #1

    Make the tag selection possible using the simplest interface as possible.

    1. Since subscriptions were now made outside the site, users might be created inside the paywall settings; the editorial team must be able to select the subscription duration in months and years
    Feature #2

    Create subscribers from the plugin dashboard — name, email and time of subscriptions

    1. All current subscribers must be imported to the new plugin user management, and the subscription period should remain the same
    Feature #3

    Ceate a way to check the user creation date within the pluginuser table

    DESIRED FEATURE
    1. Subscription renewing should be accessible as simple as possible on plugin’s dashboard

  • Giving nōvi control to its culture

    When nōvi came with Control to Culture briefing, it was meant to be just a simple landing page to register people to the event. After the event, the scope started to grow, and so we initiated the first iteration on the site, which would soon become their platform to bring together all people and content involved in each semester class.

    Nōvi needed to manage the registration for people interested in the course, approve them and manage access to the content, restricting those classes materials to the respective people of that class. The simpler the better, so I started to think how to achieve this the way they would have least steps to accomplish.

    First things first — the registration process

    So, to people get access to the content, they first needed to submit a registration and, if approved, be included in their class. Of course I could expend hours developing this solution by my own but hey, Gravity Forms is a pretty neat way to solve this, and the User Registration add-on would fit perfectly, so I suggested nōvi to purchase it and take a shortcut (money and time-wise speaking).

    Now to the classes

    As said, GF would make a nice shortcut, but we’re only halfway the process. Besides the registration, people might be approved, get notified about it, and at the same time, be placed on its correct class.

    Ok, now what?

    People should clearly be somehow classified by their class (named after its semester — 2023.1, 2023.2, etc.) and the straight-to-the-point way was User Roles. Also, besides their own class material (which should be restricted to class students and mentors) they also needed to have access to content that would be general to all students. So, the scope for now was:

    • People register on form
    • nōvi crew approve them
    • People are placed on their respective class to access restricted content to their class
    • People are also placed on a broader user role, to access restricted content to all alumni

    Custom needs require custom solutions

    With that in mind, I started to develop a custom WordPress plugin to Control to Culture website. The plugin is responsible for the two main features: create a class (user role) and restrict content access (class taxonomy) with a press of a button.

    Under the hood, the plugin compare the viewed item class taxonomy and current user role and, if they match, the user is free to access the content; if not, they’re redirected to a login page. With this block happening at server-side, it’s virtually impossible to a non-authorized user get access to the content. The plugin also restricts search engine bots access to the content.

    The only thing nōvi’s team needs to do is insert the class name and press the button Criar turma [Create class]

    Besides the open area of CTRL > CLTR site, the restricted area also had some work to be done. People approved to the classes also gain a profile page, which come filled with person’s name, but also has space to add the company, a photo and a short description. While the person doesn’t provide a profile photo, I’ve built a quick placeholder using JavaScript that resembles a profile picture, based on project’s visual identity.

    Every time the profile is loaded, a new profile picture is built using identity blocks.

    The restricted area has two main sections for students: the repository, open to all students, and the classes, accessible only for their students. The repository collects every document, links, videos, presentations, etc, related to the core of Control to Culture formation, while the classes bring together people and material crafted for that lessons.