Creating a starter template

    Utilizing a starter template is a great way to ensure that all of your projects start off on the right foot, everytime. And good news, creating a starter template is actually quite easy! All we need to do is create a Git repository containing our base WordPress installation and we're off!

    Not familiar with Git? No problem! We'll walk you through every command, so you won't be left in the dark. If you have a Git app you like to use, feel free to do so. If you happen to get stuck, we'd love to help you out! Our support staff will be happy to help you out with whatever you need!

    Creating a repository

    First things first, we need to create a Git repository. You can create your repository on whatever Git host your prefer, be it GitHub, GitLab, or BitBucket. We're going to go ahead and use GitHub, and you can find our code here.

    Initializing an empty repository

    Now, go ahead and create an empty directory for your project and open it up in a terminal. From your new directory, run the following command:

    git init
    

    This will initialize a new repository on your local machine that we can use to track changes and push them to our repository hosted on GitHub (or whatever host you happened to have chosen above).

    Configuring a remote

    Next, we'll connect our local Git repository to our Git host. From your project directory, run the following command, replacing <URL TO YOUR GIT REPOSITORY> with the repository URL provided by your Git host:

    git remote add origin <URL TO YOUR GIT REPOSITORY>
    

    Installing WordPress

    Now that we have an empty repository, we need to install WordPress into it. You can do that by simply downloading WordPress core and installing it into your project directory. You can download WordPress from the official site, or however you prefer. If you use an unconventional WordPress folder structure, then feel free to use that as well.

    Installing a theme and plugins

    Now comes the fun part! We can install whatever themes and plugins we would like to use going forward. Let's go ahead and install the popular Underscores theme. You can visit that link and download the Underscores theme source. After you do that, go ahead and install it into WordPress as you would normally. If you have a different theme you prefer, feel free to use that instead.

    Underscores theme

    Let's also remove the Hello Dolly plugin and install the ever-so-popular Yoast SEO plugin. You can either download it directly from WordPress.org, or if you have a development project set up, from the admin dashboard. Feel free to install any other plugins you like to use!

    Yoast SEO plugin

    And now that we can our theme and plugins configured, let's go ahead and move onto the final few steps.

    Creating a Juicefile

    If you've ever used the Underscores theme before, you know that it uses Sass when you download the source from GitHub. If not, then now you know. What is Sass? It's a nifty little language that compiles into CSS, providing lots of useful features. Anyways, back to Underscores: since it doesn't provide any way to compile Sass, we should set up an easy way for us to be able to do so from the app.

    We can do so by creating a file called a Juicefile (view our guide here). Let's go ahead and create that file, and open it up in your favorite text editor. Once it's opened, add the following content into it:

    # Define project configuration
    project:
      # Replaced with the name of our project when creating a new project
      name: <%= name %>
      # Replaced with the domain of our project when creating a new project
      url: <%= url %>
    

    The above will ensure that when we create a new project, our Juicefile will contain the correct configuration e.g., whatever name and domain was chosen during the create process. Pretty nifty.

    Next, we'll need to install Sass on our machine. To keep it simple, let's use NPM to do that by creating a package.json file at the root of your project with the following contents: (If you don't have NPM, install NPM and Node from here.)

    {
      "private": true,
      "devDependencies": {
        "node-sass": "^3.10.1"
      }
    }
    

    Now that we have a package.json file set up to install Sass, Let's add a command to our configuration that will allow us to compile Sass from the app, as well as run the template installation to fully install Sass. Let's go ahead and update our Juicefile to contain the following:

    # Define project configuration
    project:
      # Replaced with the name of our project when creating a new project
      name: <%= name %>
      # Replaced with the domain of our project when creating a new project
      url: <%= url %>
    
    # Define project commands
    commands:
      # Make sure Sass is installed using NPM
      install:
        - npm install
      # Compile our Sass files within our Underscores theme
      compile:
        - node_modules/.bin/node-sass wp-content/themes/_s/sass/style.scss wp-content/themes/_s/style.css
    

    Now, the above example is super simple, and I'd imagine that you would want to use something a little more robust like Grunt or Gulp to compile your Sass and do other things like minify images, if you're so inclined. But I'll leave that up to you.

    Finally, if we open up our project within the app and switch to the commands section, you'll notice that we can now run these commands from the app!

    Starter template commands section

    Wrapping up

    Last but not least, we need to stage all of our files using Git, commit them, and then finally push them to our repository to use. Let's go ahead and do that real quick by running the following commands:

    git add -A
    git commit -m 'Initial commit'
    git push origin master
    

    After your code is pushed to your Git remote, you can now use it when creating a new project by selecting 'other' from the template options dropdown and using your repository URL:

    Using a starter template

    Conclusion

    That's all there is to it! Now you can start off every project the same. If you have any questions, feel free to reach out using our support system or on Twitter at @themejuice.

    Happy coding!