How to set up the workflow to develop a Genestrap-based WordPress theme
Tags: experience, bootstrap, genesis, genestrap
Published: 2024-03-16 10:09:55

---
title: How to set up the workflow to develop a Genestrap-based WordPress theme
published: true
date: 2018-11-19 18:32:28 UTC
tags: Experience,Bootstrap,Genesis,Genestrap
canonical_url: https://io.serendipityhq.com/experience/genestrap-development-workflow/
---

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](https://dev.to/aerendir/how-to-create-your-custom-wordpress-theme-with-genestrap-45mj-temp-slug-8356768), 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.

![](https://io.serendipityhq.com/wp-content/uploads/sites/2/2018/09/bitbucket-genestrap-theme-empty-repo.png)

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://Aerendir@bitbucket.org/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://Aerendir@bitbucket.org': 
* remote origin
  Fetch URL: https://Aerendir@bitbucket.org/Aerendir/web-serendipityhq-wp_theme.git
  Push URL: https://Aerendir@bitbucket.org/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://Aerendir@bitbucket.org': 
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://Aerendir@bitbucket.org/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:

![](https://io.serendipityhq.com/wp-content/uploads/sites/2/2018/09/bitbucket-genestrap-theme-pushed.png)

Verify again the `remote`:

```
MacBook-Pro-di-Aerendir:GenestrapTheme Aerendir$ git remote show origin
Password for 'https://Aerendir@bitbucket.org': 
* remote origin
  Fetch URL: https://Aerendir@bitbucket.org/Aerendir/web-serendipityhq-wp_theme.git
  Push URL: https://Aerendir@bitbucket.org/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](https://io.serendipityhq.com/experience/genestrap-development-workflow/) proviene da [ÐΞV Experiences by Serendipity HQ](https://io.serendipityhq.com).