How to Design a WordPress Theme

A Workflow on How to Design a WordPress Theme

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:

new-understrap.txt:

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.

Digiprove sealThis content has been Digiproved © 2018 Antonie Potgieter

Nathan Beers is a former professional poker player turned developer. He is currently living in Tampa, FL and working as a full-stack web developer. He is really very fascinated by learning new technologies and love to write about them. He intensely believes in a decentralized internet with no government involvement and enjoys trading crypto currencies.

Beautiful Newsletter Templates

Professional newsletter templates that are fully responsive for desktop, tablet and mobile. They are 100% cross-client compatible.

See Them
Comments

No comments yet

Leave a Reply

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

Save 30% On All Purchases

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

Save 30% On All Purchases

You have Successfully Subscribed!

Pin It on Pinterest

%d bloggers like this: