(audience chatter)
- All right.
I'm actually gonna just ask some questions
while were getting the visual up.
How many people here aresensitive cell developers,
WordPress developers?
(cameras click)
Great, okay.
Advanced developers?
Hi everybody, awesome.
Beginners?
(chairs squeak)
Okay.
Designers, theme developers?
Great.
This is for you, all of you.
All right, so,
let me give you a littlebackground real quick.
(quiet crowd noises)
we kinda initially set out to build
a contact manager for WordPress.
There are all sorts ofcontact managers out there
and there were others that we built.
But we wanted to build one
that was more flexible and easy to use
and very powerful.
And as we were buildingit, we started realizing
that were building an application manager.
Something to actually build applications.
What's the differencebetween a contact manager
and an order management system
and support system?
It's just data, and fields, and logic,
and post statuses and all this stuff.
And we were like, wecan deal with anything.
So we ended up buildingan application manager,
this is what Piklist turned out to be.
So I wanna go over the overview.
I'm gonna give you alittle about Picklist.
Then, we do a demo of theorder management system
that would be built for a client.
I'll give you an overview of Picklist,
but really just touching on it.
Piklist is incredibly powerful.
Then we will go throughsome code snippets,
and then stay close for Q&A
'cause not only is Piklistincredibly powerful,
it's incredibly easy foryou to develop with it.
Really, really simple.
So, a couple things.
There is a bold statement, okay?
We want Piklist to be whatjQuery is to Javascript,
what Django is to Python,what CakePHP is to PHP,
and Ruby on Rails is to Ruby.
Okay, that's what we want Piklist to be.
We want it to be a rapidWordPress development platform.
You build WordPress websites,
more powerful WordPress websitesthan you're building today,
easier and faster.
That's what we want.
We want to be the first plugin you install
when you're building a WordPress site.
Big statement, bold statement.
Hopefully you'll leavetoday agreeing with us.
So what is Picklist? Piklistwas built for businesses.
I'm sorry, yeah, it wasalso built for businesses.
We're gonna be launchinga suite of products.
So right now you have a Piklist plugin
but you may have a PiklistCRM plugin that will develop,
and a Piklist Order Management plugin,
a Piklist forum plugin.
And the benefit of this isthat they're all customizable.
You're gonna be able to customize it.
But they all work together.
So you had an ordermanagement system on your site
and you use it for six months
and started realizing where's all this,
you know, am I reallykeeping my customer data?
You can just install the Piklist CRM
and they'll work together.
And now, all the suddenyou have a CRM interacting
with your order management system.
And if you wanna add a support forum,
that's now interacting with your CRM
and order management systems.
So they all work togetherwhich makes it very powerful.
Right now there are these plugins
and things that are outthere in the WordPress world,
but they don't alwayswork together very well.
So the ones that we'regonna be launching first.
We're gonna be launching contact manager
and the order managementsystem, that you'll see today,
notifications and logging,which works really well
with the order management system.
Notifications meaning an email goes out
when something happens,
and logging, keeping atrack of what is going on
on your website every timesomething gets changed.
And a portal, and easy way toallow your users to register,
create accounts, managetheir own user data,
and interact with the CRM,
order management system, and Portal.
So let's just go through the demo here.
So this,
this is the order management repair form.
At this point in the process,
we're assuming that the useralready registered for the site
and created a customer account.
We don't wanna go through that right now.
Use a logic and you wanna create an order.
And they get to choose anorder type, as you can see,
conditional fields open and close.
This order type field, by the way,
on front end, is a taxonomy at WordPress.
If you log in to back end,you'd see check boxes.
In Piklist it can be anything:
drop boxes, radio boxes,check boxes, date field,
color picker, doesn't matter.
Whatever you want yourtaxonomy to be, it can be.
Users chooses Carbon; thisis for a bike repair shop.
This client repairsbicycles around the country.
People mail their bicycles in, so ...
This is an order, Carbon.
Needs to be repaired, we wanna retrofit,
get some paintwork done,
and they understand theterms and conditions.
And we submit the order.
Same page, form changes, now it's values.
They should see the formchange to values are showing.
So now we're logged inas the repair manager.
Two different users usingthe same exact system.
I manage my orders and I getto see what's going on here.
Custom quote statuses arealso available in Picklist.
No more,
you're not forced to use
draft, publishing, pending.
It doesn't make sense foran order management system,
so we don't force you to do that.
I'm a repair manager, I log in and I look,
oh my look at that I havea repair for an estimate.
Wanna check it out.
I see the order detailsthat's going on over here.
Just to show you thatwas a custom taxonomy,
it was saved as taxonomy here.
I'm gonna give the customer an estimate.
$1,000 and $2,000 as a high estimate.
And this particular clientwanted manual control
over the extensive statuses,
but statuses can be automatic,
they can be conditional,they can work on anything.
They can just automaticallyprogress in order,
they can progress if you're choosing
approve or decline or whatever.
But in this instance, we changeit to a pre-quote system.
It updates; you can see four values
are now showing over here.
Notification goes to the user.
This is the owner, they get an email.
You have an estimate, whydon't you go check it out?
So, owner logs into thepage, they see this.
They see approve and decline.
Remember it wasn't on the back end
because the repair departmentdoesn't approve or decline it.
So they decide this is a great estimate,
and that's it!
It's been approved.
It looks fancy, you'regonna be even more amazed
when you see the code it takes to do this.
It's so minimal.
All right, I'm back inthe repair department.
Repair department gets a notification
that it's been approved.
So now they log in and they note it.
And when the user got his email that,
since he approved it he also got an email
telling him where to ship his bicycle.
So now receiving iswaiting for the bicycle.
When the receiving department receives it,
they check it off.
They have received it.
They update it, they modify it,
let everybody know it's been received.
User logs in ....
Oh sorry wrong screen.
Safari.
Oh, Chrome.
Chrome?
- Safari, second tab.
- Wait a second.
All right sorry everyone.
User gets an email, sends it,
and they know that theirbike has been received by,
by the repair shop.
The repair shop now has to ...
Oh sorry.
Flipping between two browser windows,
not always well applied.
It's in their shipping department,
but in this particularcase it's a big building,
so now the bike has to bemoved to to the receiving ...
to the repair department.
And they receive it in repair.
Now it's in a waiting to quote status.
Now they really quote it.
Put $1,000 and $500 for paint.
And now it's in approval status.
It's waiting to be approved.
Again the form fields are not editable.
They've changed to a value.
We'll have questions after the demo.
(zipper noise)
Safari?
- Yeah Safari.
- Oh, well.
- Safari.
Sorry.
Again the user gets a chance to approve
or decline the order.
They approve it.
It gets submitted.
- Second?
Oh no next.
- Nah.- Nope.
- Sorry, I, oh!
So now by default we have a date field.
In the repair departmentthey usually give a week
to repair the order.
So we set it as a default,
but this case they lookat it and they said,
well it could be easy to add ...
By the way, creating this date field,
really simple.
Show you how to do that too.
It's only gonna take six days not seven.
And then they change it andput it in the repair queue.
And then the user getsanother notification
(coughing)
letting them know to check the site
and that their bike should be repaired
estimated on June 15th.
We're gonna end that here.
Believe it or not this isactually a modified version
of this company's order management system.
It's vast with 30 different statuses,
not the 10 we went over here.
We sorta gave you a little modified view.
But I think you got anidea of how powerful
Piklist would ...
And that was actually avery basic view of it.
Let's take a couple questions on this
and then afterwords Kevin's gonna show you
the code necessary to do this.
But, yeah?
- [Man 1] So just a question about
the customer's responses there,
like changing those radio buttons.
Could they also have aform where they put in the
tracking number for shipping or --
- Absolutely.
- [Man 1] repair shop hooksin that tracking number
automatically when they ship the sticker,
the label, to the person or whatever?
- You should never haveto say can I do it?
- [Man 1] Okay.- Okay it can be done.
Let me take a step back.
This is built on ...
I wanna convert that ...- [Man 1] Is there training
steps too then?
- We'll show you that, yeah.
Most of WordPress is reallyto build on fields, right?
Everything in the back end are fields.
When you're creating apost, it's going in a field.
When you're creating a settings page,
you're filling in fields.
When you drag a widget,you're filling in fields
that you can output to a widget file.
Just fields.
In Piklist it's a fieldad you can assign it,
the same exact field, anywhere you want.
And editing fields isincredibly simple to do.
Yes.
Yeah sure, oh you were first.All right you were first.
- [Man 2] At what point can you ask,
when the client approves,then you ask for a deposit,
partial payment, full payment,whatever your terms are?
(Steve stammers)
What I'm asking is itbuilt in already yet?
- It's a field, so allyou would need to do
is create a field sayingpayment type, right?
As of today we don't have theeCommerce portion built in.
So in this case theyactually call the client
and get a credit carddeposit over the phone.
And then there's a box thatsays, you know, charged,
and maybe a tracking numberof some form added in there.
Like I said we removed a lot of the steps,
but, I mean, I know you kinda do this ...
It can do anything, thisis totally custom built.
Field by field.
Really simple saying when thisfield is filled in, do this.
At this point, do this. So yeah.
- [Woman] So the customer hasto actually log in to the site
every time to get your status update.
They can't get email?
- They can if that's what you want,
that's what your customer wants
they can absolutely get an email.
Emails can be generated doinganything you want it to do.
Pulling any type of information you want.
Yeah?
- [Man 3] Originally you hadsaid that the first launch were
a few plugins like contactmanagement, order management.
Which plugins were you usingfor this demo right here?
- This is actually Piklist's core
and we built it the ordermanagement system custom for it
because the user interface for the CRM
and order management systemis not ready yet to show.
- [Man 3] Okay.
- So we've built this using Piklist,
but the way Piklist is structured,
it's Piklist, you install Piklist
as the Piklist core pluginand then you would build,
you would install the ordermanagement system over it
and it would just interact and work
giving you a lot of defaultfields, values, logic
that you can override but use.
- [Man 3] So is this automatic?
- This is automatic,this is automatic, yeah.
- [Man 3] Cool.
One more related thing.
Can all that be configured by the user
or is there a little bit ofcode that goes along with that?
- We're gonna show you the code.
Eventually there will be a user interface.
A little dragging and droppingand things of that nature,
but right now it's simple arrays.
You know what, but maybe it'slike maybe it's a good idea,
maybe Kevin can show you some of the codes
so you guys can see whatit takes to build this
and then we'll take some more questions.
Go ahead.
- Cool!
All right.
Now you'll have to excuse me.
My window's really small
so I'm gonna have to scrollaround a lot when I do this.
So like we saw in the back end here,
essentially each one of these areas
that we're adding fieldsto is a meta box, right?
However with Piklist,
we don't just think of them as meta boxes
we think of them as groupsof fields, all right?
So one thing that I reallywanna point out is that
we took these groups of fields
and we didn't have to recreate them
to put them on the front of the site.
We just, we used them.
And they work on the front of the site.
So all the sudden,
meta boxes don't have tobe exclusive to the backend
they can be put on the front end, okay?
But let's go ahead and take a look
at what it takes to build a meta box.
Now, first I wanna show you what it takes
to build a meta boxwith WordPress right now
without Piklist.
You have to define actionsto add your meta boxes.
You have to define save post functions.
You actually have to handle the data.
You have to pull the data back out.
You have to render out thefields that go inside meta boxes.
So this is why we see a lotof meta boxes and plugins
that some of them match theadmin, some of them don't.
But regardless, even ifyou wanted just to add
one field like we see here on the codex,
there's a decent amountof code you have to write.
And you have to knowwhat you're doing here
otherwise you could cause some problems.
So that being said, we wantedto make adding meta boxes
quite a bit easier on you guys.
(chair creaks)
So ...
(chair creaks and pops)
So right now in Piklist,everything is either a
object that you configure ora file that you include, okay?
Now right here we see a parts directory
inside of an add-on therewe're calling pik-calfee.
Now, under the meta boxes,you see we have forms
and there's also a couple other folders
that you can take advantage of.
We see a number of files.
Now, whatever you name thefile, it doesn't matter.
We don't care.
What's important for themeta box, just to start off,
is the configuration at the top.
So by default we support allof the native meta box fields
that are in WordPress but we'veadded a number of new ones
to help you create behaviorswith your meta boxes.
Kinda show you some of these here.
We have Type which allows you set aside
as many portal statuses as you want.
We have Locked which
actually allows you to lock the meta box.
I'll show you here.
So repair, for example, I can't move this.
It's not gonna drag.
When you're creating an application,
the form layout's important.
And you don't want usersgetting a different form layout
and confusing themselvesas they see fields hiding
and showing and changingas it's progressing
through the workflow.
You have the ability to set capabilities.
As many as you like.
With capabilities, should beable to see this meta box.
With capabilities, shouldnot be able to see it.
So you notice differentboxes were showing up
at different times in the workflow.
And you have the ability to set statuses.
When these boxes should be showing,
when they shouldn't be showingeven on the Capability.
So you can get as granularas you want in your workflow
when you're hiding and showing
all of these different things.
And we also have New.
Some of these meta boxesyou don't wanna show
when they're initially created form.
For example when wefirst saw the order form
and we were creating it,
we were only showing one meta box out of,
I believe it was, seven.
So it allows us to reallycustomize the form,
when in reality it's one form,
but we just wanna differentparts in different ways
depending upon where you are.
So that's how we add a meta box.
Before I jump into fieldswhich is a little complicated,
questions?
- [Man 4] Why did you decideto do all that in comments
rather than with, like,an array of arguments
it has to go throughto update the function?
- We decided to go with commentsfor some of these things
just to make it as easy as possible.
One of the things wereally wanted to accomplish
with Piklist was to take the knowledge
that you needed to makesomething in WordPress
and bring it down a little bit
so that you don't necessarily have to be
an advanced developer todo cool things like this.
- [Man 4] That was my question.
- Oh.(Kevin chuckles)
yeah I didn't ...
WordPress already hasa great system in here
that grabbed the commentsand pulled the data
and we can just run with it, so ...
Now adding a field.
Let's see here.
We have a global functionin Piklist called Piklist.
This is an example of how we add a field.
This is only,
let's see, about 25% of theavailable options for a field.
But I'm just gonnakinda step through these
and I'll take questionsafter I go over this.
(Steve mumbles inaudibly to Kevin)
All right, so we have Type,
and that's where youdefine your field type.
As Steve said , we have things like text,
radio buttons, text areas, wysiwyg editor,
date pickers, colorpickers, maps, et cetera,
that you can put in here.
We have Scope which I'll come back to.
We have Field, which is thename of the field itself.
So, for example, this fieldis called estimate_low,
which means that's whereour post meta value's
gonna be stored at since that's the _low.
We have the Label for the form.
We have the Attributes to puton top of the HTML element.
Here's a cool one it's on_post_status.
And on_post_status ...
It's not just on_post_status.
We also have things likeon_comment_status for example.
But you can define whetherto not you want the field
to be hidden, you wantit to show as a field,
or if you wanna show it as a value.
You'll notice some of the fields,
as we were going through the workflow,
changed from an actual field to a value.
All right?
And we made it a littlesimpler here, if you see,
with value we don't haveto define everything
between prequote, repair, decline.
With a double dash you canactually define a range
of statuses so you can quicklygenerate these objects.
(chair creaks)
(Steve mumbles inaudibly to Kevin)
Now scope is one of the reallynice things about Piklist.
You can create a field in Piklistfor anything in WordPress:
comments, taxonomies,
posts, post meta, settings.
Anything that's available in the database,
you can create a field to actually save it
to that area of the database, okay?
(coughing)
In this case we're dealing with post meta.
But say if we're building a widget,
the scope would be widget.
If we're dealing with comments,
the scope would be a comment, right?
Now,
position is an interesting piece.
So talk about position real quick.
One of the things we wantedto accomplish with Piklist
was is that we didn't want to tell you
what the form should be laid out,
how it should be laid out.
How a field should be laid out.
We want you to be able tofind your own templates
because the way it should be laid out
on the front of the site iscompletely dependent upon
the way that you build your theme.
So you have the abilityto define templates
on the field level and on the form level.
And they're nothing more than, what,
really micro templates with short codes.
- Yeah that's it.
- In fact, let me go aheadand show you one of those.
So, for example, for a widget here.
That's how you you woulddefine your template
for the widget scope, or for a meta scope,
or the default scope we usefor settings, for example.
And these can all be applied with filters
so that you can really define:
Do you want an unordered list?
Do you want to use Bootstrapand their form layout?
Do you want a definition list?
You know whatever suits your guys' needs.
And that's some of the field stuff.
I'm gonna stop right there.
Any questions?
Okay good.
- Let's show them pik-doc.
- Docs, okay.
- We're gonna show you a couple examples
of some of the corefields that we've built in
that are really a simple build.
Hey guys, one thing Ireally wanna emphasize;
the array that Kevin just showed you,
you know, whateverthose ten lines of code,
you use that same type of array
when you're building a meta box
or if you wanna add a settings page
or you wanna build a widget.
It doesn't mater.
It all really works together the same way.
Yep?
- [Man 5] This is probablygonna be a weird question.
So where you put the double dash
to define a range of statuses,
(Man 5 stammers)
do the statuses have, like, an order?
Is there like a, Ididn't really look at it.
- In Piklist they do.
Even meta fields have an order.
For example, we have an add more field
and as you add more rowsto the add more field,
when you pull that databack out of WordPress,
we automatically make sureit stays in that order.
So even things like statuseshave a defined order.
- Show pik-doc.
- Let's see here.
- Here's the statuses being defined.
So they're just defined in an order.
When you create ...
- [Man 5] So it actuallypulls the order of it there?
- Yeah when your creating your post type,
we just send it to createpost type for post statuses.
- And then remove things actually too.
For example, while we're here,
you can define your own edit columns.
There's post-to-post relationships,
post-to-comment relationships,
post-to-user relationships.
Everything can be related actually.
You can actually default on apost type when you register.
You can say what meta boxesyou want to be available
and what you don't.
So if you wanna get rid ofall the default meta boxes
and have just the publish boxand nothing else available,
you can do that when youregister a post site.
When you register ataxonomy you can make sure
that meta box doesn't even show up.
Say if you wanna define a taxonomy
in a custom field inone of your meta boxes,
rather than using taxonomy check boxes.
Perfect example is what Steve showed
with the drop down for our taxonomy.
And we showed that normal taxonomy box
is an example of howthat's actually saving.
- Okay, log in to ...
- [Man 6] We got one more ...
- Gotcha, go.
- [Man 7] One more question,have you considered
submitting a patch back toWordPress for some of these
extensions on post-op that you've done?
For example this last one.
- Great question, in fact.
We actually have noteson Piklist on things that
we are gonna be submitting as patches.
We would love to see anumber of Piklist features
just get rolled into core and we end up
removing it from Piklist one day.
So we've actually alreadybroken out some of these things
and we have plans tosend a number of patches,
and a number of other things that
hopefully we can share today as well.
- Go ahead and pull up the pik-docs here.
Yeah one of the things, actually,it's really interesting,
we were going through this,
you realize that the publishbox in WordPress is nice ...
It's perfect for, you know, blogging,
but it doesn't really work well
for an order management system
or a contact management system.
And as we were looking at it,
if you look at the postdocs in WordPress core,
it's actually, most of it's hard coded.
It's not a lot of hooks or filters.
It's tough to manipulate.
So we actually rewrote it.
So the publish docs you seewhen you install Piklist
actually is the Piklist publish docs.
So we registered the WordPressPiklist publish docs.
We registered ours,which is exactly the same
with added features and functions.
The idea is that we're gonna be ...
You may want to not justshow different post statuses
but progress to the next one,and it just wasn't built in.
So that's something else we probably will
submit to WordPress core.
- [Man 7] Patch please.- Let's show pik-docs.
Log in so we can show the fields.
- Oh.
- Show some of the cool fields.
So here's some fields that we,
that we built out thatyou can easily build.
Wait, can I?
You can easily build with Piklist.
So besides my basic textfields that are simple to use,
and text areas, obviouslydrop downs and radio buttons,
but nested inputs aswell can be built easily
with Piklist, as well.
- Something of note is thateverything that's generated
in the backend of WordPress
follows the style guidefor the WordPress admin.
So everything Piklist generates,
looks like it belongs in WordPress.
- Color picker as well.
Color picker's just as easy.
Before when Kevin showed youhow to define a field as text,
date picker, color picker,and this'll show up.
It's that simple.
So advanced fields, andthey show a contact box.
This could be anywhere.
You could put this anywhere you want.
Not just for post content,but anywhere you want.
And then we also have somcolumn inputs as well.
It is as simple as building that array.
- Now to show off howwe build the settings.
One thing of not also is that the tabs,
the settings page itself,is also generated by Piklist
following the WordPress style guide.
So if we take a look at how togenerate out a settings page,
for example, we defineour settings page here.
Everything is defined withfilters and actions in Piklist.
And then we have the ability to come in
and define our settings.
So, for example, I'vecreated my sections here,
and my tabs, and then Igo in and I start defining
what those sections areand what the fields are
just as we defined fields for meta boxes.
So really the only thing thatyou need to be able to do
to get started with Piklist
and create some of these workflows
is you need to know how towork with actions and filters
and you need to knowhow to build an array.
If you can do that you cando quite a bit with Piklist.
Then if you need custom logic,
that's where you would start
writing some of your custom functions.
Any questions?
- [Woman 2] In one of thedemos you had the repair people
fill in something in the meta box
and then go up to thedrop down list and select
update the status to reflectexactly what they just put in.
Can you hook up an eventtriggering mechanism there?
- Absolutely!
In fact the form on the front of the site,
that's exactly what it does.
So they wanted the ability tomanually change the statuses
in the back end, but onthe front of the site,
as they submit,
it automatically progressesthough the statuses.
- So yes those statuses are actually
intentionally intricate.
Most of the stuff you saw today
is all based upon the post status,
the current post status, and field values.
And that determines the next post status.
Like Kevin said, in thiscase the client wanted
total control of the backend.
But that's all elective.
That can all be done with logic.
- So I'll show off acouple other fields here.
We have a date picker that's been put in
and with any field that's Javascript,
you have the ability todefine options on a field.
So you can actuallypass Javascript options
as you define a PHP to configure it.
You'll notice that our date field here
has a different format thanwhat normally comes with
the big query date pickers.
And date query picker isautomatically included with Piklist
and it respects the versions
that are currently with WordPress.
So as you upgrade WordPress
and they automaticallyupgrade the JQuery UI,
it'll maintain that same version.
Here's comments,
but here's one of the thingsthat I think is pretty cool is
there's currently a ticket openon WordPress on the tab box.
Creating a general tabbox within WordPress.
And it actually started in thecurrent version of WordPress.
It's about 30% to 40% done.
So what we did is we wentahead and we finished it
so that you can create tab boxesanywhere in the system too.
On a settings page, in ameta box, inside of a widget.
And these tab boxesbehave just the same way
that the tab boxes for a taxonomy behave.
So when we're in the wide content area on,
say, an admin page but webring it over to a side area,
we see that the tabs go to the top.
And this uses existingstuff that's in WordPress
we just added a fewthings that were missing
from the current version of WordPress
to make all of this work.
And you can have 10 tabboxes in a single meta box.
One of the currentrestrictions with WordPress
is that you can actually put one tab box
inside of a the meta box at a time.
- So this is, just to give youan idea, this is really just,
you know, really just touching basic,
the really basic stuffthat Piklist can do.
I mean and you can use it and face core.
Like if you have a client
and you wanted to add a settings page,
Piklist is an easy way for youto just add a settings page.
If you wanted to build a widget,
it's just really easy tobuild a widget with Piklist.
You know, we can go through it right now
but it's really pretty simple.
In fact not only can youbuild a widget with Piklist
but Piklist let's you group the widgets.
We started realizing that, you know,
the widget area gets alittle bit, you know,
crazy with all the widgetsthat are out there.
And you have, like a contact manager,
you may want your widgetsgrouped in one widget.
So in the back end you would just
drag over the Piklist CRM widget,
and then choose you wannasee the contact details,
copyright details.
All the widgets built into,grouped as one widget.
Keeps the widget area a lotcleaner, groups things together.
And especially when you startadding a lot of widgets to
a big application system it can get messy.
You're looking for stuffand you can't find it.
So this is actually builtinto the Piklist core.
It makes it really easyto do that as well.
I think we have like two minutes left.
So if there's any other questions.
- [Man 8] Are you gonna showsome template integration?
How you get the fields?
How you pull all this off?
- Sure!
- That we can do.
Well let's see how we build a widget.
That's a good way to do it.
- One other thing, we aregonna have a room tomorrow
to show you some developmentso if you wanna ...
It's gonna be a Piklist roomso you can work with us.
- So by default, wheneveryou install Piklist,
any add-on that is a Piklistadd-on or Piklist plugin
and the themes, you candefine widgets in your theme
or in those add-ons.
And automatically, whenthey're activated, which ...
This is a small screen.
There's actually an add-inspage that as you install them
you can come in here, activate them,
disable them, even go inand change the settings.
But once a widget, once anadd-on or theme is activated,
it automatically hasthis grouped widget box
for that particular add-on or theme.
- If defined.- If defined.
So let's go ahead and take alook at some of these widgets.
(Steve grumbles)
So this is a widget that Ibuilt that all it does is
it allows you to choose apost type, a type of example.
It shows the title here,
you just go ahead and you select the title
from a drop down.
We just decided to make a drop down.
You can find a color forthe text that gets outputted
and the date was just toshow you can put a date field
inside a widget easily.
So I'm gonna go aheadand save that, all right?
And when we go to the front of the site,
we can see that it's outputted
and we've highlighted the color.
So I mean there's awidget, nothing special.
But let's see how weactually put it together.
Now when we create a widgetthere are two fields,
two files that you could possibly create.
It's the only time we actually
say we wanna see asuffix on a file, right?
And you don't have tocreate a form for a widget,
you can just create the output, okay?
So, for example, I havea hello-world widget here
and here's the output.
I put a small comment block at the top
it gives me the title anddescription for the widget
that we see in the widget grouping.
In WordPress we havebefore_widget, after_widget,
before_title, and after_title.
So these are standard to WordPress
so we pass those in so you can use them
and make sure your widgetsfollow a theme that they've,
you know, been installed on.
I kick out a title because
I didn't put a title on my widget,
I just want the defaultone, and I say hello world.
Pretty straight forwardfor outputting a widget.
Now here's the outputfor the example widget.
It's the same kind of thing.
And excuse the inline style,
just trying to make ita nice little demo here.
But we make the paragrapha settings color,
and now your settings fromthe widget are passed in
with one of two variables.
It's your choice.
Settings seemed a little more intuitive
but it's also passed in this instance,
for those of us who havebuilt a number of widgets
and are used to instance.
And then we can see over herethat I'm grabbing the title
from settings example because it actually
stores the ID on thewidget, not the title.
That's where they set it up.
Now if you wanna createa form for a widget,
you would just say,
this one's called exampl_php,you'd say exampl-form.php.
And the system willautomatically pick up the form
and it's just defining more fields.
It's nothing else.
So we can see here that I got a select
that pulls in get_post.
And I'll cover this Piklistfunction in a moment.
Then we see down below thatwe defined a color picker
and we see that we'vedefined a date field.
- Okay now I wanna emphasize,look how simple it is
to create a color picker and date field.
I mean that's, you can'tget simpler than that.
(Steve speaks off mic to Kevin)
- And the one thing Piklist,
we have a default function for Piklist.
Has anyone ever heard of wp_list_pluck?
Or is it lesser?
- I believe it's logic.
- Yeah, all right it's a great function.
I believe it was recently putout there on a blog article.
One of the things it does do
is it allows you to specify key
and pull back just that key from an array.
We extended that with thePiklist function and you can pass
multiple keys if you'd like.
In this case I wanna get anarray that has a key with the ID
and a value of the post title.
So that allows me to easily say get_post
and dump it straight into a field
without having to write aloop to generate an array
and then put it in there.
The idea is that we wanna doeverything on the field level
and we wanna keep it in the field
so that we can keep everythingas granular as possible
to accomplish whateverwe want to accomplish.
(computer chimes)
- All right so besides ...
The goal is we are gonna be releasing
this version of Piklist for free
on WordPress.org in the next couple weeks.
We just wanna clean up some stuff.
We're gonna include
a couple of these add-onsthat are in there.
The documents and stuffso you can just go in
and copy out fields
and just manipulate them any way you want.
So you'll have full accessto a lot of the code
to get you started.
And we're also gonna beputting a lot of code snippets
on our website so that you caneasily build this stuff out.
I mean once you get the hangof it, it's incredibly simple.
It really is.
Building that ordermanagement system, honestly,
the hardest part was justfiguring out what to do
and the next step.
You know when you'rereally trying to break down
a flow that's been paper based for years,
it was, that became themost difficult part.
But they worked with us andwe got it up there, so ...
Yeah?
- [Man 9] Is there anywherewe could see the code now
or do we have to wait?
- You can come tomorrow
to the developer room and we'llshow you anything you want.
Anything you wanna see.
- [Man 9] Okay.- All right?
It's not out, it's not public yet.
Okay, yeah?
- [Man 10] You were saying before,
I mean this is obviously all code.
You're thinking about doingsome UI for this as well?
- There will be, yeah, so they'rebuilding out a UI version.
Some drag and drop stuffbecause it does get,
it can definitely get a little bit crazy,
especially when you're buildingout really big workflows.
The one you saw is only 10 post statuses.
But when you have 20, 30 thenit can get a little crazy.
So, yeah, we really building that out,
that's something thatKevin's itching to do, so ...
I just had him focus on this.
Yeah?
- [Woman 3] So related to thatthen, if you, for example,
want to set up that order management field
right now you have to buildit out through the arrays
until that UI?
- Yeah and honestly a lot ofdevelopers prefer to do it
with arrays, right?
They wanna just build it out there.
But a lot of people whodon't and I understand that.
- [Woman 3] I just have no idea on arrays.
- But you would.
Honestly, you just, youknow, you would copy it out.
I don't have it right here,but you would copy it.
And it's actually quite simplewhen you take a look at it.
- [Woman 3] Do you have a checker for if
like you forgot a semicolon or whatever?
- We don't have a semicoloncheck, but actually
one of the things we havehim thinking of building,
if you're logged in asan administrator ...
This is something that I'vebeen working with Kevin on
because there were a lot of issues
while building this stuff out.
If you're logged in as an admin,
and you view any of these pages,
we will try to put some kindof error messages in code
in the comments of the source.
So as you're building this stuff out
you can see things that are going on.
You actually, to be honest with you,
you can write conflicting code.
Something that you want to show up
at a particular post status,
but hide on other post statuses,
and it actually can conflict
and you're like what's going on.
So we will be buildingin some error messaging
that's comments in the source
to really help you figure it out.
Not about semicolons but other stuff.
- And to speak on how users would do this,
we're actually gonna makethe builder such that
when your on a page andyou're looking for a workflow,
you're not gonna go intoanother settings page
and go into a form and have things.
You're gonna do itactually in the workflow.
So if you're on a settings page
and you wanna have a setting,
you'll have button you can click
and you can create the fieldand drop it where you want it.
When you're on a post page,and you wanna drop a setting,
or you wanna create a new metabox, that's where you do it.
So the idea is that wewant it to be just as easy
for non-developers to build out this stuff
as it is for developers.
- If I can work with thecompany ahead of time,
can I do a popup?
(Kevin responds inaudibly)
Okay cool, all right any other?
Yeah, go ahead.
- [Man 11] Things like compatibilitywith membership systems
like s2Member or the ProMember plugin
that I know someone else is demoing here.
- Great question.
- Yes why don't you answer that.
- So one of the nice things about Piklist,
if there is an ability to put a field
into a particular form on another plugin,
all you have to do is drop in the fields.
When a form is submitted, Piklistwill pick up the fact that
there are fields there andit'll process them on the side.
So the idea is that every systemyou create with WordPress,
whether it's a CRM or aforum, or order management,
you just need to getfields into the workflow
so that you can accomplishthe client's workflow,
not teach them the WordPress workflow
or the workflow that you're limited to
when you get the kit in the app.
- [Man 12] So does Piklistjust store the data
in the existing tables based on the scope?
- Yes,
and one of the nicethings about Piklist is
we only create one table with Piklist.
That's it, and it's for our relationships.
There just isn't a better way to do it,
but everything else is thenative WordPress tables.
We wanna stick to the WordPress philosophy
on building plugins,
not adding too much andnot trying to go too far
outside of the way that WordPresslikes to see things done.
- Any more questions?
All right great.
So hoping we'll see youtomorrow and if you get to it,
if you do wanna know when we'regonna be releasing Piklist,
you can go to our front end on Piklist.com
and give us your email address.
So we'll announce and letyou know when it's available.
All right, than you so much!
(applause)