Convert a Bedrock website to a vanilla WordPress website using cPanel

 

‘Convert a Bedrock website to a vanilla wordpress website using cPanel’ is a question that, until recently, I did not know how to complete or know anything about. It took a lot of google searching, trial and error and frustration to achieve this website design project so I have created this post in the knowledge that it will help someone, somewhere. In order to convert a Bedrock website to a vanilla wordpress website using cPanel

What is wordpress bedrock website design?

As per Bedrock, they define Bedrock as “not a theme, it’s a way to install, configure, and manage WordPress with security and modern development practices in mind.” One of the key differences between bedrock website design and vanilla wordpress design is the folder structure. Bedrock website design is a WordPress boilerplate with modern development tools, easier configuration, and an improved folder structure. Sometimes, people just like vanilla wordpress and that’s ok too!  There are many reasons why you might want to change a bedrock website design to vanilla WordPress website design. Some of these reasons follow…

Key reasons you may want to change a bedrock website design to a vanilla wordress website:

• You are not comfortable working on the command line.
• You do not have shell access to the server
• Your hosting is shared hosting (see above)
• Your PHP version is less than or equal to 5.5 (not good practice, but worth noting)
• You do not have or understand Composer.
• You do not have Ruby and gem environments on your machine to perform deploys.
• You or your client are more comfortable with vanilla wordpress rather than bedrock

Summary on what is needed convert a Bedrock website to a vanilla wordpress website using cPanel

Although there are probably an infinite way of carrying out the migration from Bedrock to Vanilla wordpress website design, the following steps are the steps that I found to be beneficial. It is likely that there will be more changes needed as different installations may be setup in different formats but if the following steps are carried out, it is likely that you will be most of the way there. You might need to do some troubleshooting at the end to see what is not working and resolve more. That said, the following guide will be an very good start!

The steps needed to convert a Bedrock website to a vanilla wordpress website using cPanel:

1. Understand the bedrock website design structure
2. Install a new version of wordpress on your server
3. Create a database (to hold your bedrock database information)
4. Export your website designed with bedrock database
5. Import your bedrock database tables, into your new database
6. Replace your new wordpress installation files with your bedrock website files
7. Update your wp-config file to point to the database that now contains your bedrock database tables
8. Change the references to the old structure / domain on the database
9. Update theme files to ensure that css files, js files etc. are referenced correctly.
10. Test and tidy

1. Understand the bedrock web design structure

Understanding the bedrock web deisgn structure is paramount to making the move. This is a key difference that stops the normal process for migration of a wordpress website and means that wordpress plugins usually used for migration such as backupbuddy will not work as they should.

Bedrock stores website files in a different structure to vanilla wordpress website deisgn. This structure is likely to look like:

The key differences to file structure to understand in vanilla wordpress web design is that conventional wordpress stores the necessary configuration files in

MyVanillaWordpressSite/wp-content/

Websites designed using Bedrock stores the necessary configuration files in

MyBedrockWordpressSite/web/app

2. Install a new version of wordpress on your server

In order to begin the migration, one way of carrying out this process is to start with a fresh installation of vanilla wordpress to hold your files from bedrock. This may not be necessary if you already have a website that you plan on using to  install all the bedrock files, database and dependencies to but in the interest of giving s narrative that is the easiest to understand, this tutorial will step you through the process of working with a fresh wordpress installation – via Cpanel. This process may also be different if working with local host but I will assume that you are confident on carrying out an installation of wordpress as a bedrock to vanilla wordpress task is usually something that someone that is very comfortable with regular wordpress installations! If not, check out wordpress for their installation guide.

3. Create a database (to hold your bedrock database information)

This step also may not be crucial for someone that is very experienced in wordpress but I find that it is easiest to create a new database rather than using the database that has been created from your wordpress installation. Using a new database allows for better troubleshooting and will also mean that you have a blank database to import your bedrock database files to. This step ensures that you do not have to delete tables or overwrite tables etc. as this can cause big issues if your migrated tables have different prefixes or part of the overwrite doesn’t work as it should. In my opinion, just easier. To create a new database and user using cPanel, just use MySql Datbase Wizard. This will allow you to create the database and database user, assign the user privileges (probably all) and assign a password for same.

Just remember to note the database name, user name and password.

4. Export or retrieve your bedrock database

To ensure that you have all the information stored on your bedrock database, it is important to export it in its entirety. This step is completely reliant on how the system is setup. To export from cPanel, just go to MyPhpAdmin, click on the database and choose operations, export. This will give you the database in SQL format which makes life a lot easier for the next step. You may need to request the database from the old host or client. In all cases, it is very likely that you will retrieve the database in SQL format.

5. Import your bedrock database, into your new database

This step (as noted above), may differ if you chose to overwrite an existing database as you may have to drop tables etc. For clarity, we will work with the fresh (empty) database created in step 3. To import sql format database, a blank database is needed or you will get an error stating that you need to choose a database to import to. This is because the sql format usually stores the structure and tables, rather than an actual database. To import to the new database:

cPanel–>phpMyAdmin–>Click On The New Database–>Import (choose your file, click ‘go’)

6. Replace your new wordpress installation files with your bedrock website files

Replacing your new fresh (new) wordpress files with your bedrock website files is paramount to the migration progress. As noted in point 1, the structure is different so it is important that choose the correct files on your bedrock installation and place them in the correct directory of your vanilla wordpress installation.

My approach:

Delete all files from MyVanillaWordpressSite/wp-content/

(note the trailing slash so ensure that you are in this directory and that you keep the upper level folder called ‘wp-content’)

Copy all files from:

