How To Create Custom Content Shortcodes To Make Website Setup & Changes Faster

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

Ok so this is a bit more of an advanced topic, but it is super easy to do.

In this WordPress tutorial, I am going to show you how to create custom content shortcodes to make is very easy to change content pieces that you have on your website.

I know, sounds complicated, but it is something that will be a huge benefit to you and is super useful.

Video Transcript

In this video to show you how to create a
custom settings panel for the website save

you design for your customers is to make your
life that much easier hi my name is Adam from

WPCrafter.com were I make WordPress videos
for non-techies and if you find value in this

video I’d like you to maybe consider clicking
on the subscribe button if you want video

notifications there’s a little bell off to
the right of that button click on that and

you too will notify you when I have new videos
so what am I talking about here I’m talking

about making your life easier you know a lot
of times what happens when you create a website

for someone else or maybe even for yourself
and six months or year is gone by you don’t

necessarily remember how to change certain
things that you wanted to change here is a

perfect example say you set up a website for
someone or maybe it’s for yourself let me

get back to that and you have your content
on all of these different pages and say for

instance you have your phone number in various
locations on your website all throughout the

website and then your phone number changes
and you need to update it but you have it

in so many different locations you really
don’t know every place that you have that

phone number and the same could be said of
business hours addresses or any kind of information

that is the same but you can use it over and
over again in a website so what I’m to teach

you how to do in this video is create a custom
settings page in the back end of WordPress

we can name it whatever he wants and that
will create these custom fields that we can

put this information and then you use a short
code everywhere in your content to display

it dynamically in the beauty is if you ever
need to change your phone number all you have

to do is go to that settings panel change
it right there in it will change in every

single location that you put that short code
in an obviously this has a lot more uses as

well now this is not page builder specific
it will work with any page builder WordPress

theme that you’re using so let’s get started
now what were going to use for this is something

called PODS PODS is a WordPress tool that
I’m to be using on a series of videos and

this probably is the first one I might’ve
talked about PODS a few times before it allows

you to much extend what you could normally
do with WordPress and it’s so crazy simple

to use and it just really an amazing tool
in the best thing about PODS as well is its

open source there is no cost to it although
they do have a way that you could support

them I am happy to be one of their supporters
I send the money each month to help the development

along PODS is pretty darn amazing so here
I am on a WordPress installation all you have

to do is go to plug-ins now I’ve already installed
all these plug-ins because I wanted to save

time so what you would need to install is
just PODS right here PODS custom custom content

types and feels okay that’s the name go ahead
and install that now later in this tutorial

I’m also going to show you some neat things
you can do with PODS if you happen to be using

the Beaver Builder page builder that just
happens to be some specific integration that

a Beaver Builder user built with it to make
some things a little easier but if you’re

using a different page builder it doesn’t
matter your to be able to use PODS perfectly

fine so what PODS does is it allows us to
create custom fields it allows us to create

custom post types and it also allows us to
create these custom settings panels so in

this video I’m only going to show you the
setting panel and the custom field portion

of it but it does so much more and you really
should start getting comfortable doing more

with your WordPress website and PODS is really
the tool to do that so once you’ve installed

so once you’ve installed PODS on your website
just go ahead and click on it in the near

and come to the screen here that says add
new working to do is working to click right

here it says create nuke is working to create
this custom settings panel some go ahead and

click on that and versus can essay the content
type now what working to do is choose this

option that says custom settings page in some
other videos I’m to talk about custom post

types and custom taxonomies but we don’t need
to get into that right now were just minutes

get our feet wet using pods in order to create
a custom settings panel someone to go ahead

and click on that now what we need to do is
we need to give it a title and name and a

label for the menu so essentially I’m going
to have this ascending page appear over here

it’s going to go actually write down here
below and we get to pick a name for that so

when I my dues on Mexican adjust name of both
of these business info now you can name it

whatever makes sense to you that the first
thing I thought was what I name it settings

but we arty have a settings summoning the
business info now you can also place it underneath

settings or underneath appearance with this
option right here so by default it once added

to the settings menu so would appear in here
but I want to go ahead and make it its own

