knowthecode / genesis-developer-starter-lab Goto Github PK

View Code? Open in Web Editor NEW

23.0 6.0 6.0 877 KB

Let’s Build a Custom Developer’s Genesis Starter Child Theme

Home Page: https://knowthecode.io/series/lets-build-custom-developers-genesis-starter-child-theme

JavaScript 4.99% CSS 84.61% PHP 10.39%

genesiswp genesis-child-theme wordpress-theme

genesis-developer-starter-lab's Introduction

Let’s Build a Custom Developer’s Genesis Starter Child Theme Lab

Lab Date: July 21, 2016

This hands-on coding lab walks you through the entire process of converting a standard Genesis theme into a developer-friendly, modular theme. The purpose of this lab is to teach you about the following:

Techniques to save you time and time as you are building your own workflow and starter theme
Modularity for PHP and CSS
How to break up your code to be more readable, reusable, and thus, more maintainable.
How to convert a style.css file into a Sass module
How to setup Gulp as your task runner to process the Sass into style.css and a minified version style.min.css
How to build your own modern workflow with Composer, Sass, Gulp, Bourbon, and Neat.

What's in this repository?

There are 2 separate themes in this repository:

Version 2.2.4 of the Genesis Sample Theme
The final Developers Starter Child Theme - it's the final version that you will build in this lab

How about the new version of the Sample Theme?

Late in 2016, StudioPress upgraded the Sample theme to include a WooCommerce module. Once you complete this lab, you will be able to add the new updates to your Developers theme by yourself.

Dependencies

This child theme requires the following dependencies:

Installation

To install this repository, do the following:

Open up terminal and navigate to the wp-content/themes folder.
Then type: git clone [email protected]:KnowTheCode/Genesis-Developer-Starter-Lab.git
Then move both themes out of the new folder and into the root of the wp-content/themes folder.
You can then delete the new folder, as it's not needed any longer.

You will use the Genesis Sample theme in this repository for the lab.

Contributors

All feedback, bug reports, and pull requests are welcome.

genesis-developer-starter-lab's People

Stargazers

Watchers

Forkers

pkpatricia devloprs nzshumate rgadon107 hansschuijff domaingood

genesis-developer-starter-lab's Issues

CHILD_TEXT_DOMAIN constant prevents strings being detected

Current behaviour

The use of the CHILD_TEXT_DOMAIN constant prevents detection of strings by tools such as Loco Translate.

Some translation tools statically analyse files for translation, so CHILD_TEXT_DOMAIN is never parsed by PHP to become 'developers'.

https://markjaquith.wordpress.com/2011/10/06/translating-wordpress-plugins-and-themes-dont-get-clever/
http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong/
https://developer.wordpress.org/plugins/internationalization/how-to-internationalize-your-plugin/#text-domains (note red “do not use variable names” warning)

Loco Translate detects only four strings in the theme when trying to create a template file, for example (the ones in stylesheet header) – all of the strings passed to __() are missing:

Expected behaviour

CHILD_TEXT_DOMAIN is replaced with a string literal such as 'developers', so that translation tools can detect all strings for translation.

If I find , CHILD_TEXT_DOMAIN and replace with , 'developers', Loco Translate can then find the strings when building the .pot file:

To reproduce

Install and activate Loco Translate.
Create a blank folder named 'languages' in the 'developers' directory. (The theme should probably include this by default, perhaps with a blank index.php inside so it's saved by git?)
Visit Loco Translate → Themes → Developers → Create Template.
Click the “Create template” button:

The developers.pot template file will be created in the theme's language directory. You can view it directly and count the strings, or see how many strings were detected by clicking “Edit Template” next to the Developers theme in Loco Translate:

11 strings should be found, but you'll only see 4 if the text domain constant is used.

'autoprefixer' in gulpfile.js

~~I believe 'autoprefixer' in gulpfile.js should be changed to 'gulp-autoprefixer'.~~

Actually, the issue is in package.json, where 'gulp-autoprefixer' should be changed to 'autoprefixer'.

Refactoring Theme Supports

Hello, I am following along with this tutorial series. So far it's excellent! I've been a genesis developer for about five years and already I've learned a ton! My issue:

I downloaded the latest Genesis Sample theme -- the one with WooCommerce Support -- for use in this tutorial. I've configured my setup.php file with the $config array and the foreach loop, like the tutorial instructs. When I get to the point where we test it by pasting it into the Genesis Sample functions.php and comment out all the other add_theme_support() statements ... nothing happens. By which, I mean that I lose all the footer widget areas, after content widget area, etc. Additionally, on the front-end I loose all my styling.

My IDE did not register any syntax errors but, just to be safe, I copied the same code from your repo and pasted it into my setup.php and Genesis Sample's functions.php and tried again ... same behavior.

Any suggestions? I attached a couple screenies to show what happens.