Upload your Bedrock/Sage theme to Cpanel Hosting

In this section, we will get Bedrock set up on Cpanel hosting. In the advanced section of the Cpanel hosting panel, you should find the terminal. Run this command

Get to the public root directory, here you need to create new folder for a subdomain and go into that folder if you are following along. You can also use the domain root, but this will need you to make some changes to the document root later on to make this work. Once you have created your new folder, cd into it before running the install commands.

cd public_html

now run the install commands for bedrock

composer create-project roots/bedrock

Upload your theme, DONT UPLOAD the node_modules folder! Before you do this build in your local environment using:

npm run build:production

Upload to :

bedrock/web/app/themes/

In local grab a copy of the database … Click the database tab, then “Adminer” you will likely have an error 404 – just wait for a second… Hopefully, that fixed itself, phew! Now click Export :

the defaults will be fine:

Okay, from Cpanel make a new database (in the MySql Databases option), Now create a new user, and add the user to the DB. Load up PhpMyAdmin and choose the new Database you created, click “Sql” and paste everything output by the export function in Local Adminer.

Now go to cpanel > File Manager > Navigate to the “Bedrock” Folder. In the top right click “Settings” Select “Show Hidden Files” (Mine shoed it was selected, but I needed to click and save the checkbox before I could “actually” see hidden files! Rename the file .env.example to .env and edit the file, You need to change lines 1,2,3,13,14. These lines will be Database, username, password and URL, so have these ready. Once done generate new salts by visiting the link in the file, and pasting the result back.

Now, we need to update the document root. I’m doing this with a subdomain here (easy) but you can also do it with the document root if you have access to whm, or contact your host. Create a new subdomain using the folder you used to put the files in.

Set up new Document root.

Lastly, go back to your .env file and update lines 13,14

WP_ENV='production'
WP_HOME='https://examplesite.yourdomain.com'

Now visit the admin panel (https://yoursubdomain.yourdomain.com/wp/wp-admin)

Change your password!

Now, BEFORE ANYTHING ELSE change your login password. Until now you have been developing locally and are probably using an insecure password, you have just copied the DB to a live site, your password now needs to be secure.

go to themes, and activate your new theme!

Now, back to the terminal in Cpanel, navigate to your new theme directory

cd public_html/examplesite/bedrock/web/app/themes/yourtheme

run install

composer install

in bedrock/config/environments/ create the file “production.php”

I always allow plugins to be updated and added from the wp-admin, so add this to the file if needed:

Config::define('DISALLOW_FILE_MODS', false);

Now back to PhpMyAdmin, we need to update the site url from the localhost one to the live url. Update the first 2 items in wp_options

Last thing, go to Settings > Permalinks > Save

So, did it work? If you want the site to be on the root of the domain and not a subdomain (which to be honest is usually the case) you will need full root access to your server. It really isnt too hard to do, but I realize many may not have the required access so decided to write the tutorial based on a subdomain. You can follow all the steps listed, but follow this guide to update your document root from WHM. You may also want to do a refresher on saving and navigating using vim.

Remember this stuff never gets easier, you just get better – and if you have got through all of this you are doing awesome!

Install Sage Starter Theme

Okay, so hopefully now we have Bedrock working. The next part in our development workflow is to get Sage installed. Navigate to your themes folder here is the location of mine :

File structure of sage theme

We can either load the terminal type in “cd ” and then drag the theme folder into the terminal window OR, a slightly different way I will show you this time would be to right-click the themes folder at the bottom of the Finder window and click “copy pathname” you can then type cd and paste the pathname into the terminal, however, my Local installation made a folder called “Local sites” (note the space) so you would need to escape the space in the pathname (“Local\ sites”). Dragging the folder to the terminal avoids this issue. Windows users you are on your own!

copy pathname example

Now, lets make Composer do some magic and paste this into terminal

composer create-project roots/sage your-theme-name
install process of sage theme screenshot

Answer all the questions it asks you, clicking enter will save the default. If you are following along with the series, make sure to choose Bootstrap (1) when asked. We will use Bootstrap to make a responsive menu in an upcoming section

So we are almost done, if we navigate into out new theme folder we will find a package.json file, this is a file that lists the project dependencies that we now need to install. So let’s go to this folder in the terminal – either copy the path or drag the folder right into the terminal to change the directory.

The official docs tell you to type in “yarn” I have node.js installed so I use this. If you have neither of these, then I would recommend installing node.js now before continuing and follow along with me.

npm install

once this has completed, type in :

npm run start

After a few seconds, your browser will launch, and you will be able to login to your admin panel and change the theme to the new sage theme we have set up.

Page not load?
Okay, so if your browser keeps spinning, you are one of the lucky ones that get to complete one last step! Load up local and click “open site”, then copy the URL of the page that loads up. Now, from vscode go to : web/app/themes/themename/resources/config.json then on line 12, where it has the “devUrl” paste in the correct url for your site. Now try running npm run start once more.

Extra:

Now if you don’t have Yarn, installed lets get that on out systems globally. First, because we have started the development server in our terminal we need to press control+c to end the session – we can use Node to install it so just type :

sudo npm install --global yarn

Type in your password.

The official docs and most tutorials for Sage use Yarn, so now you can too 🙂

The development environment is now set up our code will be automatically optimized, and we can begin to develop our theme. Check out our next tutorial as we begin to build our theme.

Get Bedrock Working on Local by Flywheel

This is the very start of our journey creating a theme using Sage. Full disclosure – Im learning too! and thats why you should comment whenever you have a question or a better way of doing something. I have done a lot of research in each section and try to keep to best practices, so make sure to tell me when I don’t.

A few prerequisites – Local is easy enough to install, Composer is probably the trickiest to get working, make sure it’s installed globally (type “composer” in your terminal and see if you get “command not found”)

  1. Composer” installed globally
  2. Local By Flywheel installed, and a new site setup.

Great, now we need to make the new site you just set up work with Bedrock. A good place to begin will be to install Bedrock. Our first step will be to navigate to the correct folder in the terminal. If you are like me, then this is always a pain, so let’s cheat. If you are running on a Mac, follow along if not then you will have to do some changes to work with Windows… I haven’t developed on a. windows machine so unfortunately, I cant be much help.

Go to your Local Site and click the small arrow next to the path. This will bring up the finder in the correct location.

Now, load up the terminal and type in “cd ” (note the space, this is important!)

cd 

You can now drag the “app” folder from the finder onto the terminal window and press enter, you will now be in the correct location in the terminal. See the video for an example.

As the terminal is now in the correct location copy and paste the following command:

composer create-project roots/bedrock

Awesome! if it begins downloading and installing things you are on your way – if you have an error you will likely now need to go and look into installing Composer globally. I will assume it all worked great!

Let’s do some cleanup, we can now go into the app/ folder in finder and you should see one folder called “bedrock” and another called “public” Let’s delete the public folder.

Now we need to load the folder up into Visual Studio in terminal type

cd ../

This will take us back to our root folder. We can now type

code .

And we should have VS code load the folder for us. This did not work as default for me, so if you have issues with VS not loading just open the folder as you usually would in VS Code, or see the accepted answer on StackOverflow to fix it! We will now need to edit a few files. Edit this file first :

app/bedrock/.env

At the top of the file add your username and password for the database, this should be the same as mine :

DB_NAME='local'
DB_USER='root'
DB_PASSWORD='root'

On line 14 you will also need to change the WP_HOME variable, mine is shown below, but use whatever is listed in Local :

WP_HOME='http://localhost:10008'

Almost done, one last file to change, and this will be in

conf/nginx/site.conf.hbs

on line 9 you will see :

    root   "{{root}}";

we need to get the correct path so go back to finder and navigate to the folder :

app/bedrock/web/

Now copy the path, watch this video for an easy way to do this.

Now head back to Local right-click the site name and click restart server. You may see some database errors in the Local database tab, these can now be ignored as everything should be working. The next step in our Workflow setup will be to Install Sage, check our next tutorial in the series.