How to set up the workflow to develop a Genestrap-based WordPress theme

The main advantage of having a Genestrap-based WordPress theme is the ability to use the tools and the techniques you already use to develop your web apps.

Using a framework like Genesis to develop a WordPress theme takes the management of WordPress to a whole new level of complexity (and fun, too!).

So, once you have created the first version of your Genestrap-based WordPress theme, let’s see how to prepare your environment to manage the updates you will do developing your custom theme.

Setting up git

If you open a console window and write git remote: you will see this:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote
origin

Then, you can write this:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote show origin
* remote origin
Fetch URL: https://github.com/Aerendir/Genestrap.git
Push URL: https://github.com/Aerendir/Genestrap.git
HEAD branch: master
Remote branch:
master tracked
Local branch configured for 'git pull':
master merges with remote master
Local ref configured for 'git push':
master pushes to master (local out of date)

As you can see, the current repository is set to point to the main Genestrap repository on GitHub.

So, what we need to do, is to point it to one of our custom repositories.

Create a private git repository

The first thing you need to do is to create a private git repository in which store your developing Genestrap-based WordPress theme.

I use BitBucket that offers free private repository (with some limitations on the number of users, but this is not a problem for a project like this).

Obviously, you can use what you like: BitBucket, GitHub, GitLab or anything else.

I called my repo web-serendipityhq-wp_theme and below you can see my empty repository.

Now that we have a new empty repository to fill, let’s fill it!

Pushing your Genestrap-based WordPress theme to your private git repository

To push your Genestrap-based WordPress theme to your just created git repository, you need to change the origin remote from the current pointing to Genestrap’s GitHub repository to a new one pointing to your just created repo.

Doing this is really simple with a command like git remote remove and git remote add (run git remote --help for the full list of options).

So, start by removing the current remote:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote rm origin

NOTE: rm is the short version of remove and you can use both as you like.

Now, add a new remote pointing to your just created repo: we will call it origin, like the one we have just removed:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote add origin https://[e-mail]/Aerendir/web-serendipityhq-wp_theme.git

Let’s see what happened:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote
origin
MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote show origin
Password for 'https://[e-mail]': 
* remote origin
  Fetch URL: https://[e-mail]/Aerendir/web-serendipityhq-wp_theme.git
  Push URL: https://[e-mail]/Aerendir/web-serendipityhq-wp_theme.git
  HEAD branch: (unknown)

NOTE: Calling those commands you may be asked for your password: obviously, provide it in the console to access the remote repo. You should set your credentials via SSH to avoid providing the password any time.

We have a new origin remote that now points to our repository.

The thing to note is that now we have an unknown HEAD branch: this is because our repository is still empty: we need to push our Genestrap-based theme to it!

First push of the Genestrap-based WordPress theme to the git repository

You need a single, simple command:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git push -u origin master
Password for 'https://[e-mail]': 
Counting objects: 200, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (79/79), done.
Writing objects: 100% (200/200), 100.19 KiB | 0 bytes/s, done.
Total 200 (delta 113), reused 200 (delta 113)
remote: Resolving deltas: 100% (113/113), done.
To https://[e-mail]/Aerendir/web-serendipityhq-wp_theme.git
 * [new branch] master -> master
Branch master set up to track remote branch master from origin.

With this command we have told git to:

1. Push our code on the remote repository;
2. Set the upstream (the local repository now tracks the branch master);
3. The previous two points are executed on the remote called origin;
4. Sets the name of the branch to master.

If you refresh the page of your repository in the browser, you now see all the files of your Genestrap-based WordPress theme:

Verify again the remote:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote show origin
Password for 'https://[e-mail]': 
* remote origin
  Fetch URL: https://[e-mail]/Aerendir/web-serendipityhq-wp_theme.git
  Push URL: https://[e-mail]/Aerendir/web-serendipityhq-wp_theme.git
  HEAD branch: master
  Remote branch:
    master tracked
  Local branch configured for 'git pull':
    master merges with remote master
  Local ref configured for 'git push':
    master pushes to master (up to date)

Perfect: now our remote points to our private git repository and correctly tracks our master branch!

Updating your custom Genestrap-based WordPress theme

Now that we have git set up, we can also start to customize the theme.

Each time you make a modification, commit and push and your remote repository will save the editings.

But those editings are not reflected on your WordPress site.

So, here we need to clarify a thing: what does it mean “Updating a Genestrap-based theme”?

Well, “updating” means three different things with Genestrap:

1. Updating the private remote repository (with a push);
2. Updating the built Genestrap-based theme on your WordPress site;
3. Updating the source code of your Genestrap-based theme FROM the main Genestrap public repository.

Each one of those “update” requires different actions, so let’s see them in details one by one.

Updating the private remote repository of your Genestrap-based WordPress theme

This is really easy as we already have set up our local repository to push to our remote one.

So, each time you made an editing, simply commit and then push: done.

Nothing complex here.

