How to Design a WordPress Theme

A Workflow on How to Design a WordPress Theme

It should be clear to anyone reading that this is my preferred workflow design. There are different others and it’s completely fine if you use any of them. If you can grab something from here that will improve parts of your theme development process, then that’s alright.

I normally do my development on a Mac, so this article is mainly for Mac users, but Windows users can still workaround it if they want to.

The terminal/command line will be used a lot here, so if you aren’t familiar with it, you should do that before going on.

Tools/Software/Knowledge Required

  • FoundationPress or Understrap (Choose the one you prefer).
  • Knowledge of Terminal.
  • Gulp.
  • Bower.
  • Node.js & NPM.
  • NVM (Mac only) – the alternative for Windows is nvm-windows.
  • Mac users – Homebrew (Not necessarily required but highly recommended).
  • MAMP (MAMP Pro not really necessary).
  • Wget.
  • Sublime Text.
  • GCC.
  • A fundamental understanding of Sass.
  • A tinge of patience when you get errors.

Step 1

Before starting any of the processes, you’ll need to download a few things.

  • Homebrew for Mac users only.
  • js and NPM – Window users should access the website to download, but Mac users can go to the terminal and type brew install node
  • NVM for Mac users and nvm-windows for Windows users.
  • Unzip FoundationPress/Understrap after downloading them.
  • Wget will ensure that you can download the current WordPress.
  • Use MAMP to set up a local server to develop on.

Homebrew:

To install, type:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Before continuing the process, you must have downloaded Node.

NVM:

For Mac users, type the below line to install NVM:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

The following script will clone the nvm repository to ~/.nvm and will include the source line to your profile ( ~/.bash_profile , ~/.zshrc , ~/.profile , or ~/.bashrc ):

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \.

"$NVM_DIR/nvm.sh"

This will enable you issue commands using the nvm keyword in the terminal.

Gulp:

Quickly install gulp using:

npm install --global gulp-cli

Wget:

brew install wget (Mac users)

http://www.gnu.org/software/wget/ (Windows users)

MAMP:

There are different versions available to Mac and Windows users. Download the appropriate one and install.

Sublime Text 3:

If you don’t have this already, you should install it. Add it to your path to be able to quickly open a project from the terminal in sublime text. Type the following in your terminal and hit ‘enter’.

ln -s /Applications/Sublime\ Text.app/Contents/

SharedSupport/bin/subl /usr/local/bin/subl

This will ensure that you can type subl . in the root of a folder and automatically open the folder in Sublime Text.

GCC:

If Xcode command line tools isn’t installed on your Mac, install it or you can make use of Homebrew.

brew install gcc

http://www.mingw.org/ (Windows users)

Step 2

Create two empty text files named “new-foundation.txt” and “new-understrap.txt” which you will paste the following.

new-foundation.txt:

