{"id":163184,"date":"2017-03-16T13:00:56","date_gmt":"2017-03-16T13:00:56","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=163184"},"modified":"2018-07-03T12:39:30","modified_gmt":"2018-07-03T12:39:30","slug":"set-up-staging-site-cheap-shared-hosting","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/set-up-staging-site-cheap-shared-hosting\/","title":{"rendered":"How to Easily Set Up a Staging Site for WordPress on Cheap Shared Hosting"},"content":{"rendered":"<p>If you&#8217;re relatively new to developing websites, or you&#8217;ve been managing your own WordPress site for a while but haven&#8217;t delved into the world of web development, you may have heard people talking about staging sites and wondered what they are.<\/p>\n<a class=\"general_big_button\" href=\"https:\/\/wpmudev.com\/blog\/wordpress-host-test-results\/\"><span class=\"text\">Oct 2020: We tested all the best WordPress hosts! Find out how we compare.<\/span><span class=\"button-a-b\">View Results<\/span><\/a>\n<p>You may have heard people saying that setting up a staging site is best practice for testing your site and keeping it secure, but you&#8217;ll be worried that getting a staging site means paying for another hosting\u00a0plan or for more expensive hosting with staging included.<\/p>\n<p>Well, the good news is that there is a way to set up your own staging site on your existing hosting plan, without breaking the bank. This involves creating a copy of your site in a subfolder of your existing hosting space. And in this post, I&#8217;m going to show you just how to do that.<\/p>\n<h3>Setting up Your Own Staging Site: An Overview<\/h3>\n<p>Setting up a staging site on your cheap shared hosting account (and I&#8217;m not knocking cheap shared hosting, it helps millions of people create great websites) consists of four steps:<\/p>\n<ol>\n<li>Create a subfolder of your site and install WordPress in it,<\/li>\n<li>Copy your files from the live site to the new staging site,<\/li>\n<li>Copy (and editing) your database, and<\/li>\n<li>Set up the subdomain for your new staging site.<\/li>\n<\/ol>\n<p>Once you&#8217;ve done this you&#8217;ll have a copy of your site you can use for testing updates and new themes and plugins without touching the live site. Then when you know that new or updated code runs OK on your staging site you can simply activate it or copy it to your live site. Simple!<\/p>\n<p>But before you start you&#8217;ll need to make sure your hosting provides you with a few key things because some really cheap hosting plans don&#8217;t give you all of these out of the box, so check with your provider first. You&#8217;ll need:<\/p>\n<ul>\n<li>Access to the files and folders in your live site, either via FTP (preferably) or through cPanel&#8217;s file manager.<\/li>\n<li>Access to your database, via phpMyAdmin or a similar tool.<\/li>\n<li>The ability to create subdomains of your main domain, and access to cPanel or a proprietary control panel provided by your host to let you do this.<\/li>\n<\/ul>\n<p>Got all that? Great, let&#8217;s get started!<\/p>\n<h3>Creating a Subfolder and Installing WordPress<\/h3>\n<p>The first step is to create a subfolder of your site and install WordPress. There are two ways to do this, depending on how confident you are and how thorough you want to be. The most reliable (but slightly trickier) option is to do it manually, and the second is to use a script provided by your hosting provider, such as Softaculous or Fantastico. These will install WordPress for you in whichever subfolder you specify (and create the subfolder). It&#8217;s much quicker using the second method but can be less reliable as some hosting providers add their own files and settings to the vanilla WordPress installation.<\/p>\n<p>Let&#8217;s take a look at both methods.<\/p>\n<h4>The Quick and Dirty Way<\/h4>\n<p>If you originally installed WordPress using a script, it could make\u00a0sense to do it the same way again, as then you&#8217;ll have a mirror image of your old site. Also if you&#8217;re not confident installing WordPress manually\u00a0(even though it only takes five minutes) you might prefer this method.<\/p>\n<p>Go to your hosting provider&#8217;s control panel and use the script\u00a0they provide to create a new installation of WordPress in a folder called <strong>staging<\/strong>. This will be a subfolder of your site&#8217;s root folder, so when you visit\u00a0<em>http:\/\/yourdomain.com\/staging<\/em>, you&#8217;ll be taken to it.<\/p>\n<h4>The Manual, More Elegant Way<\/h4>\n<p>The alternative is to do it manually, which I prefer as it&#8217;s more reliable. You can either do this via the file manager control in cPanel or by using an FTP program. I use the FTP access provided by Coda, my favorite code editor, but if you want a free FTP program you could use <a href=\"https:\/\/filezilla-project.org\" target=\"_blank\">FileZilla<\/a>.<\/p>\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/filezilla.png\" alt=\"FileZilla download website\" width=\"600\" height=\"181\" \/><figcaption class=\"wp-caption-text\">FileZilla is a free FTP program<\/figcaption><\/figure>\n<div  class=\"wpdui-pic-regular  \"> <\/div>\n<p>Your main folder will be called <em>public_html<\/em>, or it may just show up in your software as the root folder for your site. Inside it you&#8217;ll find your site&#8217;s existing WordPress installation, so there will be files like <em>wp-load.php<\/em> and <em>wp-signup.php<\/em> as well as folders including <em>wp-content<\/em> and <em>wp-includes<\/em>.<\/p>\n<p>In that main folder, create a new subfolder and call it <strong>staging<\/strong>. The URL for this new folder will be <em>http:\/\/yourdomain.com\/staging<\/em>. We&#8217;ll change that later on so it uses <em>http:\/\/staging.yourdomain.com<\/em>.<\/p>\n<p>Here&#8217;s my empty folder in Coda:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/empty-staging-folder.png\" alt=\"empty staging folder in Coda\" width=\"670\" height=\"395\" \/> <\/div>\n<p>The next step is to populate that folder with a WordPress installation and create a database for your new WordPress installation. Go to the <a href=\"https:\/\/wordpress.org\/download\/\" target=\"_blank\">WordPress download page<\/a>\u00a0and follow the steps for installing WordPress \u2013\u00a0<a href=\"https:\/\/wpmudev.com\/manuals\/using-ftp-to-install-wordpress-mu\/\" target=\"_blank\">our video guide<\/a> will take you through it or you can follow the instructions on the <a href=\"https:\/\/codex.wordpress.org\/Installing_WordPress\" target=\"_blank\">WordPress codex<\/a>.<\/p>\n<p>You&#8217;ll now have a WordPress installation in your subfolder and a database that your new installation is using. Here&#8217;s mine in Coda:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/WordPress-installation-files.png\" alt=\"the files and folders of a WordPress installation\" width=\"670\" height=\"523\" \/> <\/div>\n<p>By default, WordPress will give you a clean installation using\u00a0the default theme, twenty seventeen. Here&#8217;s my staging site right now:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/starting-site.png\" alt=\"a new blank WordPress site running twenty seventeen\" width=\"670\" height=\"361\" \/> <\/div>\n<p>This looks nothing like my live site at the moment so I need to copy over files and database tables, which is the next step.<\/p>\n<h3>Setting up the Subdomain<\/h3>\n<p>The final step is to set up the subdomain. This helps prevent anyone from accidentally accessing your staging site from your live site, and keeps the urls nice and separate.<\/p>\n<p>Go to cPanel and find the <strong>Subdomains<\/strong> link. Click on it to see the <strong>Subdomains<\/strong> screen:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/cpanel-subdomains.png\" alt=\"the subdomains screen in cPanel\" width=\"670\" height=\"417\" \/> <\/div>\n<p>Type <strong>staging<\/strong>\u00a0in the <strong>Subdomain<\/strong> field and the path to the subfolder you already created will be auto populated in the\u00a0<strong>Document Root<\/strong> field. Click the <strong>Create<\/strong> button and after a few seconds you&#8217;ll see a success notice.<\/p>\n<p>Now go to your main Settings screen in the WordPress admin screens and edit the <strong>Site Address (URL)<\/strong> field to <em>http:\/\/staging.yourdomain.com<\/em>. Click <strong>Save Changes<\/strong>.<\/p>\n<p>Finally, I recommend that you block access to your staging site by search engines. Go to <strong>Settings &gt; Reading<\/strong> in your staging site&#8217;s admin screens and check the\u00a0Discourage search engines from indexing this site checkbox before clicking the <strong>Save Changes<\/strong> button.<\/p>\n<p><em>Note: it may take anywhere from a couple of hours to a couple of days for your new subdomain to propagate,\u00a0which means you&#8217;ll get an error page when you try to access your site. In the\u00a0meantime I suggest setting\u00a0up a redirect to the subdirectory from the\u00a0subdomain in cPanel, using the <strong>Manage Redirects<\/strong> option against your subdomain in the <strong>Subdomains<\/strong> screen.<\/em><\/p>\n<h3>Copying Files from the Live Site<\/h3>\n<p>So that your site can run all the same themes and plugins as the live site, and has all your images and other attachments, you&#8217;ll need to copy some files.<\/p>\n<p>Open your FTP program and find the <em>themes<\/em>, <em>plugins<\/em> and <em>uploads<\/em> folders inside the\u00a0<em>wp-content<\/em> folder in your new staging site. Delete everything in them. This is so that there aren&#8217;t any extra themes or plugins that have found their way in via your installation, that aren&#8217;t in the live site.<\/p>\n<p>Now go to the <em>wp-content<\/em> folder in your live site and copy the\u00a0contents of those three folders, pasting the files into the equivalent folders in your staging site. I tend to do this by copying everything to my local machine and then copying that across to the staging site. It takes a bit longer but it means you have a backup just in case.<\/p>\n<p>If your site has lots of files,\u00a0go and make a coffee while the files upload.<\/p>\n<h3>Copying the Database Tables<\/h3>\n<p>Once again there are two ways to copy your content &#8211; the quick and dirty way and the more thorough way. You can use the WordPress exporter and importer tools to export all of your posts, pages etc. from your old site into your new site. The importer\u00a0is a great tool as it also imports images that are attached to posts. However, it doesn&#8217;t import any of your settings nor does it import any media that isn&#8217;t attached to a specific post or page.<\/p>\n<p>The more thorough way to do this is by copying the database tables. You&#8217;ll need to use phpMyAdmin to do this, which you access via cPanel.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/cpanel.png\" alt=\"cPanel screen\" width=\"670\" height=\"486\" \/><figcaption class=\"wp-caption-text\">Access phpMyAdmin via cPanel<\/figcaption><\/figure>\n<\/div>\n<h4>Downloading Database Tables<\/h4>\n<p>Open phpMyAdmin for your site and find\u00a0the database for your live site\u00a0(NOT the new staging site). Click on the <strong>Export<\/strong> tab. Click <strong>Go<\/strong>, and a SQL file with your database will be downloaded to your local machine.<\/p>\n<p><em>Note: If you have more than one database on your hosting account or server, you can find out which one applies to this site by checking the site&#8217;s wp-config.php file.<\/em><\/p>\n<h4>Editing the Database<\/h4>\n<p>Before you can import your database tables to the new site, you&#8217;ll need to make some edits to the SQL file you just downloaded. I always make a copy of this file before I start, and prefix <em>copy-<\/em> to its name so I know it&#8217;s the backup.<\/p>\n<p>Open the SQL file in your code editor and replace all instances of the old domain name for the site with the new domain name.\u00a0In other words, replace all instances of <em>http:\/\/yourdomain.com<\/em> with <em>http:\/\/staging.yourdomain.com<\/em>. Using the &#8220;replace&#8221; command in your code editor will speed this up\u2014there could be thousands of instances. Save your SQL file.<\/p>\n<p><em>Note: An alternative way of doing this is by using the <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/search-and-replace\/\" target=\"_blank\">Search and Replace plugin<\/a>, which automates this process. You do this after importing the database tables. I prefer to do it manually as I know that what I&#8217;m importing is correct.<\/em><\/p>\n<h4>Importing the Database to Your Staging Site<\/h4>\n<p>Before you can import the database from your old site, you need to delete (drop) the new tables WordPress has created for you in your staging\u00a0site.\u00a0In phpMyAdmin, find the database for your staging\u00a0site and click on the <strong>Structure<\/strong> tab.<\/p>\n<p>Select all of the database tables. Click on the <strong>With selected:<\/strong> drop-down box, select <strong>Drop<\/strong> and click <strong>Yes<\/strong>.<\/p>\n<p>Still in phpMyAdmin, select the <strong>Import<\/strong> tab and click the <strong>Choose file<\/strong> button. Select the SQL file that you&#8217;ve edited (on your local machine) and click <strong>Choose<\/strong> or <strong>OK<\/strong>. Click <strong>Go<\/strong> and your database tables will be imported.<\/p>\n<p>You&#8217;re done!<\/p>\n<p>Now check your site. My staging site now looks just like my live site:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/live-site.png\" alt=\"Rachel McCollin home page\" width=\"670\" height=\"441\" \/> <\/div>\n<p><em>Note: So you don&#8217;t accidentally edit your staging site when you should be editing your live site (or vice versa), you might want to change your staging site&#8217;s title to include the word &#8216;Staging&#8217;.<\/em><\/p>\n<h3>A Staging Site Will Make Your Development Safer and More Professional<\/h3>\n<p>Setting up a staging site\u00a0will ensure that when you&#8217;re updating your site, you can do it in a way that is safe and avoids creating any errors. It&#8217;s one step better than using a local development site for testing because the staging site is on the same server as your live site, running the exact same software.<\/p>\n<p>From now on, every time you need to update WordPress, or a theme or plugin, you can do it on your staging site first, test that, and then make the updates on your live site. You can do this either by copying the new code across or by running the updates in the admin screens for your old site. Alternatively, you can create a GitHub repo based on change you make to your local development site and then use a deployment tool to push that to your staging site and then to your live site, which is the most foolproof way to do things. But that&#8217;s something for another post!<\/p>\n<p>SaveSave<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re relatively new to developing websites, or you&#8217;ve been managing your own WordPress site for a while but haven&#8217;t delved into the world of web development, you may have heard people talking about staging sites and wondered what they are. You may have heard people saying that setting up a staging site is best [&hellip;]<\/p>\n","protected":false},"author":347011,"featured_media":163316,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557,263],"tags":[9770,10653],"tutorials_categories":[],"class_list":["post-163184","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-tutorials","tag-development-2","tag-staging-environment"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=163184"}],"version-history":[{"count":10,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163184\/revisions"}],"predecessor-version":[{"id":192406,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163184\/revisions\/192406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/163316"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=163184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=163184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=163184"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=163184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}