menu item by choosing this option right there
so I’m a go ahead and enter business info

for both of these but you can name it whatever
you want so there it is I’ve chosen business

info for the page title and for the menu label
him to go ahead and click on next step and

it’s going to go ahead and create this for
me it is can it take me to an area where I

can start creating these custom fields now
first before I create my custom field you

can see right there underneath the settings
we have it listed right there business info

now you can move this up higher if you wanted
and we can change this icon so what we would

do there is we would click on admin UI right
there and here’s where we can manipulate the

position of where it is on this list and here’s
where we can choose a different menu icon

so let’s go ahead and choose a cool menu icon
so this is linked up with ’96 icons and I

can put a link down this below I’m actually
surprised there’s no link in here for but

that’s okay I’ll put a link down below we
can choose any of these icons that we want

so let’s go ahead and pick something that
we think is cool this is like settings right

here maybe this home when I choose the home
like that so I’m in it actually that might

Artie be used in WordPress I want to go ahead
and use this right here okay so I click on

it and all I need to do is highlight right
here and put this into my clipboard okay then

it’s in my clipboard I just need to go right
here to menu icon and then paste that in like

that now when I click on save pod this icon
should change it as soon as the page refreshes

and it is refreshing right now and there it
is now we have that cooler icon if this is

a website you’re delivering to your customers
I’d also recommend changing the eye at the

location here are the menu order in putting
it up may help actually were using that same

icon appear that’s okay you get the idea so
I want to go ahead and create a custom field

right now all we have to do is click on add
field now you could would suggest maybe just

creating a series of fields there in this
example maybe business name business address

maybe business phone number fax number or
business hours or anything like that that

you think your customer or you might want
to change but have a real easy way of doing

that and another perfect example of a good
use case scenario for what were doing in this

tutorial is also if you’re selling websites
to people and you’re starting off of the templates

is that you build it all out you put the copy
in there but all you need to change on these

websites is just these personal bits of information
the business name the the phone number the

business hours things like that you can actually
use this to crank out websites in no time

because you’re just changing it in one location
so for a custom field all we have to do really

is a three things we need to give it a label
and then this name right here’s can automatically

populate and then we need to choose the field
type right here so all of the field type something

to do in this video are going to be just the
plain text but there’s different field type

so there’d be the website a phone number and
email address now the difference between the

phone the field type and the plaintext is
if you choose phone it will only accept a

properly formatted phone number so you have
that ability to make sure what goes in is

the right thing same thing goes for email
addresses and we have these other different

custom fields that I will be going into more
detail and other tutorial videos so I’m in

a leave it at plaintext now want to do some
nukes create two fields to create a business

name and I am going to create a phone number
field okay have already created the business

name field and I filled out the information
here for business phone I’m going to choose

the phone field type know what happens is
right after you put a label in and then you

click out of this field it’s automatically
going to populate this this right here where

it’s his name because it needs to be a certain
format everything needs to be lowercase and

there needs to be in_instead of spaces and
we will actually be using this little bit

of information when we go to actually display
it so you can see the same thing happen right

here for business name I entered business
name in that it automatically formatted it

like that for me okay someone to go ahead
and click on add field right here and there

we go I have my two fields very easy I would
go ahead and click on save pod and as soon

as this gets saved, go ahead and click in
the business info and will put some information

in there so click on business info right now
and you’re gonna see we have those two custom

fields now you could make this be as extensive
as you want in fact you can actually create

an entire homepage where you’re using the
information that someone can input right here

and it will automatically populate on the
front page some to go ahead and put some information

in here right now okay so I go I’ve already
gone ahead and put a business name and a business

phone number click on save changes and so
now that information is going to be in there

so now what we need to do is generate the
short code that you can replace all throughout

your website to display the value in each
of these fields and it’s actually very easy

to do some to go to pages and the let’s go
ahead and add a new page in American a style

later or anything like that I just showing
you how this works in this video some to go

ahead and put a title in here okay put homepage
in there and we need to do is generate the

short code in the morning to be able to copy
and paste it wherever we want some going and

