My first WordPress Plugin. Why? How? What I Learned.
Tags: wordpress, react, javascript, career
Published: 2020-01-03 19:12:28


Over the last year I have had the responsibility of maintaining and updating our company website. It's a pretty simple WordPress website with a few hundred pages and a few dozen editors. In April of 2019, I made the brave move of updating to WordPress 5 and embarking on a journey of moving our content over to custom [Gutenberg](https://wordpress.org/gutenberg/) blocks.

At that time, I'll admit, I knew nothing about Gutenberg. I found [an article] about how ACF worked with Gutenberg, read through it and created our first block, then our second, then our third, and before I knew it we had quite a few pages fully moved over. It wasn't until a few months in that I realized that ACF with Gutenberg was a good starting point, but really wasn't the best user experience for our editors.

<figure class="image">
  <img src="https://thepracticaldev.s3.amazonaws.com/i/c5hjpj6eqk0e074uxia2.png" />
  <figcaption>An actual screenshot from our site.</figcaption>
</figure>

## Why I built a WordPress plugin.

As a team, we decided to ditch ACF, move over to [ParcelJS](https://parceljs.org/) and start building custom blocks that are a nice experience for our users *and* our editors.

This however presented new issues. We had new, better, stronger, faster blocks going out, but there was no way for us to know where the ACF blocks were used for us to replace them. 

I got fed up with these types of issues so I spent some time working on a simple function that gave us a [WP rest endpoint](https://developer.wordpress.org/rest-api/) that showed what pages a block was used on. From there we could be sure that when updating a block, we had found all the instances in which it was used.

This proved to be way more helpful then I could have imagined. Issues went down, QA became much easier, and I was a 🙂 🏕️er. A co-worker of mine mentioned that we couldn't be the only ones having this issue, and this would probably be useful for others as well.

From there I took a few weeks of my spare time and wrote a plugin — [Find My Blocks](https://wordpress.org/plugins/find-my-blocks/), re-wrote the plugin, submitted it to WordPress and the rest is history!

![Find My Blocks](https://ps.w.org/find-my-blocks/assets/banner-1544x500.jpg?rev=2208303)


## How I built a WordPress plugin.


As I mentioned, I had originally written an endpoint that did 90% of the work already. From here is was quite simple, take that endpoint, clean it up, consume it by some frontend library, and display a bunch of content. It made sense to me to make a small [React](https://reactjs.org/) app, as Gutenberg is written in the same thing. So my decisions were made and I was off.

I won't get into too much detail about the code. If you would like to take a look you can do so on [Github](https://github.com/eddysims/find-my-blocks).

## What I learned building a WordPress plugin.

I believe that you everything you do is a learning opportunity, and this was no exception. Besides the obvious "How to build a WordPress plugin" there was a tonne of learning from this project.

#### 1. React and WordPress work nicely together.

This was a surprise to me, although I don't know why. At first I thought that setting up a React app on a WordPress plugin would be a pain. The truth is that it was as easy as setting up a React app anywhere. All I needed was a `<div id="find-my-blocks"></div>`, and the rest was very straight forward.

#### 2. Getting a WordPress plugin into the Plugin Repository is easier than expected.

I have built plenty of WordPress sites, and I have used plenty of WordPress plugins. I always thought that the people who develop plugins are some type of star developer and that getting a plugin into WordPress was super challenging. 

*Spoiler: It's not.*

There are tonnes of guides that show exactly what you need to do. I followed [this one](https://digwp.com/2010/03/add-plugin-to-wordpress-plugin-repository/) in combination of the [WordPress Guidelines](https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/) and found this process to be way easier then I expected.


#### 3. If you build it, they will not come.

This is a lesson that I, and anyone who has released something has learned multiple times. 

On Dec 3, 2019 I received my email saying that my plugin was accepted. I screenshot it, sent it to everyone and bragged about how I proud I was! 

![My Email](https://thepracticaldev.s3.amazonaws.com/i/0gypwe7desr50zj9y39u.png)

On Dec 5, 2019 my plugin had 1 active installation... My own... 😔

I couldn't believe it! I had created something that was so useful to me! Why wasn't anyone using it?!

*Answer: Because no one knew it existed.*

I took some action and sent a message to a few slack communities that I am part of, hoping that people would evangelize my great work.

As of writing this line, my plugin has 87 all time downloads and I am very happy with that. I quickly learned unless I wanted to dedicate a large amount of time to this, I needed to not care about the numbers and just hope that my work is helping to make someone else's life easier.

#### 4. Anyone can do it.

[Imposter syndrome](https://en.m.wikipedia.org/wiki/Impostor_syndrome) is real and it keeps a lot of people back from doing amazing things.

I don't think I have created the greatest thing of all time, But I also never thought that I would have a project out in the wild. I hummed and hawed about whether I should submit my plugin, and I'm glad I did. Something so small was able to give me a confidence boost I needed to start my next, bigger project, and then hopefully another one after that, and another one after that. 

I realize now that people who put these projects out are not some sort of star developer. They are people who most likely started with something small, learned from it and let their ideas grow.


## Try my plugin?

If you want to try out my plugin you can find it [here](https://wordpress.org/plugins/find-my-blocks). I would appreciate it if anyone wants to try it out and leave me feedback on their thoughts!

If you have any questions, let me know in the comments and I will try to get back to everyone!