by Adam Preiser updated July 17, 2019

How To Setup A WordPress Staging Environment


Share on facebook
Share on twitter
Share on linkedin

If you find yourself wanting to test updates before applying them to your website, then you need a staging setup for your WordPress websites.

For me, I typically want to test new plugins before installing them on my website, so I use staging all the time.

Video Transcript

In this video to show you the best and safest
way to test different plug-ins and themes

and I’m also going to use this process to
test a new version of Elementor which has

in line editing ministry how to do this the
safest way the way that I do it hi my name

is Adam from where I release
it on the content to help you get better results

with WordPress faster if you’re new here consider
clicking on the subscribe button for video

notifications click on the bell and everything
I talk about I’ll put a link to in the video

description box down below so a new version
of Elementor is in beta and I show you how

to get access to these beta versions and test
them on your website or just test them in

general and to show you how I do it and of
course were to look at some of these in-line

editing features that are coming to Elementor
very very soon so here is Elementor’s page

right here on now they just
recently announced that this beta versions

available so Michelle you how to download
it to your computer first so a quick note

they actually just hit today 300,000 active
installations which is pretty a pretty huge

accomplishment if you ask me so alright so
were on the page right here and you can click

download but if you click on the download
button is just going to download the most

recent live ready to go version it’s not to
get you that beta version that they have made

available to get to that we need to do something
a little different we need to scroll down

and click right here it says advanced view
and then when I scroll down just a little

bit underneath all of these impressive stats
right here says previous versions now if we

go on the drop down here are all the prior
versions and this is for any plug-in or theme

on WordPress you can go here and get these
prior versions of them now in this case were

to get version 1.8-RC1 RC stands for release
candidate so this is a beta but they think

it’s close to being final so they call it
a release candidate and this is the first

version of it and right underneath it here
is the most recent stable version suddenly

click on this and that I want to go ahead
and click on download and it’s now to be on

my computer so now let’s talk about the easiest
way are the best way to start testing this

now one way to do that would be too if you
have say a test of website are ready with

Elementor installed on it you can disable
Elementor deleted and then upload this version

and activated in everything that you’ve created
in Elementor including your settings should

be completely retained or there is this plug-in
I actually was on my website I love it it’s

called easy theme and plug-in upgrades and
what this does is you don’t have to do the

delete or disable delete process if you’re
going to be replacing a plug-in or a theme

you would just go to add new it would realize
a plug-in with the same name is already there

and it will create a backup of that and then
remove it and then put the one that you just

updated or you just uploaded I’m sorry and
installed I love this blog and it’s pretty

awesome for that now what I’m going to show
you how to do is install it with this program

called a local by flywheel and it’s right
here but I’m actually unfortunately I’m getting

a little ahead of myself I’m meant to show
you how you can get beta versions when the

developer has not made a beta version available
now Elementor and most of plug-in creators

what they do is they use a service called
git hub and for example in this example of

Elementor you can type the name of the product
type get hub into Google in its gonna pull

it up on git hub some to go ahead and click
into this I want to try to make some of this

make sense to you it’s to some that’s not
a coder not a developer some of this can be

a little confusing so I’ve actually been using
this version of Elementor before they made

it available on the a site in
this is how I got it you just go to Elementor

get hub it’s gonna take you to this page now
and you scroll down you see a bunch of things

let me show you what the click on click right
here where it says branches so I clicked on

that and then right here is the different
branches or the different versions of Elementor

that are currently being developed this is
public information I’m not letting any secret

cat out of the bag all these developers are
using the same thing so when you do this it’s

going to show you the master branch and this
is what’s available and out right now but

then you have these other branches right here
now in the case of Elementor we are using

this right here this one that eight version
and all you would have to do is click on it

right here and then right here it says cloner
download go to the drop-down click on download

zip and essentially it downloads the plug
into your computer will be a couple extra

files in it they don’t harm anything they
don’t take up any additional space and it’s

totally fine to use the version that you’re
getting directly from get hub now this is

going to be the very most recent version so
the version I downloaded from

was packaged up and put their yesterday but
this aversions can include any fixes from

yesterday to today in real time and you can
click you can actually just scroll down here

and see that it’s making some notes of files
that have been updated and these are typically

things that have been fixed so right here
it says seven hours ago right here it says

12 hours ago etc. etc. to seven hours ago
so this is the actual live development version

of it that codes and fixes and modifications
are currently occurring so all of this stuff

this beta stuff and especially what you would
get right here with him showing you I get

help you probably don’t want to run that on
your life website just throwing that out there

in case you are thinking it’s a good idea
I’ll suggest to you not to use it so this