MyBedrockWordpressSite/web/app/

Note that I am in the ‘app’ folder

Paste all files from MyBedrockWordpressSite/web/app/ to (your now blank directory) MyVanillaWordpressSite/wp-content/

Note that to do this, you may need an ftp system such as filezilla or you can do this through cPanel–>FileManager. If you are using FileManager, you will need to zip the folders prior to upload and then unzip them on the server as this will allow you to upload folders than contain sub folders and files.

7. Change the references to the old structure / domain on the database

The database will hold certain information that directly references the old (bedrock) website files and also the location of the website. It is probably likely that you are creating a protype version (staging) prior to going live so it is important that some changes are made so that your database knows the new address.

There may be more instances that need changing but most commonly, these are:

tablePrefix_options

tablePrefix_postmeta

tablePrefix_posts

There are lots of sql commands available that can be used to update the old url information to the new url information such as:

UPDATE wp_options SET option_value = replace(option_value, ‘oldurl.com’, ‘newurl.com’) WHERE option_name = ‘home’ OR option_name = ‘siteurl’;UPDATE wp_posts SET guid = replace(guid, ‘oldurl.com’,’newurl.com’);UPDATE wp_posts SET post_content = replace(post_content, ‘oldurl.com’, ‘newurl.com’);

or

UPDATE wp_postmeta SET meta_value = replace(meta_value,’oldurl.com’,’newurl.com’);

But I really think you cannot beat visually inspecting what you are about to update, especially with tablePrefix_posts.

With the 3 tables above, I would suggest using a wildcard search on each table searching for http (or local host if this was stored locally). Note that there are too many variations here to mention so the general rule of thumb is to have a route around, see if anything references the old site and update it to the new site. Make sure you keep a note of your changes as it is very easy to paste in your new url without changing the “App” to “wp-admin” etc, if you take notes it will be much easier to correct your errors, rather than having to re-import the database and start again.

SQL wildcard search example:

SELECT * FROM `tablePrefix_posts` WHERE `post_content` LIKE ‘%http %’;

Replace the old url with the new url and ensure that you replace anything that is OldUrl/Web/App with NewUrl/wp-content

8. Update your wp-config.php file to point to the database that now contains your bedrock database tables

Currently, your new vanilla wordpress website is using the database that was created during installation and not the database that you have created and populated with your bedrock database files. To change this, you will need to access the wp-config.php file that is located in the root folder of your vanilla wordpress website. If using FileManager to access this file, you can use the editor but I prefer to download, save a copy, make my changes and upload the updated version. This allows you to test and make changes if anything goes wrong.

To update the wp-config.php file to correctly point at the new database with all your bedrock information, you must make three (possibly four) changes – all noted from point 3 of this tutorial.

The database name

The username

The password

Table prefix …possibly? [note that all default installations of wordpress are given a prefix of wp_ but this may not be the same on your database that is now populated with bedrock database information. Just look in the database, using myPhpAdmin and see what each table begins with].

At this stage, you can carry out a test on the newly created vanilla wordpress url. It is likely that it will not look correct [as there are more steps] but the important thing is that you do not see “error establishing a database connection”. If you see this note, you must recheck your database name, username, password and possibly table prefix. You can also check the details or change your details using cPanel –> MySqlDatabases

 

9. Update theme files to ensure that css files, js files etc. are referenced correctly.

Again, this case is not the easiest to explain definitively as different websites are created differently. It will take a little investigation and if you are really luck (doubt), you may not even need this step. CSS files and Javascript files can be linked via absolute links and relative links. Absolute links will give the exact location that the required files are located where as relative links are given, relative to where the file is that notes them.

For example, a file in wp-content/themes/themeName/functions.php

Might have :

(absolute)

http://myOldWebsiteAddress/files/app/themes/themeName/style/style.css

NB – this is dangerous as, if your bedrock website is still live, your newWebsite might be pulling the styling from the live version and you will not know you have issues until the bedrock site goes down

(relative)

../../themes/themeName/style/style.css

NB – depending on the location of the scripts, this may work without any intervention but it is likely that you will need to find references to the style and additional scripts by investigation and then carry out the updates needed to ensure they correctly point to the new location. I would suggest that a good place to start is to use view page source [or inspect element] when viewing the new vanilla website and see where the references are pulling from / not pulling from.

Some investigation into each of your theme files will probably be of great benefit – just be on the look out for relative and absolute links that reference the old site or ‘app’, which no longer exists.

If the wordpress theme that was used to design the website is not a bespoke theme, you may also be able to remove the theme, download it and reinstall it. Doing this will [usually] configure the files needed to implement the required css and javascript files – lucky you 😊

10. Test and tidy

The final step in this process to design vanilla website from a bedrock website is to carry out extensive testing and tidy any files that you created during this process. One of the key ‘files’ no longer needed is the database that was created during the initial vanilla wordpress website installation – during step 2. Other files that might no longer be required are backups created of theme files, database tables, function files, style sheets or javascript files.

Extensive testing of the newly created, vanilla version of the website to ensure that all pages and functionality and views work and appear exactly how they should. I would also strongly advise that if you can, you temporarily disable the bedrock version of the website to ensure that no scripts, images etc. are absolute links which are simply being pulled from the bedrock website.

That’s it. All going well, you have now successfully managed to convert a Bedrock website to a vanilla wordpress website using cPanel

I’m sure that you may come across a few scenarios that are unique to your Bedrock to vanilla wordpress using cPanel project but the key thing is to adapt to the problems by thinking logically and troubleshooting the issue forensically.

…We do more, so you can do less 🙂