Proper approach to WordPress plugin development – based of Mr Poster Mockup plugin

Proper approach to WordPress plugin development – based of Mr Poster Mockup plugin

We’ve recently published a new portfolio entry: Mr Poster Custom WooCommerce Plugin. The project was quite complex to begin with – due to specific client requirements, multiple plugin dependencies and an existing WordPress installation. These could potentially cause conflicts compared with a fresh WordPress install (and it actually did as our development environment was slightly different!).

In the following tutorial I’m going to describe our development approach that simplifies the coding process and reduces a number of potential future issues to a minimum.

1. Investigate and plan – work less, try to sleep with a full body pillow to get some rest

As much as we like coding (and prefer to focus on that part!) investigation and development planning are crucial. My typical approach is to keep asking the client on what are his needs.

Before I start working I tend to follow these rules:

[icon icon=”comments-o”] Investigate

Investigate the client’s current installation. Make sure there are no bugs in the existing code (usually enabling debug mode is enough), identify potentially conflicting plugins, ask for the working access details etc.

[icon icon=”thumbs-o-up”] Find mutual understanding

Make sure the client understands your proposed solution, if he’s like: “Ok, let’s try” then he certainly isn’t sure of the final effect – you may potentially spend coding time on doing something that’s not neeed. Make sure he says “Yes, that’s what I need”.  You will not only save time on coding but will also be able to tell him at some point that this was something he agreed for and anything extra might require additional budget.

2. Don’t code without a plan

Similarly to the above, after obtaining all required information from the client you have to make a wise plan of your code structure. You can’t simply jump into the project and start coding whatever. I personally ask myself the following questions:

[icon icon=”download”] Should the code be a standalone plugin?

The short answer is – if it’s possible to code it as a plugin (say there are no theme code dependencies that cannot be hooked into) then Yes!

[icon icon=”compress”] Should the code be placed within theme’s functions.php file?

If the code depends on theme’s code then use the themes functions.php file (ideally as a child theme).

[icon icon=”exclamation-circle”] Should the code be used a must use plugin?

In certain case scenarios it might be wise to load your code as a must use plugin. Typical scenario is that if the client accidentally disables your plugin, installed in a normal way he might cause site to crash.

[icon icon=”folder-open”] Should I include any 3rd party libraries?

I always make sure to use only required 3rd party libraries or plugins. If something that I want to achieve can be done quickly without the inclusion of multiple lines of redundant code I tend to avoid using libraries.

3. Short Case Study Based of Mr Poster

1. Investigation

We’ve been approached by the client with a set of images, mockups and a short description of the problem. Basically it as more or less such a conversation:

– Hey, we need an ability to merge mockups with posters because we’re losing a lot of time to do so in the Photoshop. Can you do that? How much would it cost and how much time would it take?

I was like, alright.

– What’s a mockup? What’s a poster? Can you provide me with a link to your site with images on what kind of sections are you speaking of?
– Yeah sure, here’s a link. When can we start?

Given my experience this is quite typical and nothing extraordinary. The client’s tend to assume that we as a specialists tend to understand everything from botttom to top without any explanation needed. That’s not correct at least that’s not helpful.

Hence I proposed to have a screen sharing made via Skype where the client would walk me through their site, their setup. I was asking about the difference between a mockup and a poster. After having such a call everything was clarified.

The investigation part as over (!). I had no questions I had an absolute understanding of the client requirements and was able to confirm them with the client.

2. Development

Once we’ve gathered all of the required information. We decided to find the simplest and fastest solution to complete the project. Following the principles of #1 and #2 we’ve decied to go ahead with Custom Post Types and Advanced Custom Fields to achieve the desired result.

We’ve ended up with such a simple solution:

1. The client creates a Custom Post type called Mockup.
2. Each mockup can have unlimited number of image placeholders inside. Each placeholder needs to have a X and Y coordinates as well as width and height specified.
3. The coordinates from the above correspond to each mockup’s featured image

Afterwards, since the client was using WooCommerce to sell the goods we’ve extended the products with a panel which allowed:

1. One can choose unlimited number of mockups that the product’s featured image will be applied to product placeholders.
2. After saving the product the product gallery will be automatically populated with each product’s featured image placed on each of the mockup placeholders

And basically that’s it! The project was successfully launched just recently in Polish language but is supposed to be translated into several languages! The site is available at https://mrposter.co/, enjoy creating your first custom poster 🙂

[rev_slider mrp]

Please leave this field empty

Oh hi there 👋
It’s nice to meet you.

Sign up to receive WordPress tips in your inbox, every month.

Email Address *

I don’t spam! Read my privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.