is how you can see the various branches of
any plug-in that is currently on get hub and

you can just go to Google and search name
of plug and get help and it will take you

to their get hub repository just like you
saw me do here with Elementor also there is

a way of seeing the current issues with the
particular version and opening up issues there

is this tab right here that’s his issues you
can click on it and you can open up a new

issue now this isn’t really a support desk
than they typically have a format they want

you to stick to and you you really want to
do your best to stick to that to make it as

easy as possible for the developer to process
the bug that you are reporting and you can

actually see some of the notes specific to
that version those different versions by going

to Wertz’s milestones and so if I click right
here on 1.8 it’s gonna show me everything

that’s over and relates to version 1.8 now
what’s interesting about this is you you couldn’t

not some plug-in developers they have their
paid version of their plug-ins just sitting

on get hub and they do that on purpose so
that people can have an opportunity to go

there and improve submit code changes and
things like that a good example of that would

be restrict content Pro let’s see marriage
is entered restrict content Pro which is a

membership plug-in and I click right here
and you could literally downloaded straight

off of get hub and that’s because this software
is all open source anyway if the developer

didn’t want you accessing it this way through
did help they can make the get help repository

private and they only open that up to people
that they want to open it up to okay so what

I do and I think the best thing is to install
and test everything in a local development

environment and what I use for all my videos
is this free program they have for PC and

for Mac it’s called the local by flywheel
now I already have this installed and I’m

going to go right now and put together a fresh
clean version of WordPress and working to

test this in line editing on it a note for
future video there is this new plug-in and

service that I’m to be trying called local
sink.I hope and what this will actually allow

you to do is sync between a local install
on your local computer and your live website

so this is something that you can look forward
to in the future so here is my local by flywheel

installation you can see I have all these
different test installations here I will create

them do what I need them for and then delete
them all the time so you can see some of the

stuff I’m currently working on here now all
I have to do is click on this little plus

and then I can give the site a name so I just
named it Elementor in line editing then I

click on continue and then you could choose
your environment I have this custom one is

set up I always recommend clicking on custom
and use an environment where the PHP version

is on seven you could leave the rest the same
or whatever testing you want and go ahead

and click on continue and then right here
it’s gonna say what you want us to set the

username password and email to I have this
set in here by default to site admin password

site admin and then click on add site and
it’s going to do some things it’s gonna pop

this little window up for me on my Mac and
asked me for a password all right I’ve entered

that in them to click okay it is adding it
and you can see right here it’s doing a bunch

of different things and in just a few seconds
I’m going to have a WordPress installation

right now it’s almost on it is almost done
you can see it’s pretty quick and there it

is so here gives me all of my stats and I
can go here and I can stop this different

test insulation if I wanted or I can leave
it started so and here’s some tools I can

look at the database and I can add an SSL
certificate there’s so many cool things that

you could do so here it is to just go right
now if I click on you just click on admin

and it will open up a new tab in your web
browser or view site for me if I click on

that is can open up in a different web browser
so I don’t want to do that so medical right

here and I’m going to go DEV and it’s going
to show my WordPress installation and I’m

going to do/WP admin like that hit enter to
submit take me to the login you saw my username

and password site admin site admin in here
ERM in this full development version right

here you can see.davits literally installed
on my local machine one little side note 1

of the reasons I really like local by flywheel
obviously the price is right it doesn’t cost

anything but it has this really neat feature
right here it says Livelink so I click on

this is can you give me a live link that I
can give someone in the be able to basically

have access to this local installation on
my local machine even though I’m behind multiple

firewalls and routers and things of that nature
cites really cool if you’re working on customers

websites are your developing for clients or
customers you’ll or you’re creating something

and you want to get someone’s opinion you
can use this live link feature okay enough

of that that’s it for local by fly will I
do have a full video on that probably have

to summon to go to plug-ins add new and then
I’m in a go on upload plug-in because I downloaded

it to my local machine so all I have to do
is drag and drop that across and over here

it is this is what I downloaded I’m a click
on in stall now on your to see that I will

have this test version of Elementor on my
website to go ahead and activated another

option what you can do is use a backup plug-in
or migration plug and like all in one migration

I have a video on how to move the website
you can use all-in-one migration it’s a free

plug-in and you can go on your live website
create a backup of it and then restore it

here in local by flywheel and then you could
test the new beta versions on your websites

you know to expect when it goes live anyway
so here you go I have a right here version

1.eights and it’s the release candidate it’s
now live on my website when we go ahead and

put a preferred theme in really quick if you’ve
been following the blog for any time you know

I’m a big fan of the Astra Theme it is made
to work with any page builder and it works

