Axe

Axe is a simple bare bones WordPress starter structure. It is a theme meant to be a starting point to get you setup and running as fast as possible.

My build workflow might not be very orthodox but I typically review the design, Setup my Custom post types using Custom Post Type UI and setup any page data structures using ACF.

Simply being able to plow ahead creating my site structures and loading in real or fake content lets me have something tangible to work with.

Another tip that I can provide is using console.log to output my ACF structures reducing the need to be to refer back to the admin pages.

/*
 * Load this in your footer, and 
 * check to see if the user is logged in.
 * /
<? $data = get_fields();?>
<script>
    console.log(<?= json_encode($data) ?>)
</script>

Supports

• Favicon
• Header Image
• Background Image

Theme Structure

Axe/
├── acf-json/
│   └── ...
├── assets/
│   └── ...
│   └── css
│   └── fonts
│   └── ico
│   └── img
│   └── js
│   └── vendor
├── lib/
│   └── ...
├── node_modules/
│   └── ...
├── src/
│   └── ...
│   └── js
│   └── scss
├── templates/
│   └── ...    
│   └── partials/
│   └── partials/loop-{type}.php
│   └── partials/blocs/
│   └── content-{slug}.php
│   └── single-{slug}.php
│   └── sub-{parent_slug}.php
├── vendor/
│   └── ...    
├── woocommerce/
│   └── ...
├── composer.json
├── package.json
└── webpack.mix.js

Build

Included is a bower file preset with Bootstrap SASS, jQuery and a couple other commonly used packages. Bower will install packages to /src/vendor.

The src folder stores your SASS and JS that should be compiled into /assets.

Use whatever build tool you want. A CodeKit file has been included to get up and running FAST. There is also an optional basic Webpack config that takes advantage of Laravel Mix. If you are looking for a more advanced Mix configuration then have a look at the officual docs.

Mix Installationas https://laravel.com/docs/master/mix

Running Mix https://laravel.com/docs/master/mix#installation

• The webpack.mix.js file is located in the theme root directory
• npm run watch to start browserSync with LiveReload and proxy to your custom URL
• npm run dev to quickly compile and bundle all the assets without watching
• npm run prod to compile the assets for production

Home page

Placing a file under templates/content-home.php will resolve the home page and would be used by /

Page templates

Placing a file under templates/content-{slug}.php will resolve the home page. Using content-contact.php would be used by /contact

Sub Page templates

Placing a file under templates/sub-{parent_slug}.php will resolve the home page. Using sub-services.php would be used by all pages under service like /services/design

Post format templates

Placing a file under templates/format-video.php will resolve all video formats.

Custom Post Type templates

Placing a file under templates/single-books.php will resolve all custom post type single posts.

Custom Taxonomies

Placing a file under templates/archive-books.php will resolve a custom taxonomy for Books /books/sci-fi/ also using a custom loop. The default archive would be archive-default.php using the default post loop.

Custom Loops

If you have a custom post type called Books, creating content-books.php and loading a custom loop like loop-books.php with all the necessary "Loop" code would give you your custom book loop.

See loop-post.php for an example.

Helper Functions

mix() - Allows you to use Laravel Mix with WordPress read more here.

mix($filepath, $useParent = true) - In some cases the core theme might be used with a network site and will require the ability to load assets from both the Child and Parent theme. Omitting useParent will keep the same functionality.

get_template_part_acf() - Works exactly like get_template_part() except that it uses an include making it more suitable to use with ACF. You can include your custom content once which is already done for you. Have a look here.

is_sub_page() - Used to determine if you are on a sub page.

__t() - Returns the template directory, It should be noted that this is easily over written in the child theme.

__a()- Returns the assets relative to the template directory. /assets/

__j() - Prints the JS path. /assets/js/

__i() - Prints the Images path /assets/img/

__c() - Prints the CSS path /assets/css/

__v() - Prints the Vendor path (Bower, other libraries) /assets/vendor/

__lib($path) - Returns the lib path (custom theme classes like Navigation walkers)/lib/

__m() - Returns the mix-manifest.json file path.

__video() - Echos the video path. /assets/video/

Functions in the parent theme should be wrapped with function_exists extend the child theme and prevent any conflicts.

show_template() -

get_the_logo() -

if_custom_logo() -

@todo: Loop Helpers @todo: Widgets

Style

@import "components/base-variables";
@import "~bootstrap/scss/bootstrap";

With the addition of PurgeCSS to the build script you can safely include the entire Bootstrap library. Once a production build has been done, any unused CSS classes will be removed.

base-variables houses any site specific variables that you might need.

PurgeCss supports white listing of css class names, some defaults have been included in the webpack.mix.js file here.

It's also possible to whitelist specific classes or chunks of css.

Dummy Content for Gutenberg

Sridhar Katakam has provided an article outlining how to add dummy content for Gutenberg.

Child theme

https://github.com/adampatterson/Handle

Opening Helpers.php and uncommenting the function on line 6 would allows the child theme to serve all of your themes assets.

Plugins

Axe will require a few plugins to run:

• Advanced Custom Fields Required
• Custom Post Type UI
• WooCommerce
• JetPack

Credits

Template tags are heavily modified versions of _S Some of the class registration was inspired from by Alecaddd

Disclaimer

This theme is made for Me, and with my efficiencies in mind. That said, If you have anything to add then send me an email hello@adampatterson.ca