Welcome back to the channel. This is my
favorite code editor which is VS
Code, Visual Studio Code for short, and
one of the things that I love about it
is that you're able to extend whatever
functionality you want in here. For
example if I wanted to do short codes
that I use over and over from different
computers, and I find that sometimes it's
useful, so I don't keep those snippets to
myself, so I write actual extensions
for them. So you're able to go to your
extensions panel here, and you can
quickly install a particular extension
and then use it for your daily work. For
example these are some of the
extensions that I use every day. Now
today we're going to write an extension
for Elementor, which is one of the biggest
page builders in WordPress land, and
that's the project I've been working on,
and I intend on growing and making
it big and adding more short codes, but I
want to show you how you can write your
own extension using this as a start
point. So the first thing that you need
is, you will go to the docs of Visual
Studio code, and we see that we are not
doing Visual Studio, we're doing Visual
Studio code. So you go to
the docs of Visual Studio code and you
will go to the API, and at the API you're
able to see the requirements that you need to
start writing your extensions. So the
first line of code that we need is
actually, we are going to use Node.js,
that's why we have the NPM here, and then
we're going to use Yo, which is
packaged for NPM node, and then we are
going to use the generator code which is
for the VS code extension generator. So
everything is automated in a way
to make this really easy for you. So
we'll need Node js, we'll need Yeoman, and
then we'll need to have our VS code
extension generator. So the first thing
that I need to do is test for Node, so
I go for node-v and I have
Node installed here but you don't have it,
you just need to go to nodejs.org,
download the version that's suitable for
your operating system, and then install
it like any other program to have it
installed. So after installing node, we
are going to install Yeoman and the
VS code generator on
our computer. So the first thing that
I'll need to do here is just type npm install -g to have it in global, and then
I'll add the extension of yo that I
want to install, then we need the
generator - code. We need generator -
code to install it, and then we'll run
this. So this will take a little bit of
time, I'm just going to move to the end
of the progress, this should be automated
so you don't have to worry about
getting any errors, unless you do then you
run them by Node.js to see why you're
having those issues. So we'll wait for the end
of this. So you can develop a number of
extensions, and we have some code samples
here for us to see, some will be in
JavaScript or type script, and others
will just be short snippets of what we
are going to actually build. So in this
particular case I want to build an
extension that has code snippets, so that
when people take them in their PHP files
or JavaScript, they're able just get a code block
and they'll edit and reuse over and
over and over again, sort of like
templates of code. So after everything
our NPM packages are installed and we
are ready to actually go. So the next
thing that we are going to do is go into
our folder here, so for example I
just want to store my files in this file
called vs extensions, because I want
to keep them centered, so I'll change
directory inside those. So while I'm
inside there, I'm now going to begin
working on my extension. So the first
thing that I'll need to do is type your
code, which will give me the
bootstrap of writing an extension. So
I'm going to answer just a couple of
questions to help me get through this
whole process. So I don't want to share any
anonymous reports, that's why I chose no.
Now we're going to do a code snippet, you
could do a color theme, a language support,
but we're going to go for a code snippet,
so that's what I'll use down here, and
since its new we'll not add anything, we'll
leave it blank, and then the name of our
extension is going to be elementor
snippets and that would be the
identifier, add
code snippets for building elementor
widgets, and then the language I'll
add PHP, and that will allow us to create
everything that we need. So we just need
to go into elementor - snippets
which is our folder, and then we can
open it in VS code. So we type code.
so in here we are presented with a
number of files that we don't really
need to edit, some we'll do edit later, but
for this we don't need to edit. Now
now we have a file open for us to add our
snippets,
the change log where we can write all our
changes, package.json, for now
I'm going to change this to 1.18 as
the engine that I want to run, we'll add a
couple of other things as we get to
publish the whole package, but for now
let's just head into Elementor and
we'll just see what let's say something
that we need to add as a widget. so I'll go to
Elementor and I'm going to look at
widgets, and I'll go to the controls. So in
the developer panel the one thing that
we probably wanted to add is how to
add controls. So I'll just copy this, and
then when I come here to my Elementor,
I'm going to go into the snippets codes
here, and I'm going to add, the first
thing that I'll need is a name for this, and
I'm going to call this add text widget.
Add an el to it for Elementor for
short, so we add the ID for our snippet,
and then we're going to add these curly
brackets here after, we shall need a
prefix, so we need add a prefix to this,
and the prefix
in most cases I'll just duplicate this
because it's about the same thing like
the ID, then the next thing that I'm
going to add is we need a body, and in
here you can see it's already telling us
what it's expecting, but we saw a number
of things here, we saw something like a
description which we can add, so we can
say add a control for a text widget
item. I can just call that there, and then
the next thing that we need,
we can add a scope if we want to and say
this will only be in PHP, but we can also
add the scope directly inside our package
.json where we add language PHP, we can have
others for JavaScript and so on,
depending on the particular snippet that
we're bringing in. So I'll not at the
scope at this place but rather I'm going
to add the body. We go back to the Elementor,
we're going to copy our text field here,
and then I'm just going to come and
paste it inside the body at this point.
So I'm just going to use my vs code to
help me fix this really quickly. So I'll
select this, use ctrl shift l to go to the
end, add the first bracket with a comma,
and then I'll go to the beginning and
add the ending bracket, and this works
out well.
The only issue we have is these brackets
that are not well closed. This is a
namespace for Elementor that's needed, so
we need to escape this slash
that we actually see here. We need to also
add a slash at the end for this to make
sure it is well escaped. So we have our
body, we have our description, we have our
prefix, and everything is going on well.
So let me test this. Now for us to test
this we just need to press F5, and this
will open for us another instance of vs
code, and we are going to first save this
file as PHP, so I'll call it index.php to
allow us to test this, because our new
extension will only work in a PHP
environment. So in here if I type el, you'll
see that we have el _, and
as we add text widget we see the
description we give this, and we have
our code. So when I just type that, we're
able to get it all our code showing up
here. So we'll edit this and just make
the changes that we need to make. So this
is working out beautifully for now, let
me just go back here and I'm going to
add a few things that will help us to
change, let's say if we need to change
the name here for the plug-in and the
text widget. So what we do in this case
is we add a dollar sign, and we add two
curly brackets, and
then what I'm going to do here is add a
1 for it to be the first item we'll
edit, we're going to call it control
name, and we're going to just copy this
again here, change it here in the plug-in
name, we're going to give it a position of 2, and
this is what is usually our text domain.
So I'm going to change this and call
this text domain. So we have this saved up,
I'm going to just press F5 again, so when we
open that and let's say we are working
in our PHP, and we need to add our add
text widget when we add it, you'll see
that this is already highlighted for
control name, and I'll just say text
control, and then the text domain is
going to be techiepress. So that's
how we save all our instances of
snippets. So if I want to add another
snippet I'll just duplicate this, add a
comma at the end here, then I'll come back
to what we have here as our base, and I
can even just get the whole text control
class, or even just get a selection
control, a choose control, we can add all
these classes inside our snippets so
that we can always have them whenever we
need to. So I'll just add this control
here, which is for a slider. So we come back,
go into the body, check this out
to make sure it's clean, and then we will
just change a few of these pieces and
say, this is slider_, and then
I'll come back, check my code, go to the
end, add our closing bracket with a comma,
go to the beginning, add our opening
quotations, oh we didn't add this to this
point, so I'll add our quotations
here with a comma, go home and then add
the opening quotations, and for this last
piece I'll remove that dash, I remove this dash
here as well, come back and escape this
as well as this and save. So we have a
couple of problems which we need to fix.
That is because in our body here we
opened and then closed this wrongfully.
So I'll save this after making those
changes,
press my F5 to test, we can test again
and then we say, we'll add slider, and then we
get the full code edited here. So we can
make these dynamic, and these dynamic, and you'll
see at the part where we escaped our
strings we still have our slash coming
in, so we don't affect the namespace of
Elementor. Now this is just a sample to
show you what's happening. I have the
full code of working on this on my
github which is here, if we go to bahiirwa/
elementor-snippets, and you can make a PR
suggesting any new snippets that you
want to have in that Elementor snippets.
The reason why I would ask for PR is
because I'm just starting this project
and there are just a few hooks and controls
and categories that I've added and main
classes, so those would be helpful. The
next thing we are actually going to do
is actually publish our snippets. So
we'll close this off, open our snippets,
we're going to package our extension for
publishing on the Microsoft website. So
we come back into our snippets folder here,
I'm going to overwrite all of this by
pasting, then I'll explain what
everything does. So we have our name here,
we have a display name that usually
shows in the extensions part, so if I go
to this, this is the display name that
we're talking about, we have the
description which shows up always here
the bottom, then we have a version number
that will show, that helps vs code
to track whether they should update the
package, or they should ignore it because
you have the current one, the engine I've
chosen for vs code to be 1.18 which is a
good version, then you add the publisher
name. Now this publisher name, you get it
as you register for an account with
Microsoft. So you're going to go to the
extensions, you're going to go to marketplace
.visualstudio.com/vscode, and then
you're going to actually sign up, but in
my case I'll be signing in into my
account. So you can sign in even with
your github, I can now always open this
with my github easily. So in here we
shall publish our extension. But let's
first go and finish up, so we add our author
name which is my full names, but the
publisher name we actually get it when
we set up our account.
So we add a license for which
we are releasing this, we had a homepage
for our site so that people can always
click and go to see where they can file
issues, that's why this bugs is here, we
see also the repository, so I just set up
everything on github to make it easy and
manage, then we add an icon, this could be
PNG or whatever it is, and you will see
that inside here, I need to create a new
folder called images, and add this
particular logo in here. Then for the
keywords, these help for the person
searching for the extension to find it.
So you put things that are as close as
possible to your particular extension. So
you add the keywords here and separate
them with commas, the category is that
it's a snippet so you leave that fine,
and then you can always add extra files of
snippets by just duplicating this, and
then adding a comma, rename this and then
add those other files inside your
snippets here, with a different name of
course at the end here. Or you could group
them depending on how you want to do
your file structure, so I'll undo that and
save. So this is what you need all in all.
Now the next thing that you
need to do is come back to the docs here
and say, I am now ready, my snippets are
working well, I've tested them with
pressing F5, now I am ready to release
that extension. So you come to publishing
your extension. The first thing that you
need to do is again to install using NPM,
you install vsce, which is going to
help you to register your extensions. I'll come back
npm install - g vsce, this takes a while
so I'll fast forward to the end, and then
that is done, when we come back here we
are already logged into the directory of
our snippet. The next thing that we are
going to do is we're going to type vsce
package to generate a file for us. So
I'll do the vsce package, so you always do
this whenever you're making a release of
your package, so just change the version.
If you update something, either it's a
minor change or a major change, this is semver
versioning, so you make the changes here,
and then you come and do vsce package.
Once you hit enter,
you'll see that they ask you to make an
edit of your readme, because by default they
have scanned and seen it's the same.
So my readme is still the same, it's
default, I'm just going to paste some
things here that I had worked with, save this.
Then come back and do the same thing,
vsce package, click package, and we'll see
they're telling us of course this is not
there, the extension - images is not
there, so for now I'm going to 
need that to be working, so come
back here copy this, come back and create
a new file, paste that in, press Enter, and let's
assume that is working fine, we can
put a PNG file in there. So I'll hit
enter, and you'll see that we have a release
of our file here. So I'll open this in my
folder, I'll reveal it in explorer, and then
come back to our Microsoft and we'll
click publish extension. And when we come
in here, we have an option to add our new
extension or to actually update. So we
click new extension, click visual studio
code, then we are going to grab this, drag
and drop our file in here, and once we
are done we click upload. So when that is
uploaded, we will see that our extension
is actually showing up here, and then the
public is ready to consume this
particular extension that we do have. So
when we go to the marketplace and we
search for
Elementor, just searching like that, we'll
actually see this showing up, and it will
show us the number of people who are
using it. When we click on it we'll see what
we said in our readme file, we're able to
see which report our issues, where the
repository is found, we can download this
direct, everything is set up for us and
it's that easy to install. The other way
you could find this extension is by
going to the extensions panel inside your vs
code, search for Elementor if it is the one
that you want, and then you'll just click
and install the plug-in right there, and
then this will be ready for use, and you
can use it to develop your Elementor
widgets. So thank you for watching this
video, I hope to see people to make more
widgets that are helpful to others, and
check this out, download the meta
snippets if your WordPress developer
like I am, you can just check out the
Classicpress, I've developed a Classic
press snippets, that allows you to
just have WordPress
snippets there for you. So you can have
the auto completions, like for example if
you want startup and you plug in this
gives you the small starter that you
need to go right ahead. So let me know if
you're using these extensions, if you're
developing your own, and share with your
friends the video. Give a thumbs up if
you found the video very helpful, and
leave a comment if you have any
questions.
