Beaver Themer Tutorial – How To Create Custom Fields For WordPress Post Types

by Adam @ WPCrafter   |   Last Updated: June 27, 2017
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Video Transcript

Beaver Themer Tutorial – How To Create & Connect Custom Fields For WordPress Post Types

This is good to be the third video in this
video series covering Beaver Themer which

is a new plug-in that is coming out the releases
imminent in the first video I talked about

creating custom layouts with Beaver Themer
in the second video I covered creating custom

headers and custom theme parks and I explained
what the whole theme park concept was in really

trying to give you an idea of how powerful
the feature really is and in this video I’m

going to talk about custom fields and what
that is my name is Adam from WPCrafter.com

where I make videos for non-techies if you
like the content you see in this video I release

videos like this almost every day so if you
enjoyed please consider clicking on the subscribe

button and if you’d like to be notified of
new videos there’s a little L next to the

subscribe button you can click on that and
you too will send you channel notifications

let’s jump in to the whole custom field concept
right here and I have everything organized

and somewhat of a slideshow so that I can
stay on topic with all this material going

on so and my’s slideshow presentation might
be a little jacked up there some weird thing

going on I export them from Keynote and I
put them in my web browser so I will just

do the best with it so anyways custom fields
is a concept that is going to really unlock

some of the power of Beaver Themer in creating
custom layouts and so let’s just talk about

custom fields right now and try to talk about
what that is so essentially a custom field

is this a bit of content that you’re going
to place into a layout that’s all that it

is so you typically when you go to create
a new let’s just say a blog post okay you

have tied a title and that’s a separate piece
of content and you want to place that where

you want to place it you would have the main
content area there and that’s a self separate

bit of content you can put that where you
want it and you might also have a post excerpt

and you can place that where you wanted so
these are just different bits of information

that you can place wherever you want and have
them be separate and that’s all a custom field

is is not really that complicated and there
can be different bits of information in these

custom fields so you can have an image you
can have a video URL so for me I use an embed

code or something like that you have date
ranges there’s all these different field types

and content types that you can place in these
custom fields now there’s really three ways

well there’s probably more than three way
so don’t like flaming down in the comment

section but I want to go over three ways out
that I’m a go over three ways to create these

custom fields and the first thing is actually
already built into WordPress but most people

don’t know it it’s just enabling it the view
of itself I’m in WordPress right here and

I go to posts actually go into this fidget
spinner post when you scroll down you don’t

see down here anything that says custom fields
because you have to go to screen options and

then click on the checkbox that says custom
fields and that box will then appear and here

it is custom fields now you can do that doesn’t
cost you anything is all part of WordPress

you can give it a field name and put some
content in there and then you can link that

into Beaver Themer and place it where you
want in your custom layout that’s one way

of doing it there’s another way of doing it
with a plug-in called advanced custom fields

this is a free plug-in and they also have
a pro version of it it’s actually very inexpensive

by the way so here is their plug-in page on
WordPress.org and you can see a lot of people

are using this plug-in is active on over a
million websites and here is the page 4 their

website right here and tell them actually
throw this into my clipboard is working at

use this plug-in in this video you can read
about it here and then here is the Pro version

me just scroll down to tell you the cost of
the Pro version this is not a necessary thing

to have but it is a nice way of doing this
so you can see it’s extremely reasonably priced

for a single site license lifetime updates
is only 25 bucks and is 100 bucks for an unlimited

license and you don’t have to keep paying
and you probably are going to really need

support for this so it’s probably good that
you can get access to lifetime updates for

this plug-in so such a what this does is it
allows you to create these custom fields but

you can do it in a more elegant way so you
can use it to create field types where you’ll

have some data integrity okay I’m trying to
explain this this the right way so for example

if one of the field types you want is a date
that if you use something like this they’ll

be this pretty calendar fly out where you
can check on the date and Juergen and know

for sure the format of that date is exactly
how you want it because there’s what like

a dozen different ways the formatted date
or time or things like that so that’s one

example right there it also has some really
advanced ways of putting images in there that

