WordPress Theme Development

Minimum Development Environment

• Local Server - Xampp / Wampp / Mampp
• IDE/Text editor - NetBeans / Sublime / VS code / Atom
• WordPress Local Installation - Download WordPress
• WordPress Site populated with Theme Unit Test data - Theme Unit Test Data
• Gulp or GUI applications Prepros / Scout / Koala for task automation such as
  • Compiling SASS files
  • Minifying Scripts and Styles
  • Optimizing Images
  • Browser Reloading
• Various Browsers including Chrome and Firefox for testing

Gulp installation guide

Gulp is a command line task runner utilizing Node.js platform. It runs custom defined repetitious tasks and manages process automation. Listed below are the steps needed to run gulp on your machine

1. Install Node
2. Install Gulp globally using the command line - npm install gulp-cli -g

SASS installation guide

Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby > Ruby Installer. It's a single-click installer that will get everything set up for you super fast.More info

• Sass. Ruby uses Gems to manage its various packages of code like Sass. In your terminal window type: - gem install sass

Get and install underscores(stater theme)

Once WordPress is up and running on your computer, you need to get a copy of the Underscores theme. Underscores is a starters theme built specifically to be used as the starting point for new custom themes.

Go to your WordPress site, navigate to the backend. Go to Appearance and Themes. Click Add New, Upload Theme, and then, either grab the newly downloaded file from underscores.me. Choose File, Downloads, find your theme, open, Install Now, the theme is unpacked, installed, and from here You can activate it.

Install WordPress Theme Unit Test data

This is a full set of content for a WordPress site that covers all the bases and provides all the weird scenarios you should test for. The Theme Unit Test Data is available in an xml file you can download from Theme Unit Test Data.

1. Go to WordPress back end. Tools > Import > WordPress > Install Now.
2. Run Importer then choose the file you just downloaded. !important check Download and import file attachments
3. Wait for the message "All done, have fun!"

Setup WordPress for development

Install WordPress Developer Plugin

When you develop themes or plugins it can be useful to have WordPress tell you what's going on and when something is not working right. To make this possible, there are a handful of plugins that you can choose to install on your site for debugging purposes. All of these plugins have been bundled into one super plugin called Developer. Now Developer is quite an unusual plugin so let me show you how it works.

1. Go to the back end of your site, plugins and add new, and search for Developer
2. Install and activate it. A modal will popup choose theme for a self-hosted WordPress installation
3. Install the following plugins - Debug bar, Monster widget, Regenerate thumbnails, and theme check.

Install Show Current Template Plugin

Show Current Template Plugin is not bundled with WordPress Developer plugin. To install go to Plugins > Add New and search for Show Current Template

WordPress WP_Debug

WP_Debug enables debug mode which will identify and try to resolve issues in your code. And save queries logs the database queries in an array so you can review them. That means if something weird is happening and you need to see what the communication is between WordPress and the database, that is all saved and you can review it later.

Open wp-config.php located in the root installation of WordPress. Look for define('WP_DEBUG', false); and set it to true define('WP_DEBUG', true);

Integrate Gulp to WordPress

1. Clone or Download and move gulp-dev folder to your WordPress Theme directory wp-content > themes.
2. Go to the gulp-dev folder using the command line and type npm install this will download and install all packages needed.
3. Open gulpfile.js and change the variable the following variables accordingly:

• themeName - Name of the theme your developing.
• siteName - Name of the site your developing.
• themeUrl - Url of the site your developing

var themeName = 'themename',
    siteName = 'siteName',
    siteUrl = 'http://localhost/' + siteName,
    gulp = require('gulp'),
  // Prepare and optimize code etc
  autoprefixer = require('autoprefixer'),
  browserSync = require('browser-sync').create(),
  image = require('gulp-image'),
  jshint = require('gulp-jshint'),
  postcss = require('gulp-postcss'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),

4. Still within gulp-dev folder in the command line type gulp to initialize all gulp task

Adding Google fonts switch by translator and resources hints

Go the link and add it to your functions.php and make sure to replace text_domain with you theme text domain. WordPress Google Fonts Functions.

Adding SVG Icons to theme and Social Menus

Why use SVG by the way? Here are some articles Icon fonts vs SVG, Seriously Don't Use Icon Fonts

If your convince to use SVG Icons for your theme lets add it now!

1. Require icon-funtions.php to your theme. - this file contains all the necessary functions for svg icons to work.
2. Add assets folder to your theme - this container all the svg icons that we will include to your theme.
3. Add body class no-svg - we will assume that the browser does not support svg then we add fallbacks.
4. Add functions.js to your theme - this will check if the browser is supporting svg and adds svg class to body tag
5. Add default styles for svg icons and svg fallbacks

If you follow all the neccessary steps we can now call inline svg icons using: Make sure to find and replace all text_domain to your text domain text_domain_get_svg( array( 'icon' => 'icon-name' , 'fallback' => true ))
example implementation:
gleent_get_svg( array( 'icon' => 'arrow-long-right' , 'fallback' => true ));

Add SVG icons to your social menu: Make sure to have link_before and link_after contain's values so we can make sure icons will appear to your menu instead of text.

  wp_nav_menu( array(
    'theme_location' => 'social',
    'menu_class'     => 'social-links-menu',
    'depth'          => 1,
    'link_before'    => '<span class="screen-reader-text">',
    'link_after'     => '</span>' . gleent_get_svg( array( 'icon' => 'chain' ) ),
  ) );