fantastic with Elementor so it’s here in this
popular list somewhere I just need to scroll

down and find it there it is okay someone
I go ahead and install and activate Astra

really quick and then we will test this in-line
editing now I really believe that in-line

editing is a huge feature I want to tell you
why okay obviously there’s the convenience

factor the intuitiveness of it but also I
think were getting to the stage where if you

want to make more engaging blog content you’re
going to want to start creating that in a

page builder before I was always a little
standoffish on it but now with in-line editing

it makes it practical to have longer form
content so imagine before with Elementor if

you wanted to have longform content every
bit of Texas in a little box off to the left

which is kind of a pain in the butt for longer
form content now with in-line editing it’s

going to be ideal for creating engaging blog
posts that are long form content okay some

of the pages let’s go ahead and add a new
page this is call this home and then I would

go ahead and click on publish animal to go
ahead and click on edit with Elementor and

we are now using this beta version so essentially
what in-line editing is is I can drag say

this heading right here and I can click on
it like this and you see I can start editing

it but you see it’s in beta the editing options
of for the words are being cut off a little

bit by the header here these are little bugs
that are going to need to be worked work through

I bet if I duplicated this a couple times
to get it a little lower say right here there

is a more accurate representation so I can
go here and just literally start typing the

way you see as I type here it’s also added
into this box right there this is in line

editing I can highlight a word I can make
it bold and you can see it adds a little snippet

of code to make it bold which really was difficult
if you are new to website building because

you see it needs to wrap this little bit of
code in there doesn’t really show as well

in the headline because it’s controlled by
these style and you can italicize it like

that and you can underline just like that
you see how easy that was I would like to

see more options and maybe adding color on
specific areas let’s see what happens when

I restore one of the templates which you probably
gives a better idea of this in-line editing

and the different modules that it actually
works with now I’m using the free version

of Elementor so I can’t download any of these
Pro templates if you don’t have Elementor

Pro visit that will
take you to a page that I have where I talked

about a course that I will give you for free
if you are interested in purchasing Elementor

so let’s take a look at this right here this
is a nice one for a web developer I’m going

to click on insert like that is good take
a site because it’s downloading it and that’s

downloading the pictures and it’s going to
go ahead and apply this design it to this

page okay and here it is so now let’s see
how the in-line editing works so I can go

here and I can literally just start typing
if I wanted to make that bold you can see

this time it actually made it bold if I want
to make this italicized we got that there

okay so this is a testimonial let’s see oh
my gosh it’s actually working in this testimonial

as well and all the little aspects of it so
if I wanted to change the name right there

it’s working so here’s a headline here’s text
I wonder if it’s going to work one on this

read more Yep looks like it works on the read
more as well let’s see if we can find some

other elements so this is a one of their image
boxes it works here it works on the title

it’s working pretty much everywhere okay let’s
see if it works on the button and it’s working

on the button I’m actually impressed by that
that is actually working on the button as

well and I guess I kinda like how you have
the option of putting the text here and also

in the places where you’re normally accustomed
to putting the text before it they added the

in-line editing you could do that there as
well well this is actually very impressive

first little test with the in-line editing
I actually I’ve been using it for the last

couple of days I downloaded and on get how
the same way I showed you how to do it and

I’m very excited for the future of Elementor
obviously the momentum is there but this in-line

editing makes it ideal for building out engaging
content in blog posts that longer form content

that Google seems to love it’s just gonna
make it so much easier just writing it on

the pages so much more intuitive to do it
that way so anyways I wanted to show you bunch

of things this video I wanted to show you
how to get the beta version I wanted to talk

a little bit about Elementor in its in-line
editing also showed you look at by fly well

and I let you know in the future than I have
a video on that local sinks you can have this

two-way sync of your website it’s great for
testing things also Elementor has a pro version

that comes those templates a ton of new modules
if you don’t have a check out the BP

I have a course on Elementor and it’s going
to be a gift that I give you if you did purchase

Elementor of course go ahead and check that
out as well let me know what you think about

this new in-line editing coming to Elementor
I’m excited about it I am fall falling right

on into the hype that this is going to be
a great great tool and now it’s can it make

sense to use Elementor for blog post let me
know what you think in the comments section

down below thanks watch and see in the next

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.

Join The Conversation

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

  1. This video is mostly a demonstration of Local by Flywheel and Elementor.

    It doesn’t show how to create a staging site and transfer the site to a live site. And it doesn’t show how to transfer a live site to a staging site.
    I would have loved to see how to transfer from a live site to your Local site and back again so you can do development on your home computer rather than on the web. What tools do you use to do this? There are several available. So what is best?

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.