you can then use as an image gallery I know
I’m not doing this plug-in justice go free

to supplement maximum inflammation down below
if you have a better explanation of this plug-in

but it just actually show you to show you
about a hard time explaining it but that’s

all right working it’s working to just use
it anyway so there’s advance custom fields

and then there’s another option called pods
and pods is a little interesting in that it

will allow you to make these custom fields
and it but it will also give you the tools

necessary to create custom post types so if
you have a client or at your website and you

want to create your own custom post type will
this plug-in called pods or the pods framework

is can allow you to do that and here is the
page of four pods it’s free and I really wish

they were actually charge some money for because
it’s very powerful tool but this would be

great so say you want to create a custom post
type for a staff directory you can use pods

to do that and set up all the fields and all
that and then you can use Beaver Themer to

create the layout now I think the reason why
pods doesn’t have more active installations

even though it’s like it’s it does a lot of
amazing things I think doesn’t have more than

more active installations because of what
I talked about in the first video were creating

a custom layout used to be very difficult
before Beaver Themer it was very difficult

all custom coding but now that you have Beaver
Themer and you can use Beaver Builder to create

a beautiful custom layout now you can really
leverage the power of a custom post types

so actually in my next video I’m to be talking
more about the custom Pope post types right

now I’m just really talking about the custom
fields but I wanted to add that this doesn’t

pods it doesn’t so if I was creating a website
and I didn’t need a custom post type I would

probably go with advanced custom fields if
I was creating a site where I did want a custom

post type I would go with pods and I wouldn’t
go with advanced custom fields even if I wanted

to add some custom fields to say a post or
something like that now a lot of this is going

to make sense when I actually show you right
now how to use it all and how were going to

use it all to kind of tie all this information
to gather all right so let’s just go for it

ha so let me go and install advanced custom
fields now I’m in a go ahead and watch let

me show you how to use just a create a custom
field without without using advanced custom

fields so I showed you how to show the custom
fields options you just click on screen options

check on the box it’s his custom fields and
then you have a new box down here that says

custom fields so all we have to do is click
on enter new and then we need to give this

field the name so I’m going to name this video
embed so there it is a video embed and then

I’m going to paste and embed code from YouTube
someone go get it now okay and I’m at a pace

and in so there is an embed code for a video
on YouTube and the number click on add custom

field and now I’ve created my first custom
field and I put some data in there okay soma

go ahead and click on updates okay so now
what I meant to do is I’ve got that field

name right it’s called video embed and so
essentially this is a bit of information that

I want to appear in a different place than
if I say put that link in the content here

so because I have it separate I can place
it wherever I want in the post template that

I created with Beaver Themer so let me go
into Beaver Themer right here animal to go

into my theme layout oops I don’t know what
I just clicked on right there you go into

my blog layout right here and I’m in a go
ahead and click on launch page builder and

here we are so this was my post template that
I created in Beaver Themer in fact you should

be able to see it when I click right here
all right there it is so now because I have

this new custom field that has a video embed
I can place that anywhere I want separate

from everything else okay that’s what we have
these custom fields for so what I’m going

to do is use the video module let’s see so
the video type I’m going to choose embed and

this is one of the features of Beaver Themer
I have this little plus right here and when

I click on it like this I can choose post
custom field like that and then I need to

put the name of it and that’s why I copied
the name of the custom fields I just need

to paste that in right there and then click
on save alright so now it’s in their and what

their it is you could see it already pulled
it in just like that now I can do some fun

things with this vinyl wanted to be so large
I can change the spacing I can put some negative

betting I can do some fun things with this
now so let’s actually do some of that when

I saw to go right here on the row why don’t
say pull it up a little like maybe given the

-100 so I have it overlaying just a tiny bit
like that let’s see how that looks Alex fine

all right but it’s a little too large for
me so I’m in a give it a little bit of margin

on the left and the rights not 1500 habit
150 Jericho there we go and their nests there

is there is my video now let’s see I might
want to give this column some background color

to make it stand out a little bit some click
on the ranch here and note that was my video

