Am I free: Yes Hire Me

This is a tutorial to set up my WordPress Boilerplate which you can find at github.com/tetloose/wp-boilerplate.

Assuming you use a mac, are confident with terminal either bash or zsh, use git, have used scss, gulp and have prior knowledge of sql and virtual hosts. If not there are a few tutorials out there to help you set up a local dev environment with sql: David Walsh has a good article here.

Clone and vHost

Clone the repo into your sites folder using terminal

mkdir ~/Sites/project-name/
cd ~/Sites/project-name/
git clonegit@github.com:tetloose/wp-boilerplate.git .

Set up new vHost

sudo nano /etc/apache2/httpd.conf

Add

<virtualhost *:80>
	DocumentRoot /Users/username/Sites/project-name/
	ServerName project-name.localdev
</virtualhost>

Save and close

sudo nano /etc/hosts 		

Add

127.0.0.1 project-name.localdev		

Save and close

Now in terminal restart apache

sudo apachectl restart

Goto chrome ==> http://project-name.localdev

Hopefully if this is all set up correctly project-name.localdev will point to your new project folder and you will see the WordPress 1 click install.

Don’t install

Database

I use sequel pro to do database stuff.

Create a new database called project-name

Import

~/Sites/project-name/wp-content/themes/tetloose/__/Database/testAdmin/wp_2017-02-03.sql

into project-name

Once that is imported, open the table tetlooseWP_options.

Alter siteurl & home to http://project-name.localdev.

Save and close sequel pro.

open wp-config.php in your editor

~/Sites/project-name/wp-config.php

Add the database name to line 7

define('DB_NAME', 'project-name');

Save and close

Goto Chrome

http://project-name.localdev

You should see the website.

Wp Admin

http://project-name.localdev/wp-admin
UN: testAdmin
PW: password

Once you log in, you will be taken to the settings pane.

In the Welcome tab click Users create your user account. Logout, login with new user details and delete testAdmin.

You will see most of WP is hidden, this is a function that looks for a specific admin, if that admin is logged in it will show everything, else it will show WP user mode removing all the things most clients use to brake a site.

open with your editor

~/Sites/project-name/wp-content/themes/tetloose/inc/functions/admin-layout.php

Line 47 change to your user name, save and close.

Go back to wp-admin you will see all the options.

Theme

Im not going to explain everything about the theme just the basics on getting it running, then you can alter it to work how you want it to.

I have it set up so I can plow through a project in minuets. Also the structure isn’t standard WordPress, I honestly think the structure WordPress want you too use for theme markup is the worse thing I have ever seen, but it’s up to you, use this as a base for your own frame work.

When I say Theme i mean:

~/Sites/project-name/wp-content/themes/tetloose/

Open Theme in your editor.

Open Theme/gulpfile.js

Edit Line 124 change wp.localdev to project-name.localdev

Save and close

Before installing the node dependencies for the theme, read the setup guide here.

In terminal

cd ~/Sites/project-name/wp-content/themes/tetloose/
npm install

Once this has completed, you may get some error’s with the font task it’s hard to set up, you can remove the font task from the gulpfile.js and package.json. You might also get a version error, just make sure your node and npm are the latest version.

Once this is all set up run in terminal

gulp

This will spin up browsersync and proxy project-name.localdev. So when you make changes to js / html / scss it will auto update live on the proxy url i.e. localhost:3000.

You want to do all your front end changes on localhost:3000 but any admin stuff in project-name.localdev. Browser sync will do your head in if you work from the proxy url localhost:3000.

Share This

Back to Technology

Follow me

On Instagram