While we’ll just be covering some general concepts about working with Sage, this example is based loosely on the approach we took for creating our own case studies archive page.Īs you might expect, we’ll need to write a bit of code to setup the custom query as well as format and store the results in a way that makes them usable in our view. Let’s say we we’re creating a CPT archive page and we’re using using a custom WP_Query that runs based on a search filter that can be submitted by the user on the archive page. In this example, we’ll illustrate how two commonly used tools for custom WordPress theme development – Custom Post Types (CPTs) and Advanced Custom Fields (ACF) – might be used in Sage when creating a CPT archive page template. Running this process at build time makes Sage sites load pretty fast! Under the hood, what’s going on here is that webpack is resolving your CSS and JS dependencies to minify your files and bundle them into a single JS and CSS file in a dist directory used for production. When you’re ready to compile assets for production, you can run yarn build:production. But it’s good to familiarize yourself with this command and check that everything is working. Since you’re running the build process for the first time and you haven’t added any styles or JS yet, you’ll just see a bare-bones starter site at this stage. Now, run yarn build to compile and optimize the files in your assets directory. If you’re familiar with NPM, you can think of this as the yarn equivalent of npm install. You can do this by going to your theme root and running yarn. You’ll still need to complete a few steps in order to get your Sage theme showing in the browser.įirst, you’ll need to install the initial project dependencies in order to run the build process to get Sage showing up in the browser.

Bare bones wordpress theme 2017