settings oops I’m going to click right here
and then go to my column settings okay so

let’s give the background color and let’s
choose a color so let’s go with no no see

how it’s given a kind of like a video frame
let’s see here let’s just choose something

about this Argo got a nice little frame there
and let’s see can I round out my corner actually

I don’t know off the top of my head okay so
that’s mine I just want to give it a little

frame there let’s see I could round it out
but I must be mistaken that’s okay and see

that the border and give the border if I wanted
like that as well but I’m not going to art

so there we go going click on save and I give
my video a nice little frame there and you

can you can see how easy that was and it’s
because I use a custom field for the data

when we click on save published changes and
let’s do a refresh right here and see how

different that looks up there it is there
is my video and I’ve got the nice little frame

around it and then there’s my post content
you saw how easy it was to do that now typically

if you want to put a video you would maybe
put your embed code in with the content but

then you couldn’t do something different with
it and that’s why you use this custom field

feature and you saw how easy that was to implement
and it didn’t cost any money really I used

what was already built into the theme there
so now let’s see what it’s like doing the

same thing with advanced custom fields, go
to plug-ins add new and do a quick search

for advanced custom fields like that now I’m
never use the free version I use the paid

version and it’s a little bit ahead of the
free version so the free version is think

on version for the paid one is on version
5 but I do think it’ll catch up here soon

go ahead and click on install now and then
I want to go ahead and activate it and look

at all these little add-ons for that’s pretty
cool to extend what you can do with advanced

custom fields so now when I’m in a do is it’s
can add this new option here this is custom

fields so let’s just go through this together
and this actually my first time doing this

on this older version but the free version
some click on add new in the way it works

is you create fields but you can group these
fields together so it’s kind of organized

and makes sense so for a video post I might
want several fields that I create there might

just want one I can group them all together
that’s the point so let’s just go ahead and

call this video post okay we’ve got that their
animal go ahead and click on add field right

here so many get a label and then and name
okay what I did was I gave it the label video

embed and so this is what I’m going to see
when I’m in my post but right here for the

field name I gave it a different field names
you saw the one that I manually created I

called that video embed so this when I named
it video embed code because I don’t know if

there’s gonna be a clash there if I tried
to name it the same I should find that out

if Yorty know the answer that please leave
it down below in the comment section and this

looks nice now you can choose the field type
and it will only accept that type of information

so say I choose number and I want to number
in this field if someone tries to enter text

it’s just not going to take it and that’s
the benefit of using advanced custom fields

as you can have these field types that will
only accept that type or that format of information

so then when you go to insert it into your
layout it’s going to be a consistent experience

so for this I can honestly just use text I
don’t have to use more than text for this

sums going to choose on text I can write some
field instructions I can make it required

or not and could put a default value placeholder
tasks text prepend append of formatting I

can also limit how many characters it will
accept and then there’s also this conditional

logic now just like in Beaver Themer where
you can assign layouts and things to locations

it’s the same thing with this advanced custom
field so I’m not asking for this video embed

on every post because if the post isn’t a
video post why ask for a video embed it just

can it have a nice cleaner visual experience
when you’re in the back and here of WordPress

so you can choose a post the type if you wanted
to or you could use a post category or format

raw are anything like that so for me I would
probably tag a video post with the tag video

post and that’s how Beaver Themer note apply
this particular layout and that’s how advanced

custom fields can a note to give me these
field options so I’m going to just leave it

on post type right now and I’m in it M&A use
all the but you have some really good targeting

options right here okay so let’s escrow down
you got an order number this is if you are

saying creating 10 different custom fields
how you can order them you can just assign

them a number and then they will order that
way and that’s pretty much it’s on the go

ahead and click on publish hopefully this
works you saw how easy that was okay so now

when I click on custom fields you see it right
there it’s all grouped where it says video

post and I can note just to come right here
for that so now let’s see what happens when

I go into posts okay am to go into that same
post right here on the scroll down and you’ll

see the difference so you somehow cut out
I believe your clunky or there is this opportunity

to makes mistakes up when I did it the native
WordPress way with the custom fields will

