Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/adampatterson/axe

Axe is a simple bare-bones WordPress starter theme for Developers.
https://github.com/adampatterson/axe

acf boilerplate css php theme wordpress wordpress-workflow workflow

Last synced: 3 months ago
JSON representation

Axe is a simple bare-bones WordPress starter theme for Developers.

Awesome Lists containing this project

README 

        
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](https://en-ca.wordpress.org/plugins/custom-post-type-ui/) and setup any page data structures using [ACF](http://www.advancedcustomfields.com/).



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();?>



    console.log(<?= json_encode($data) ?>)



```



### Supports 



 * Favicon

 * [Header Image](https://codex.wordpress.org/Custom_Headers) 

 * [Background Image](https://codex.wordpress.org/Custom_Backgrounds)



### 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](https://github.com/adampatterson/Axe/tree/master/src) 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](https://laravel.com/docs/5.8/mix). If you are looking for a more advanced Mix configuration then have a look at the officual docs.



**Mix Installation**as

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](https://github.com/adampatterson/Axe/blob/master/templates/loop-post.php) for an example.



## Helper Functions



`mix()` - Allows you to use Laravel Mix with WordPress [read more here](https://www.adampatterson.ca/2018/axe-handle-updated-to-include-webpack-mix/). 



`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](https://github.com/adampatterson/Axe/blob/master/index.php#L2).



`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](https://github.com/FullHuman/purgecss) supports white listing of css class names, some defaults have been included in the `webpack.mix.js` file [here](https://github.com/adampatterson/Handle/blob/68bdd609a582baa4df0cadec67bf0d437bb60029/webpack.mix.js#L21).



It's also possible to [whitelist](https://github.com/FullHuman/purgecss-docs/blob/master/whitelisting.md#in-the-css-directly) specific classes or chunks of css.



## Dummy Content for Gutenberg

Sridhar Katakam has provided an article outlining how to add [dummy content for Gutenberg](https://sridharkatakam.com/dummy-content-for-gutenberg/). 



# Child theme

https://github.com/adampatterson/Handle



Opening `Helpers.php` and uncommenting the function on [line 6](https://github.com/adampatterson/Handle/blob/master/lib/Helpers.php#L6) 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](http://underscores.me/)

Some of the class registration was inspired from by [Alecaddd](https://github.com/Alecaddd/awps)



#### 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 [email protected]