wp-get-go (get-go = get going) is a framework for bootstrapping WordPress theme development.
wpgg [--no-validate --no-autofix --no-push --no-css [--silly | --verbose | --debug]]
Arguments
--no-validateDon't validate the git repositories (if you know they are fine, this can speed up build.--no-autofixwpggcan fix and update a lot of errors in the package and build information. Using this argument will prevent that and throw errors instead.--no-pushOnce the build is completed, the code will be commited and pushed to remote. To do that manually, use this argument.--no-cssOnce the build is completed, astyle.csswill be generated from the builtstyle.scss. Use this argument to prevent that.--silly|--verbose|--debugThe detail of logs.--sillyis meant for developers of the framework and is silly for you to use.--verbosewill give you very detailed log.--debugis useful if you wish to see a little more detail than what's logged normally and can help in identifying issues and reporting errors.
{
"name": "my-theme",
"version": "0.0.1",
"author": {
"name": "Yapapaya",
"url": "https://yapapaya.com"
},
"homepage": "https://yapapaya.com/my-project-name/",
"description": "A custom description for My Theme",
"repository": "[email protected]:yapapaya/my-theme",
"bugs": "[email protected]:yapapaya/my-project-name/issues/",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-cli": "~0.1.9",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-sass": "~0.7.3",
"grunt-autoprefixer": "~0.7.2",
"grunt-csscomb": "~2.0.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.4.0",
"grunt-wp-i18n": "~0.4.3"
},
"wpgg": {
"prettyName": "Theme Name",
"starter": {
"repository": "[email protected]:yapapaya/_ya.git",
"replace": "_ya",
"gitHeader": "Repo",
"gitHeaderType": "git",
"colophon" : {
"author" : "Yapapaya",
"url" : "yapapaya.com"
}
},
"components": {
"names": [ "flex-grid", "font-awesome", "testimonial", "section-with-aside" ],
"repository": "[email protected]:yapapaya/theme-components.git",
"replace": "component"
}
}
}These can be generated using the package name
"name": "my-project-name"This part of the package.json can be used to generate the theme headers.
{
"name": "my-theme",
"version": "0.0.1",
"author": {
"name": "Yapapaya",
"url": "https://yapapaya.com"
},
"homepage": "https://yapapaya.com/my-project-name/",
"description": "A custom description for My Theme",
"repository": "[email protected]:yapapaya/my-theme"
}The json above will create the theme headers in style.css as follows:
<?php
/*
Theme Name: My Theme
Theme URI: https://yapapaya.com/my-theme/
Author: Yapapaya
Author URI: https://yapapaya.com/
Description: A custom description for My Project Name
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
*/This part contains information that the wpgg framework needs.
{
"wpgg": {
"prettyName": "Theme Name",
"starter": {
"repository": "[email protected]:yapapaya/_ya.git",
"replace": "_ya",
"gitHeader": "Repo",
"gitHeaderType": "git",
"colophon" : {
"author" : "Yapapaya",
"url" : "yapapaya.com"
}
},
"components": {
"names": [ "flex-grid", "font-awesome", "testimonial", "section-with-aside" ],
"repository": "[email protected]:yapapaya/theme-components.git",
"replace": "component"
}
}
}This is an example of an internal version we are working on.
- prettyName: (optional)
Theme Name:header. If not supplied, will be generated from packagenameby replacing hyphens(-) with spaces and capitalising each word. (my-themewill makeMy Theme) - functionPrefix: (optional) Prefix for function names. If not supplied, will be generated from package
nameby replacing hyphens(-) with underscores (_). (my-themewill makemy_theme) - starter: (required) Information about the starter theme. We use a custom flavour of
_stheme by Automattic. It's called_yaand you can use it as a starter theme or fork it to build your own starter theme.
- repository: (required) is the
giturl of the repository of the starter - replace: (optional) The namespace of the starter. This will be replaced in function names, text-domain, documentation, etc . See the idea behind it, using _s theme. If not supplied, no replacements will be made.
- gitHeader: (optional) An optional git header. For example, if you use something like GitHub Updater you'd set this to
GitHub Theme URI. - gitHeaderType: (optional) Whether to use
gitstyle URL orhttpsurls for the git header. For example, if you use something like GitHub Updater you'd set this tohttps. If not specified, it'll assumegitand use therepositoryvalue. - colophon: (optional) (=a publisher's emblem or imprint, especially one on the title page or spine of a book.) This is the footer credit information ( Baap Theme by Yapapaya) or the copyright information ( © 2017 by Yapapaya.). This will be used for replacing the name and url in footer.php. If not supplied, the colophon will be left, as it is.
- author: The copyright holder or Theme author.
- url: The copyright holder's or Theme author's url.
- components: (optional) contains information about the components
- names (optional) is an array of components that are needed for this theme.
- repository (required) the repository where the archive containing all the components is.
- replace (optional) a common namespace used by all the components for function prefixes, etc, just like the
replacefield ofstarter.
A remote git server (GitLab, BitBucket, GitHub, etc) for repositories involved (because they support git archive command, GitHub workaround is for later; we wish to avoid git clone or downloading a .zip of the whole repo because it's too much unnecessary data).
While developing a new custom theme, a developer usually
- Downloads a starter theme.
- Performs a find/replace for
theme-slugand manually edits the theme header information instyle.scssorstyle.css. - Creates or copies additional files:
.js,.scss,.phptemplate files, (for eg.event-single.php) to achieve the desired look and feel - Creates additional code in
functions.phprequired to achieve the desired functionality (for eg, enqueueing scripts and styles)
A lot of these additional work can be repetitive and often follow patterns. It often takes hours to finally get all the basic repetitive stuff in place before the developer can start working on code that they are writing for the first time. Such additional code can be separated and arranged as reusable modules or components.
- High level
slideshow,testimonial,staff-profile,related-posts,gallery,portfolio,call-to-action, etc - Low level
section-with-aside,hero,hero-with-cta,section-with-image,section-with-round-image,section-with-square-image,hero-with-quote, etc - Libraries/ Frameworks
font-awesome,masonry,infinite-scroll, a post meta framework like ButterBean, etc
This framework is an attempt to automate and modularise development of custom themes (and plugins) so that the developer can quickly start writing the actual custom part of the code instead of spending hours just getting things in place.
- A node plugin
- A starter theme/plugin repository.
- A component (reusable code modules) repository
When starting a new custom theme, a developer will
- install wpgg's node plugin
- create a new folder for the theme.
- create (or clone or copy and modify) a
package.jsonin this folder (see example below) that describes the starter theme and the components needed for this theme. - install wpgg's node plugin.
- run
wpggcommand. - start writing code.