look at this announces video embed and it’s
right there and this is going to appear on

every post so all I have to do is paste it
in so this right here is the custom fields

way and this is the advanced custom fields
way someone pasted in and just like that and

I’m going to remove this right there and then
I’m in a click on update in fact I might as

well just hide the custom fields altogether
by going to screen options custom fields so

now when I scroll down I just have my normal
what the blog asks for and then right here

this new custom field I created and you saw
how easy that was and I got my info and there

some go ahead and click on updates just like
that and if you if I do a refresh here you

can see it soon it’s gonna be all jacked up
there it is because I don’t have any data

in that field I need to change that so now
I’m in a dues to go back into my theme layout

and show you how do link in this advanced
custom fields field so let’s see it’s right

here it was my blog layout right here and
then I’m in a go into the page builder again

and were going to see my page template that
I created and I want to get in here so this

is where my video embed code was going to
go home and a delete that will link to the

custom field because now I’m using advanced
custom fields and then am I go ahead and click

on this plus and what do you notice is different
before it only said it only gave me the option

to link it up with a custom field but now
because Beaver Themer knows I have advanced

custom fields installed it’s giving me options
that relate to advanced custom fields so anyways

it’s right here ACF post field summit click
on that and I’m to choose the field type which

was text and then right here I’m going to
put in that field name and actually I haven’t

done this in a little bit I think it wants
well probably wants the field name not the

label so would’ve been video embed codes let
me enter that let’s see if this works I sure

hope it does but I don’t know when you click
on save oh good I did get that right right

so now I can click on done and publish changes
and you can see when I go here, to do a refresh

and you see my video it’s right there and
this is now using advanced custom fields free

plug-in so I guess the main benefit of using
advanced custom fields is all the power tools

it gives you to create these custom fields
and group them and create an easy to visualize

interface in the back and to put the actual
data in and you could put all kinds of different

data type sets the power of it you can put
images and then you can link up that image

with the image widget in Beaver Builder so
there’s all these different content types

that you can add to your website and then
slip it right into one of these layouts let

me show you that again so you can see now
whenever I want to actually hear if I want

to create a new post that’s perfect Emma click
on add new and so what you do you put your

title you put your content in there it is
asking me for that video embed so I can do

everything on the back end and then link it’s
going to link up with that Beaver Themer template

and it’s gonna put everything where I wanted
to go it’s can be consistent every time and

it’s just gonna look perfect and this is the
power of Beaver Themer because you know in

six months I might like the way it looks here
but I might you know say how I want that video

someplace else or I want to change this layout
you going to Beaver Themer you spent five

minutes you make it how you want and then
it propagates across your entire website and

you instantly change the layout of all of
your post that you signed this layout to so

I hope you can see the power of custom fields
I hope this basic demonstration of creating

a custom field also using advanced custom
fields and linking it into Beaver Themer now

obviously you might want to go and take a
look here at van’s custom fields are website

you can see all the different field types
in all the different benefits I think there’s

can be such power in the gallery features
of it there’s a date range is there so many

different options here that you can look at
and especially the pro and I think this one

I mean you look at what you need if you don’t
need what’s in the Pro don’t buy the pro but

you might look at it and say how this is going
to unlock some really powerful solutions that

I can implement on my website and there’s
time-saving options here for cloning fields

and there’s just a lot more to it so anyways
this is custom fields now if you have anything

to add to this conversation and I sure hope
you do go ahead and leave a comment down below

of maybe how you’re already using again advanced
custom fields or any special tips or tricks

with using advanced custom fields or maybe
some more use case scenarios that we might

not be thinking about right now were getting
close to the launch of this plug-in and the

end of this video series in the next video
I’m in a cover actually creating a custom

post types and I’m to be using pods in that
video tutorial also show you some of the other

options for creating custom post types hope
you’re enjoying this video series and you

consider clicking on that subscribe button
and I will also put the links to everything

in the video description box down below

Adam @ WPCrafter

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Leave a Comment

Your email address will not be published. Required fields are marked *