Updating the built Genestrap-based theme on your WordPress site

When you want to update the theme on your Genestrap-based theme WordPress site, you need to build it again.

So, run gulp build and the theme will be built again.

Then upload the files in the folder src/build/theme to the folder of your theme on your hosting and you are done.

But there are some caveats here.

If you inspect the code of any of the pages of your WordPress site, in fact, you will notice that css and js are imported using a query string parameter, something like this:

<link rel="stylesheet" id="genesis-with-bootstrap-css" href="https://io.serendipityhq.com/wp-content/themes/theme/style.css?ver=0.1" type="text/css" media="all">

This means that if you edit a css or a js file it will not be rendered on the page, also if you upload it to your hosting via FTP: this is because the query string parameter is used by the browser to cache the file and load the page faster on next load.

And this means that you will not see the changes until the browser invalidates the cache (or you empty it).

So, when editing front-end files, you need to also modify the version of your theme to force the browser to download (and cache again) the new, updated version.

To change the version number, you need to edit the files style.css and config.php:

• The version in style.css will be used in the backend to show the current version of the theme;
• The version in config.php will be used to create the query string parameter for caching purposes.

So, whenever you edit a css or an scss file, you have to update both version numbers to see your changes on your live WordPress site.

Updating the source code of your Genestrap-based theme FROM the main Genestrap public repository

From time to time we make some changes to the code of Genestrap to adapt to new versions of Genesis or Bootstrap or to add some functionalities.

In general, we try to keep Genestrap as thin as possible: this way we can maintain the freedom of both Bootstrap and Genesis.

However, sometimes, as told, some changes are required.

Those changes can be made to two kinds of files:

1. *.dist.* files;
2. Internal files.

In the first case, you have no other options than updating manually your code, as this kind of file is meant to be customized by any one of us using Genestrap.

When modifications happen to internal files, instead, it is useful to know how to update your theme to the new version.

The flow is really simple and involves the use of git.

In the first part of this post, we removed the remote origin that pointed to the public repository of Genestrap on GitHub.

But that remote is required to update our local files (and then, also the ones in our remote repository).

So, we need to add again the remote public repository of Genestrap, but this time, we’ll call the remote exactly genestrap (just to be original!):

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote add genestrap https://github.com/Aerendir/Genestrap.git

So, we now have two remotes: origin and genestrap.

We can check them, too:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote
genestrap
origin
MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote show genestrap
* remote genestrap
Fetch URL: https://github.com/Aerendir/Genestrap.git
Push URL: https://github.com/Aerendir/Genestrap.git
HEAD branch: master
Remote branch:
master new (next fetch will store in remotes/genestrap)
Local ref configured for 'git push':
master pushes to master (local out of date)

Now, when you want to save your modifications to your private repository, you use git push origin master.

To update your theme to the last version of Genestrap, instead, you need to follow these steps:

1. checkout the last version of Genestrap from GitHub;
2. merge the checked out branch in your master branch;
3. Edit the version of your theme if required, commit and push;
4. push the updated master branch to your remote repository;
5. gulp build the theme again (maybe, changing the version number if required) and upload it to your WordPress live site.

1. checkout the last version of Genestrap from GitHub

This means running a command like this:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git checkout -b genestrap-master genestrap/master
Branch genestrap-master set up to track remote branch master from genestrap.
Switched to a new branch 'genestrap-master'

Now your active branch is genestrap-master that is the branch master on the GitHub public repository of Genestrap: at this moment you have the last version of Genestrap.

Now, you need to update the master branch of your local repository.

2. merge the checked out branch in your master branch

To merge the branch genestrap-master to master, you need to:

1. Make the master branch the active one;
2. Merge genestrap-master in master.

In console commands, the procedure is this:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git checkout master
Switched to branch 'master'
Your branch is up-to-date with 'origin/master'.
MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git merge genestrap-master
Updating d493923..c7534fe
Fast-forward
gulpfile.js | 76 +++++++++++++++++++++++++++++++++++++++++++---------------------------------
1 file changed, 43 insertions(+), 33 deletions(-)

If you run the above command again, git will tell you that there is nothing to update:

MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git merge genestrap-master
Already up-to-date.

3. Edit the version of your theme

As told before, you have to update the version number of your theme, so the cached files are ignored and the new ones are used by browsers.

You need to commit also these changes.

4. and 5. push and update

You already know how to do this: you need to push to your remote private git repository the update master branch (that now contains the modifications from branch genestrap-master), then rebuild the theme with gulp build.

Then you can update the theme on your WordPress live site.

Conclusions and next steps

You now have a clear understanding of how to use Genestrap to build a custom theme based on Genesis and Bootstrap for your WordPress site.

Remember to “Make. Ideas. Happen.”.

In the meantime, I wish you flocking users!

L'articolo How to set up the workflow to develop a Genestrap-based WordPress theme proviene da ÐΞV Experiences by Serendipity HQ.