{{post.title}}
4 |{{post.preview}}
5 | {% if post.get_thumbnail %} 6 |├── acf └── .gitkeep ├── acf-json └── .gitkeep ├── assets ├── css │ └── app.css ├── js │ └── app.js ├── fonts │ └── .gitkeep └── images │ └── cookie.png ├── source ├── styles │ ├── components │ │ └── .gitkeep │ ├── layouts │ │ └── .gitkeep │ ├── utility │ │ ├── _mixins.scss │ │ ├── _variables.scss │ │ └── _normalize.scss │ ├── app.scss │ └── common │ │ └── _base.scss └── scripts │ ├── app.js │ ├── components │ └── MyComponent.vue │ └── utils │ └── polyfills.js ├── views ├── footer.twig ├── sidebar.twig ├── 404.twig ├── front-page.twig ├── page-slug.twig ├── author.twig ├── comment.twig ├── archive.twig ├── tease.twig ├── index.twig ├── partials │ ├── nav.twig │ └── pagination.twig ├── single-password.twig ├── page.twig ├── search.twig ├── html-header.twig ├── single.twig └── base.twig ├── .gitignore ├── jsconfig.json ├── screenshot.png ├── style.css ├── .eslintrc ├── lib ├── src │ ├── Core │ │ ├── Menu.php │ │ ├── MenuItem.php │ │ ├── Assets.php │ │ └── Site.php │ ├── Config │ │ ├── MenuSettings.php │ │ ├── ImageSettings.php │ │ ├── CustomTaxonomies.php │ │ ├── AdminSettings.php │ │ ├── ThemeSupport.php │ │ ├── PostSettings.php │ │ ├── TwigSettings.php │ │ ├── CustomPostTypes.php │ │ └── ACFSettings.php │ └── PostTypes │ │ └── CustomPost.php └── autoload.php ├── static └── no-timber.html ├── sidebar.php ├── 404.php ├── .vscode └── tasks.json ├── search.php ├── header.php ├── author.php ├── single.php ├── index.php ├── package.json ├── footer.php ├── page.php ├── functions.php ├── webpack.mix.js ├── archive.php └── README.md /acf/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /acf-json/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/css/app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/fonts/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/styles/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/styles/layouts/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/styles/utility/_mixins.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/styles/utility/_variables.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /views/footer.twig: -------------------------------------------------------------------------------- 1 | Copyright {{"now"|date('Y')}} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | node_modules 4 | npm-debug.log -------------------------------------------------------------------------------- /views/sidebar.twig: -------------------------------------------------------------------------------- 1 | Sidebar in Timber. Add HTML to your hearts content. -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "./source/**/*" 4 | ] 5 | } -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danwill/timber_starter_theme/HEAD/screenshot.png -------------------------------------------------------------------------------- /assets/images/cookie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danwill/timber_starter_theme/HEAD/assets/images/cookie.png -------------------------------------------------------------------------------- /views/404.twig: -------------------------------------------------------------------------------- 1 | {% extends "base.twig" %} 2 | 3 | {% block content %} 4 | Sorry, we couldn't find what you're looking for. 5 | {% endblock %} -------------------------------------------------------------------------------- /source/styles/app.scss: -------------------------------------------------------------------------------- 1 | @import "utility/normalize"; 2 | 3 | @import "utility/variables"; 4 | @import "utility/mixins"; 5 | 6 | @import "common/base"; -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Theme Name: Mechanic 3 | * Description: Custom theme built by Mechanic 4 | * Author: Mechanic (http://builtbymechanic.com) 5 | */ -------------------------------------------------------------------------------- /views/front-page.twig: -------------------------------------------------------------------------------- 1 | 2 | {# No specific markup for the home page, yet. Add it here inside a content block! #} 3 | 4 | {% extends "page.twig" %} 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:vue/recommended" 5 | ], 6 | "rules": { 7 | "no-console": "off" 8 | } 9 | } -------------------------------------------------------------------------------- /source/styles/common/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | img { 6 | max-width: 100%; 7 | } 8 | 9 | [v-cloak] { 10 | display: none; 11 | } -------------------------------------------------------------------------------- /views/page-slug.twig: -------------------------------------------------------------------------------- 1 | {% extends "base.twig" %} 2 | 3 | {% block content %} 4 |
Timber not activated
10 | 11 | 12 | -------------------------------------------------------------------------------- /sidebar.php: -------------------------------------------------------------------------------- 1 | 2 |{{post.preview}}
5 | {% if post.get_thumbnail %} 6 |Timber not activated. Make sure you activate the plugin in ' . esc_url(admin_url('plugins.php')) . '
'; 12 | }); 13 | add_filter('template_include', function ($template) { 14 | return get_stylesheet_directory() . '/static/no-timber.html'; 15 | }); 16 | return; 17 | } 18 | 19 | use Timber\Timber; 20 | use Mechanic\Core\Site; 21 | 22 | // Timber::$cache = true; 23 | Timber::$dirname = [ 24 | 'views', 25 | 'views/partials', 26 | ]; 27 | 28 | /** 29 | * By default, Timber does NOT autoescape values. Want to enable Twig's autoescape? 30 | * No prob! Just set this value to true 31 | */ 32 | Timber::$autoescape = false; 33 | 34 | require_once('lib/autoload.php'); 35 | 36 | new Site(); 37 | -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | // Laravel Mix config 2 | // Documentation: https://github.com/JeffreyWay/laravel-mix/tree/master/docs#readme 3 | 4 | const mix = require('laravel-mix'); 5 | 6 | const source = 'source'; 7 | const public = 'assets'; 8 | 9 | mix.setPublicPath(public); 10 | 11 | // Full options: https://browsersync.io/docs/options/ 12 | mix.browserSync({ 13 | proxy: 'project.test', 14 | files: [ 15 | `${public}/js/*.js`, 16 | `${public}/css/*.css`, 17 | 'views/**/*.twig', 18 | '**/*.php' 19 | ], 20 | ghostMode: false 21 | }); 22 | 23 | if (mix.inProduction()) { 24 | mix.version(); 25 | mix.options({ 26 | terser: { 27 | terserOptions: { 28 | compress: { 29 | drop_console: true 30 | } 31 | } 32 | } 33 | }); 34 | } 35 | 36 | // mix.js(`${source}/scripts/app.js`, `${public}/js`).sourceMaps() //to enable sourcemaps 37 | mix.js(`${source}/scripts/app.js`, `${public}/js`) 38 | .sass(`${source}/styles/app.scss`, `${public}/css`, { 39 | outputStyle: mix.inProduction() ? 'compressed' : 'expanded' 40 | }) 41 | .options({ 42 | processCssUrls: false 43 | }); 44 | 45 | 46 | 47 | mix.disableNotifications(); -------------------------------------------------------------------------------- /archive.php: -------------------------------------------------------------------------------- 1 | 6 | {% endblock %} 7 | 8 | 9 | {{ _e( 'Skip to content') }} 10 |'; 99 | print_r($field); 100 | echo ''; 101 | return $field; 102 | }); 103 | */ 104 | // Only shows top-level taxonomy terms for specified field names 105 | // https://support.advancedcustomfields.com/forums/topic/taxonomy-field-filter-to-only-show-parents/ 106 | /*add_filter('acf/fields/taxonomy/wp_list_categories', function($args, $field) { 107 | if($field['_name'] == 'person_sector') { 108 | $args['depth'] = 1; 109 | } 110 | return $args; 111 | }, 10, 2);*/ 112 | 113 | // Filter to customize the value shown on Post Object types for custom posts that don't support a title 114 | // @link https://www.advancedcustomfields.com/resources/acf-fields-post_object-result/ 115 | /* 116 | function posttype_post_object_result( $title, $post, $field, $post_id ) { 117 | $title = get_field('first_name', $post->ID) . ' ' . get_field('last_name', $post->ID); 118 | return $title; 119 | } 120 | add_filter('acf/fields/post_object/result/name=acffieldname', 'posttype_post_object_result', 10, 4); 121 | */ } 122 | } 123 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mechanic Starter WP Theme 2 | 3 | This is a barebones project scaffold for developing Wordpress themes. It creates a project with the following features: 4 | * Laravel Mix - Makes webpack much more tolerable 5 | * Timber - Enables the Twig templating engine within Wordpress templates 6 | * ACF Pro - Provided as a distributed plugin 7 | * Soil - Sensible Wordpress defaults 8 | * Vue - For front-end magic 9 | 10 | This starter theme is based on the awesome [timber-starter-theme](https://github.com/laras126/timber-starter-theme) and [lumberjack](https://github.com/Rareloop/lumberjack) 11 | 12 | 13 | ## What's here? 14 | 15 | `assets/` contains static front-end files and images. In other words, your compiled CSS, JS, SVGs, or any PNGs would live here. 16 | 17 | `acf-json/` contains JSON files for tracking Advanced Custom Fields. This is incredibly useful for version control. After cloning this repository, you can go in`to Custom Fields from the Dashboard and select "Sync" to import these custom fields into your theme. 18 | 19 | `lib/` contains files for custom post type arguments and taxonomies. These are added to WordPress inside functions.php and could be included there, but are separated into other files to keep functions.php a bit cleaner. 20 | 21 | `views/` contains all of your Twig templates. These correspond 1 to 1 with the PHP files that make the data available to the Twig templates. 22 | 23 | `source/` has all of your working Sass and JS (Vue) files 24 | 25 | `front-page.php` and `views/front-page.twig` are templates for a static home page should you choose to use one. This template will automatically be applied to that page whatever its name may be. 26 | 27 | ## Setup 28 | 29 | We like using [Laravel Valet](https://laravel.com/docs/5.4/valet) for serving up our local sites. Here's how to get that set up: 30 | 31 | 1. Make sure Homebrew is [installed](https://brew.sh/) and updated: `brew update` 32 | 2. Confirm that the `~/.composer/vendor/bin` directory is in your system's `PATH` 33 | 3. Install Laravel Valet by following the instructions [here](https://laravel.com/docs/5.4/valet) 34 | * Make sure PHP 7.1 is installed (`php -v`), according to the Valet instructions 35 | 4. Run `valet park` within your main project folder (e.g. `~/Sites/`) 36 | 5. Install MariaDB: `brew install mariadb` 37 | 6. Start MariaDB: `mysql.server start` 38 | * Note that rebooting may stop this process. To keep the service running, you can run `brew services start mariadb`. Review running services with `brew services list`. 39 | 40 | Finally, there are a couple of Wordpress-specific command line tools we need: 41 | 1. Install [WP-CLI](http://wp-cli.org/) 42 | 2. Install scaffolding plugin: `wp package install aaemnnosttv/wp-cli-valet-command` 43 | 44 | May need to increase PHP memory limit. If you get any "allowed memory size of X bytes exhausted" errors: 45 | 1. Find where your local php.ini file: `php --ini` 46 | 2. Open the `php.ini` file at the listed path and search for `memory_limit` 47 | 3. Change the value to `512M` then save 48 | 4. Type `php -ini | grep memory_limit` to make sure the change was applied. If not, look for a `php-memory-limits.ini` file instead of `php.ini` and apply the value there. 49 | 50 | 51 | ## Creating a Project 52 | 53 | Here's how to create a new Wordpress project and clone in this starter theme to get started: 54 | 55 | 1. In your command line, go to your project folder (e.g. `~/Sites/`), or wherever you parked Valet above. 56 | 2. Run `wp valet new your-project-name --unsecure` 57 | * You can leave off the `--unsecure` flag to enable HTTPS locally 58 | * You can change this option after the project is created using `valet secure your-project-name` / `valet unsecure your-project-name` 59 | * Full list of options available [here](https://github.com/aaemnnosttv/wp-cli-valet-command#wp-valet-new) 60 | 3. Confirm that the site is running by opening the URL that is returned in the success message 61 | 4. `cd` into the project directory 62 | 63 | 64 | Let's clone in this starter theme and set up some stuff in Wordpress: 65 | 66 | 1. From your project folder, `cd` in the plugins folder: `cd wp-content/plugins` 67 | 2. Clone in the [Soil plugin](https://roots.io/plugins/soil/): `git clone --depth=1 https://github.com/roots/soil.git --single-branch soil && rm -rf soil/.git` 68 | 3. Remove some default plugins: `wp plugin uninstall hello akismet` 69 | 4. Activate Soil: `wp plugin activate soil` 70 | 5. `cd ../themes` 71 | * You may want to remove the standard Wordpress themes from this directory (`open .`) 72 | 6. Clone in this theme: `git clone --depth=1 https://github.com/danwill/timber_starter_theme.git your-project-name && rm -rf your-project-name/.git` 73 | 7. `open https://www.advancedcustomfields.com/my-account/`, sign on, and download the most recent version of ACF Pro 74 | 8. Copy the contents of the ACF Pro .zip file into the theme's `acf/` directory 75 | 9. `cd` into the theme folder (e.g. `cd your-project-name`) 76 | 10. Add in the timber library: `composer require timber/timber` 77 | 11. Activate the starter theme: `wp theme activate your-project-name` 78 | 79 | Now get our front-end process set up: 80 | 81 | 1. Make sure you are in your theme folder 82 | 2. Run `npm install` 83 | 3. Open up the _webpack.mix.js_ file (or use `code webpack.mix.js`) and edit the **browsersync proxy to point to the .test url** (e.g.