click on PODS a short code and it gives us
all of these options here but what were going

to choose is this option here that’s his display
of field from a single pod item so go ahead

and click on that and right here you can choose
all of your pods we only created one pod and

that is the business info pod so let’s go
ahead and click on that and then right here

is where you would take that name for the
field so for business name what it did is

it made it all lowercase and replace any spaces
within_now you can go back to the PODS area

to get that name but I really know what it
is home to go ahead and enter it now so go

ahead and put that in I entered the business
name on the click on insert and this actually

happened to me and I may show you how to deal
with it it’s basically saying we need to put

something in for ID or slug so I’m go ahead
and click okay and I’m at a pace the same

thing in right here the same business name
and go ahead and click on insert and so what

this is going to do is it’s going to generate
this entire short code here that you can use

over and over but I’m in a let you know you
can actually words as slug in this business

name you can get rid of this if you didn’t
want that there and so now we know the format

so for the business phone number working to
just use this same format the name is business

info in the specific field we want to display
his business phone so I want to go ahead and

copy this into the clipboard and then I want
to go here I’m in a pasted in and I want to

change this from name to phone which is the
name of the other field summa go ahead and

click on publish now and I’m in a show you
what it shows on the front end of the website

you can see it is showing it perfectly here’s
my business name in here is that phone number

now what you can do is you can take the shortcodes
and anywhere you’re gonna show the business

phone number you could put that short code
in instead so that way in the future if the

business owner or your customer or you want
an easy way to change that little bit of information

anywhere on the website this is how you would
be able to do this thing about it just creating

a template and website with with proper paragraphs
and copy in there and you have it all short

code base so you can duplicate that for customer
and just change a couple fields in the website

is ready to go it’s pretty amazing what you’re
able to do so that is going to pretty much

work in any page builder you can take the
short code and it will work in any page builder

to work in Elementor to work in Beaver Builder
to work in Divi to work in any different page

builder that you might be using so right now
initially how easy it is to do this with Beaver

builder and Beaver Themer so I want to go
ahead and click on actually don’t need Beaver

Themer anyways, go ahead and click on page
builder right here and it’s can open up and

builder Beaver Builder 2.0 which I have installed
so I actually haven’t gone into it yet so

what I’m going to do some and click on the
plus and on the new say choose the I want

to go ahead and choose the heading some to
drop a heading right there and it’s going

to pull this up so instead of generating that
short code all I have to do is click on this

little plus scroll all the way down and we
have these options for PODS now what we want

to do is display one of the settings fields
some of the go ahead and click on connect

and then I’m going to choose these the setting
feel that I want and so it knows the only

setting panel I created was that business
info one and so it shows me all the available

fields on the go ahead and click on business
name, go ahead and click on save and then

I would go ahead and click on save again and
there it is it’s a little easier using Beaver

Builder because of this add-on that is available
for PODS and for Beaver Builder let me go

ahead and click on done and click on publish
and then I’m in a go ahead in just in case

I want to show you the name of that add-on
go to plug-ins it is PODS Beaver Themer add-on

now all now PODS and this add-on right here
are available in the WordPress repository

could just go to plug-ins add new annual see
them all right there so anyways in this video

I just wanted to show you how simple it is
to create these custom professional settings

panels that you can put information in and
display them where ever you want dynamically

on your website now in future videos on the
show you how to create custom post types custom

fields for those custom post types to display
the content in those custom post types and

I’m also to show you how to link custom post
types together you can do so much with PODS

it is a very amazing add-on plug-in that you
can get for WordPress there are a ton of very

creative uses for it that will allow you to
do more with your WordPress base websites

so if you have any specific questions about
pods that you’d like me to cover in one of

these videos go ahead and please leave it
in the comments down below or if you have

any creative ideas that you’d like to share
with the community here that you can use this

custom settings panel for I’d love it if you’d
contribute and enter a comment down below

I’d love to hear your ideas of how this could
be leveraged as usual I have links to everything

down below to PODS their website Beaver Builder
Elementor my website also put a link down

below to that thank you for watching and I’ll
see you in the next video on PODS

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 *