# Tutorials on building a plugin to integrate UIkit into Pinegrow

**URL:** https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121
**Category:** Tutorials & Courses related to Web Development
**Created:** [June 24, 2019, 5:10pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121 "2019-06-24T17:10:56Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [June 24, 2019, 5:10pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/1 "2019-06-24T17:10:56Z")

</div>

Hi All,  
I’ve published two part of a multipart tutorial on building a plugin for Pinegrow. In this case, I’m bringing the components of the popular UIkit framework into Pinegrow. Hopefully it will help some people out. [https://www.robertmeans.net/adding-uikit-to-pinegrow-pt-1/](https://www.robertmeans.net/adding-uikit-to-pinegrow-pt-1/) Feel free to reach out in the comment section or here if you see something bad or just plain wrong. I wouldn’t mind people reaching out if they enjoy it or learn something as well! 🙂

---

<div class="post-metadata">

### Author: ![zedbuza](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zedbuza](https://forum.pinegrow.com/u/zedbuza)
#### Post date: [June 24, 2019, 6:34pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/2 "2019-06-24T18:34:47Z")

</div>

Thanks Rob, great work and it’s a lifesaver. hopefully more people will come to the UIKit fold with your plugin.

---

<div class="post-metadata">

### Author: ![m-artin](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/m-artin/32/1447_2.png) [@m-artin](https://forum.pinegrow.com/u/m-artin)
#### Post date: [June 25, 2019, 7:59am UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/3 "2019-06-25T07:59:47Z")

</div>

Wow, thanks a lot for your easy to follow tutorial on this rather complex topic! 🙂👍  
Can’t wait for part three. Please let us know, when it is online.

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [June 28, 2019, 7:56pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/4 "2019-06-28T19:56:54Z")

</div>

Part 3 is up!  
Hot as heck here, so I hope I didn’t make too many slip-ups!

> **[Adding UIkit to Pinegrow: Pt 3 - From the Donkey's Mouth](https://www.robertmeans.net/adding-uikit-to-pinegrow-pt-3/)**
>
> Namaste!     In this part of the tutorial, we will discuss the overall structure of our plugin, outline the basic parts of a Pinegrow component, and then finally add our first component! Just to recap, we have set up our plugin project with...

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [July 8, 2019, 7:15pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/5 "2019-07-08T19:15:01Z")

</div>

Part 4 is up! Last time I had the heat to blame for any slip-ups. This time it is just me exploring the edges of my Pinegrow knowledge. Hopefully, this tutorial will be clearly enough written to help somebody out.

> **[Adding UIkit to Pinegrow: Pt. 4 - From the Donkey's Mouth](https://www.robertmeans.net/adding-uikit-to-pinegrow-pt-4/)**
>
> Namaste!!     Thanks for sticking with me on this arduous journey. In this installment, we will learn about the three other basic input types – the ‘checkbox‘, ‘text‘, and ‘image‘ types, briefly examine (right Bo, like anything you type is...

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [July 26, 2019, 12:34pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/6 "2019-07-26T12:34:27Z")

</div>

Part 5 is up. Some helper functions and incorporating the UIkit icons using the built-in pop-over modal in Pinegrow. Any corrections, please let me know.

> **[Adding UIkit to Pinegrow: Pt 5 - From the Donkey's Mouth](https://www.robertmeans.net/adding-uikit-to-pinegrow-pt-5/)**
>
>     Namaste!     Welcome to part 5 of this series! In this section, we will be injecting our template resources, covering some helper functions, and then we will add in a custom control for adding UIkit icons to Pinegrow using a...

---

<div class="post-metadata">

### Author: ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [July 27, 2019, 1:57pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/7 "2019-07-27T13:57:41Z")

</div>

Crazy! excellent job man! UIkit looks pretty awesome. Would be great to see PG integrating this framework (with visual helpers) that is becoming more and more popular!!

---

<div class="post-metadata">

### Author: ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [July 27, 2019, 6:24pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/8 "2019-07-27T18:24:45Z")

</div>

Hi @RobM, Ive been watching this but not played with it yet. Thanks so much for taking the time to actually create a full on helpful Plugin creation tutorial for everyone else!  
This is awesome.

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 9, 2019, 3:06pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/9 "2019-08-09T15:06:16Z")

</div>

Part 6 is up. In this one we look at conditional display of fields, how to use JS to get and set values, plus how to jazz the look of our option display up a little. Hope it is still readable!! 😅

> **[Adding UIkit to Pinegrow: Pt 6 - From the Donkey's Mouth](https://www.robertmeans.net/adding-uikit-to-pinegrow-pt-6/)**
>
> Namaste!      Welcome to part 6 of this tutorial. In this part, we will be covering an additional ‘key:value‘ pair for the options fields and talk about what values are made available to pass to helper functions. To pretty up our...

---

<div class="post-metadata">

### Author: ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)
#### Post date: [August 9, 2019, 4:11pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/10 "2019-08-09T16:11:53Z")

</div>

Congrats & Nice job @RobM !  
Be prepared, I bet that at the end of the tutorials, a lot of people will ask you for the plugin files 🙂

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 9, 2019, 6:06pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/11 "2019-08-09T18:06:31Z")

</div>

They might even become **somehow** available! 😉

---

<div class="post-metadata">

### Author: ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [August 10, 2019, 3:36pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/12 "2019-08-10T15:36:22Z")

</div>

gah!!!

 ![2019-08-10_16-33-30](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/11aab37550c4e5f7a6b50577c834c7c181bbba7d.png)

All day and most of yesterday.  
…edge of the world wifi on a farm…  
Cant get it  
☹

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 11, 2019, 10:01am UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/13 "2019-08-11T10:01:07Z")

</div>

You might need to set up SSH if it truly is a problem with slow connection. If you have any virus protection/firewall, or sometimes going through a VPN you will see these problems, as well. If you want help with generating the keys or anything, let me know.

However, having said that, it is probably easier to just download the zip and get to the fun parts! I’ll try to keep an eye on the forum for any other questions.

---

<div class="post-metadata">

### Author: ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [August 11, 2019, 10:03am UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/14 "2019-08-11T10:03:12Z")

</div>

yes,vpn here and wifi like using damp string!  
Ive now downloaded the zip and am tinkering

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 11, 2019, 4:02pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/15 "2019-08-11T16:02:56Z")

</div>

Due to your difficulties I went back through the tutorials step-by-step. It turns out that Guttenberg is changing some pasted code. For part 1 it removed some returns in the JSON that cause Pinegrow parse it incorrectly. I think I’m going to have to go back to the classic WP editor for awhile. Guttenberg is a little too buggy! Sorry again for all of the troubles.

---

<div class="post-metadata">

### Author: ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [August 11, 2019, 4:05pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/16 "2019-08-11T16:05:59Z")

</div>

no super!  
so pleased you found it!  
and Gutenberg, buggy? who’d.have thought it! 😃 hee hee hee.

but am I really the only person who has followed along?  
wow!  
People are getting so lazy now 😛waiting for the plugin to be released 🙂 ❤

ps, Im still having that error,

 ![2019-08-11_10-29-44](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f9542cfc2860551db7136582d6d8a677aa5362af.jpeg)

with the updated codes, when trying to load the plugin.

_UPDATE_  
Woohoo!

The buggy GutenTurd Code is now sorted.  
here we go 🙂  
 ![2019-08-11_22-18-16](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b0cd1d785999c996793d0343d3fa08c20f665f48.png)

---

<div class="post-metadata">

### Author: ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [August 30, 2019, 1:37pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/17 "2019-08-30T13:37:34Z")

</div>

The plugin pleaseeeee!!  
Thanks man- great work!

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 31, 2019, 10:25am UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/18 "2019-08-31T10:25:38Z")

</div>

Hey @red-rosefields - I’m not quite done with the whole plugin. I’m putting together the common actions in a new interface. I’ll write a tutorial on that when I’m done. Then (and I know you don’t want to hear it) I will put the plugin up for sale. I’ll still help anyone out that wants to learn to make a plugin and comments/emails/asks in the forum.

---

<div class="post-metadata">

### Author: ![Pervasive](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pervasive/32/2251_2.png) [@Pervasive](https://forum.pinegrow.com/u/Pervasive)
#### Post date: [August 31, 2019, 11:42am UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/19 "2019-08-31T11:42:45Z")

</div>

> [@RobM](#):
>
> Then (and I know you don’t want to hear it) I will put the plugin up for sale.

+1 for sure …the course is free and …you’re willing to work with people to teach them and …the plugin is quite possibly going to require some maintenance…

…up for sale is the way it should be!

But for me, I’m more interested in following the build quite honestly… it’s one of those “teach a person to fish” things.

The fact that PG can be expanded with customer-made plugins is pretty awesome! Hopefully the ole’ Gute will straighten 'erself out with age.

---

<div class="post-metadata">

### Author: ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [August 31, 2019, 1:02pm UTC](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121/20 "2019-08-31T13:02:48Z")

</div>

That is good news. If it is well built and properly maintained over time minding Uikit updates as well as PG ones, paying for it is just a must.  
Luckly it won’t be handle like the animator pro plugin developer did/does with his creation.  
Thanks again and I am looking forward to get it.

[Next page](https://forum.pinegrow.com/t/tutorials-on-building-a-plugin-to-integrate-uikit-into-pinegrow/3121.md?page=2)