1 #!/bin/bash
5 #
7 # Setup WP instal wi
9 # Expects 1 param:
11 #
15 echo "=======
17 echo " Initial D
19 echo "=======
26 mkdir ~/project/ $1
28 cd ~/projects/ $1
30 wget http: //wordp.o
32 tar xfz latest.tar.gz
34 mv wordpress/* ./
36 sleep 1
38 rmdir ./wordpre/
40 rm -f latest.tar.gz
44 echo " "
46 echo "=======
48 echo " Configu wp-c
50 echo "=======
52 echo " "
56 sleep 2
60 mv wp-config-sampl.p
62 sed -i.bak s/datab_
64 sed -i.bak s/usern_
66 sed -i.bak s/passw_
echo " "
echo "=======
echo " Creatin the f
echo "=======
echo " "
sleep 2
mkdir ~/project/ $1 /w-
cp -R ~/foundat
echo "=======
echo " Project $1 cr
echo "=======
echo " "
sleep 2
echo "=======
echo " Step 1: Crea d
echo "=======
echo " "
sleep 2
echo "=======
echo " Prepari to i
echo "=======
echo " "
sleep 2
cd ~/projects/ $1 /wp-c
npm install
subl .

(https://gist.github.com/tribulant/a000de3ca1ef0f112a8896e2d25b1fe2)

 

new-understrap.txt:

1 #!/bin/bash
5 #
7 # Setup WP instal wi
9 # Expects 1 param:
11 #
15 echo "=======
17 echo " Initial D
19 echo "=======
24 mkdir ~/project/ $1
28 cd ~/projects/ $1
30 wget http: //wordp.o
32 tar xfz latest.tar.gz
34 mv wordpress/* ./
36 sleep 1
38 rmdir ./wordpre/
42 rm -f latest.tar.gz
44 echo " "
46 echo "=======
48 echo " Configu wp-c
50 echo "=======
52 echo " "
54 sleep 2
58 mv wp-config-sampl.p
60 sed -i.bak s/datab_
62 sed -i.bak s/usern_
64 sed -i.bak s/passw_
68 echo " "
echo "=======
echo " Creatin the f
echo "=======
echo " "
sleep 2
mkdir ~/project/ $1 /w-
cp -R ~/underst-0.3
echo "=======
echo " Project $1 re
echo "=======
echo " "
sleep 2
echo "=======
echo " Step1: Crea d
echo "=======
echo " "
sleep 2
echo "=======

echo "=======
echo " "
sleep 2
cd ~/projects/ $1 /wp-c
npm install
subl .

(https://gist.github.com/tribulant/fbc8a13a30356fc6626a6a962d3fa087)

Step 3

We have to move two folders before we run these scripts. The scripts are supposed to run on the root and it is expected that the other files are on the root too.

When I say “root”, I’m talking about the folder shown in the picture below. I’ll put the folders in the nbeers directory (located at “~/”). You’ll find the folders when you right click on the top of the finder window.

Step 4

FoundationPress isn’t compatible with the latest version of Node.js, so we’ll have to use a lower version. If you installed NVM, you can use it to install a lower version of Node.

Type nvm install 4.8.4 in your terminal.

After installing it, type nvm use 4.8.4.

Step 5

If no steps have been forgotten, we can then run the script. If you are seeing errors, it might probably be that you’re using different system configurations, thereby causing problems with Gulp or Bower. Google these errors so you can be able to fix them. You can as well write them in the comments section so that I can be able to help you.

Running the script for FoundationPress – Go to your terminal and type:

sh ~/new-foundation.txt client_name

Running the script for Understrap – Go to your terminal and type:

sh ~/new-understrap.txt client_name

client_name” is where you can determine the project theme/folder.

During this time, your terminal should be displaying various messages and installing several node modules. This process might last 3 minutes.

Step 6

Open up MAMP while the script is running.

Go to “Preferences” and then click on Web Server on the tabs.

Find the new project folder in “~/projects/client_name”. After selecting the folder, hit “OK”. Click on “Start Servers” (your password might be required) and select the “Open WebStart” page.

The next page should be like this:

Step 7

You’ll see a phpMyAdmin link on the left side in this picture. Click on it. After this, click on the Databases tab that will show on the next screen.

Input the client name (the same name you put as the database name), leave the dropdown as Collation and click on “Create”.

The next thing is to remove “/MAMP/index.php?page=phpmyadmin&language=English” from your current url and leave only “localhost:8888”.

After clicking on “Enter”, it will take you to the WordPress installation screen. You can create your user as well as installing WordPress.

If your terminal is still running, wait for it to be done.

Step 8a (For FoundationPress)

I have removed some folders that are not needed. After expanding this assets folder, you’ll see areas available to write Sass and JavaScript. It should be noted that jQuery is already available here.

In the same foundation.scss file, you can use the Foundation float grid or flex grid on lines 56 and 57. All you have to do is this:

For the gulpfile.js file, you can use the BrowserSync by filling in the url variable in line 17.

Step 8b (For Understrap)

Write extra Sass (optional) in the Sass folder using “@import statements in /sass/theme/_theme.scss”.

To enable BrowserSync automatically refresh your browser each time you save, go to gulpfile.js and find:

1 var browserSyncO =

2 proxy: "localhos/the

4 notify: false

};

You can then run gulp watch-bs and start coding.

By this time, you should be essentially ready to start coding your theme.

Website & Email Hosting

Get the best website & email hosting for speed, security, and peace of mind. No restrictions. Freedom to do what you need in order to run your business.

Host Now
Comments
  1. Anousheh Trading on April 24, 2018

    I’m new in web design.
    hope to improve my word press by your articles and tutorial

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Save 15% On All Purchases

Use this amazing, limited offer and SAVE BIG! Buy any of our WordPress plugins, extension plugins or newsletter templates.

Save 15% On All Purchases

You have Successfully Subscribed!

Pin It on Pinterest