PHPackages withfatpanda/ship - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. withfatpanda/ship ActiveWordpress-theme[Utility & Helpers](/categories/utility) withfatpanda/ship ================= a WordPress Starter Theme 1.0.6(8y ago)222GPL-2.0PHPPHP >=7.0 Since Dec 25Pushed 8y ago2 watchersCompare [ Source](https://github.com/withfatpanda/ship)[ Packagist](https://packagist.org/packages/withfatpanda/ship)[ RSS](/packages/withfatpanda-ship/feed)WikiDiscussions master Synced 2w ago READMEChangelogDependencies (1)Versions (7)Used By (0) Ship: a WordPress Starter Theme =============================== [](#ship-a-wordpress-starter-theme) Ship is a WordPress Starter Theme standing on the shoulders of giants like [Underscores](http://underscores.me), [UnderStrap](http://understrap.com), and [Sage](http://roots.io/sage). We called it "Ship" because it helps us ship great web experiences, faster. That speed is achieved through some highly opinionated decisions about tools and process; if you want variety, fork Ship to create your own, or use [Sage](http://roots.io/sage). Why you should "Ship" your next WordPress Theme: ------------------------------------------------ [](#why-you-should-ship-your-next-wordpress-theme) - It's completely free (as in beer: GPL-2.0) - Sass stylesheets based on [Bootstrap 4](https://getbootstrap.com) - Mobile-first, responsive design - Uses [NPM](https://www.npmjs.com/) to manage dependencies (bye Bower!) - Build script included, based on [Laravel Mix](https://github.com/JeffreyWay/laravel-mix/tree/master/docs#readme) ([Webpack](https://webpack.github.io/) in a beautiful disguise) - Auto-minify, concatenate, and version CSS and JS - Traditional PHP templates or go [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) with [Laravel Blade](https://laravel.com/docs/5.4/blade) (requires PHP 7) - Jetpack ready - WooCommerce support - Contact Form 7 support - Translation ready Other features, in progress: ---------------------------- [](#other-features-in-progress) - Algolia ready: real-time search for admins and visitors - [Vue.js](https://vuejs.org/) for building themes as [Single-Page Applications](https://en.wikipedia.org/wiki/Single-page_application) - A theme builder framework based on [Advanced Custom Fields](https://www.advancedcustomfields.com) - Live reloading - A build script for generating commercial distributions License ------- [](#license) Ship is released under the terms of the [GPL version 2](http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html) or (at your option) any later version Support ------- [](#support) If you need or can support this project, please head over to [issues](https://github.com/withfatpanda/ship/issues) Changelog --------- [](#changelog) See [changelog](CHANGELOG.md) Starting a new project ---------------------- [](#starting-a-new-project) You'll need to have [Composer](https://getcomposer.org/) installed. 1. Open your terminal 2. Run `composer create-project withfatpanda/ship "your/theme/path"` 3. Answer the on-screen questions Development ----------- [](#development) Ship wants your workflow to be as painless as possible. Below we move quickly through several topics that might be new to you, among them *Dependency Management*, *Builds*, and *Asset Loading*. For those of you who want a quicker start instead, it goes something like this: - Install [Composer](https://getcomposer.org/doc/00-intro.md#installation-linux-unix-osx) and [NPM](https://www.npmjs.com/get-npm) - Create a new Ship project (your theme) with composer: `composer create-project withfatpanda/ship "path/to/your/project"` - Install front-end dependencies: `npm install` - Start your watcher (builds your front-end in the background as you edit your code): `npm build watch` - Put your theme's scripts into `src/js/theme.js` - Build [Customizer](https://codex.wordpress.org/Theme_Customization_API) features in `src/js/customizer.js` - Style your theme in `src/sass/theme/_theme.scss` - Style the content in the admin editors in `src/sass/custom-editor-style.scss` - Finish dev, test, distribute ### Installing Dependencies [](#installing-dependencies) All of Ship's JS and CSS is built upon a core set of dependencies, chief among them being Bootstrap. Your new build system, Laravel Mix, also loads as a dependency. All of these dependencies are managed through [NPM](https://www.npmjs.com). If you don't have NPM installed, you'll need to [do that first](https://www.npmjs.com/get-npm). Next, from the root of your theme project, run `npm install`. All of your theme's dependencies will appear in a folder named `node_modules/`. There are going to be a lot of files—don't let this freak you out, and welcome to modern JavaScript development. Once your dependencies have loaded, you can test-build by running the following command: `npm run dev`. If you get a "Compiled successfully..." message, then it's all working. If you don't, [post your issue here](https://github.com/withfatpanda/ship/issues). ### Front-end source files [](#front-end-source-files) The JS and CSS source files that underpin your new theme are as follows—there are other files in there too, but those listed below are the ones relevant to learning this part: ``` ├── src ├── img │ ├── header.jpg ├── js │ ├── customizer.js │ └── theme.js └── sass ├── theme │ ├── _theme.scss │ └── _variables.scss ├── custom-editor-style.scss └── theme.scss ``` You'll want to put your theme's JavaScript into `src/js/theme.js` and/or load other modules of code into that file. You'll want to put your theme's styles into `src/sass/theme/_theme.scss` and/or load other modules of code into *that* file. #### Other front-end source files: [](#other-front-end-source-files) **img/header.jpg** is an example so that you know where to place static imagery for your theme; files placed here are optimized and copied to public assets during the build **js/customizer.js** is where you can write code that will load into the [Customizer](https://codex.wordpress.org/Theme_Customization_API#Step_2:_Create_a_JavaScript_File); there are some examples therein **js/theme.js** is where you write code that will load into every view of your theme **sass/theme/\_theme.scss** is where you write SCSS for your theme's main stylesheet **sass/theme/\_variables.scss** is where you set variables that influence Bootstrap's styles as well as those in your theme **sass/custom-editor-style.scss** is where you write SCSS to generate a stylesheet that loads inside TinyMCE; the default just loads your theme's main stylesheet and adds some padding to the `` tag **sass/theme.scss** knits together all of your theme-specific SCSS code with Bootstrap, Font Awesome, and a bit of magic from the Underscores and UnderStrap projects ### Building [](#building) Building your front-end code is as simple as running scripts with NPM at the command line. Just open your terminal, switch to the root of your theme project, and run any of the following: `npm run dev`This will build your JS and CSS unminified and (when we finish building it) using development environment settings `npm run watch`Use this command for active development sessions—it will build dev versions of your JS and CSS, unminified, and will begin "watching" your raw source files, recompiling them into the built output anytime you make a change `npm run hot`**Coming soon**: Live Reloading; basically just like the `watch` command, except any changes to raw source files (including PHP files) result in your browser refreshing automatically, too `npm run production`This will build minified and versioned copies of your JS and CSS, ready for distribution `npm run dist`This will build distribution-ready copies of your JS and CSS, just like the `production` command; then, this command creates a clean copy of your theme in `dist/` ready to ship without all of the dev stuff (build config files, raw JS and Sass code) ### Your built source files [](#your-built-source-files) Running any of the front-end build scripts above will generate and place files into an `assets/` folder in the root of your project: ``` ├── assets ├── css │ ├── custom-editor-style.css │ ├── custom-editor-style.css.map │ ├── theme.css │ └── theme.css.map ├── fonts │ └── ... all the fonts extracted during the build ├── img │ └── ... all the images from src/img ├── js │ ├── customizer.js │ ├── customizer.js.map │ ├── theme.js │ └── theme.js.map └── mix-manifest.json ``` The relationships between these compiled files and the raw source files should be fairly straight-forward (**Tip:** they're all named the same), but of special note is the `mix-manifest.json` file. The `mix-manifest.json` file, generated automatically during each build, establishes versions for your compiled files, i.e., *versioning*. When using asset loading (see below), the file version numbers are automatically appended to their URLs—this helps to force expiration of these resources from visitors' browsers, keeping their experience of your theme up-to-date. ### Loading assets [](#loading-assets) When loading a theme asset via PHP, use the global function `asset($path)` where `$path` is relative to your theme's assets folder. For example, invoking `asset('css/theme.css')` would generate a URL for your theme's main stylesheet. For an example in context, refer to the script `src/php/inc/enqueue.php`. ### Live reloading [](#live-reloading) Coming soon. ### Sass: Syntactically Awesome Style Sheets [](#sass-syntactically-awesome-style-sheets) If you're not using a CSS preprocessor to build your stylesheets, you're wasting a lot of time. If you've only ever used LESS, making the leap to Sass is fairly straightforward, and like us, we think you'll find Sass to be more robust and better-supported. Learn more about Sass [here](http://sass-lang.com/). ### ES6 and CommonJS [](#es6-and-commonjs) More details coming soon. ### Customizing your build [](#customizing-your-build) Your front-end build is powered by NPM and Laravel Mix (Webpack). The build commands described above in *Building* can be found in your `package.json` file in the section named `scripts`. They all ultimately invoke Webpack builds by way of Laravel Mix. Laravel Mix can be configured by editing `webpack.mix.js`. Most of the functions available to you for automating your builds are listed in this configuration file. You can also read Mix's documentation [here](https://github.com/JeffreyWay/laravel-mix/tree/master/docs#readme). ### RTL styles? [](#rtl-styles) Just add a new file to the themes root folder called rtl.css. Add all alignments to this file according to this description: [https://codex.wordpress.org/Right\_to\_Left\_Language\_Support](https://codex.wordpress.org/Right_to_Left_Language_Support) Single-Page Application Themes ------------------------------ [](#single-page-application-themes) Coming soon. Licenses & Credits ---------------------- [](#licenses--credits) - Sage: - UnderStrap: (GPL version 2) - Font Awesome: (Font: SIL OFL 1.1, CSS: MIT License) - Bootstrap: | (Code licensed under MIT documentation under CC BY 3.0.) and of course - jQuery: | (Code licensed under MIT) - WP Bootstrap Navwalker by Edward McIntyre: | GNU GPL - Bootstrap Gallery Script based on Roots Sage Gallery: [![Analytics](https://camo.githubusercontent.com/14e55d77c4626f4ac52e906f14f078ba34846172a4aeb71df8fd26ccbddfcb2a/68747470733a2f2f67612d626561636f6e2e61707073706f742e636f6d2f55412d353434303533322d31342f7769746866617470616e64612f736869702f524541444d452e6d64)](https://github.com/igrigorik/ga-beacon) ### Health Score 27 — LowBetter than 47% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community4 Small or concentrated contributor base Maturity62 Established project with proven stability How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 6 Last Release 3101d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/120316?v=4)[Aaron Collegeman](/maintainers/collegeman)[@collegeman](https://github.com/collegeman) ### Embed Badge ![Health badge](/badges/withfatpanda-ship/health.svg) ``` [![Health](https://phpackages.com/badges/withfatpanda-ship/health.svg)](https://phpackages.com/packages/withfatpanda-ship) ``` ### Alternatives [humanmade/workflows Workflow management for WordPress, an extensible event and notification system. 106148.9k4](/packages/humanmade-workflows) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)