/A-Modern-WordPress-Skeleton

Basic layout of a WordPress Git repository. I use this as a base when creating a new repo.

Primary LanguagePHP

A-Modern-WordPress-Skeleton

We're working on something exciting and this is how we're telling the world.

The setup

  • WordPress as a Git submodule in /wp/
  • Custom content directory in /content/ (cleaner, and also because it can't be in /wp/)
  • wp-config.php in the root (because it can't be in /wp/)
  • A-Better-Underscores-Theme as a submodule in /content/themes/A-Better-Underscores-Theme.
  • Modern frontend tooling that includes:
    • SASS (makes CSS awesome)
    • Basic Webpack setup to start you on the way to a better life with js. Webpack is pre configured to:
      • Cross compile your ES6/ES2015 javascript to ES5 with Babel. The futures is now!
      • Bundle your js module 'import' declarations in index.js to bundle.js.
      • Compile your SASS and watch for file changes.

Getting Started

  • From the command line navigate to your future site directory. (on non-windows machines it might be something like cd documents/dev/sites/).
  • Run git clone --recursive. This will make sure to also clone the /wp/ and /content/themes/A-Better-Underscores-Theme submodules.
  • Then navigate to /content/themes/A-Better-Underscores-Theme.
  • If your machine already has Node installed you can skip to the next step otherwise download and install.
  • Now a simple npm install.
  • To starting developing npm run webpack to compile you SASS and js.
  • When deploying to production environments use npm run build to compile and minify your assets.

You can find some additional theme documentation in /content/themes/A-Better-Underscores-Theme/readme.md.

Updating WordPress

  • From the command line navigate to /wp/.
  • Run git fetch --tags.
  • Check out the most recent tag git checkout x.x.x where x is the most recent WordPress update.
  • Navigate back to your project root.
  • Commit the updated WordPress files to the project repository.

Theme Setup

You'll need to do a five-step find and replace on the name in all the templates.

  1. Search for '_s' (inside single quotations) to capture the text domain.
  2. Search for _s_ to capture all the function names.
  3. Search for  _s (with a space before it) to capture DocBlocks.
  4. Search for _s- to capture prefixed handles.
  5. Search for Text Domain: _s in style.css.

OR

  • Search for: '_s' and replace with: 'megatherium'
  • Search for: _s_ and replace with: megatherium_
  • Search for:  _s and replace with:  Megatherium
  • Search for: _s- and replace with: megatherium-
  • Search for: Text Domain: _s and replace with: Text Domain: megatherium in style.scss.

Then, update the stylesheet header in style.scss, recompile your sass, and change the links in footer.php with your own information. Next, update or delete this readme.