Giter Club home page Giter Club logo

wordless's Introduction

Wordless logo

Wordless is an opinionated WordPress plugin that dramatically speeds up and enhances your custom themes creation. Some of its features are:

  • A structured, organized and clean theme organization
  • Bootstrap a new theme directly within wp-cli
  • Write PHP templates with Pug templating system
  • Write CSS stylesheets using the awesome Sass syntax
  • Write Javascript logic in Coffeescript
  • A growing set of handy and documented PHP helper functions ready to be used within your views
  • Development workflow backed by WebPack, BrowserSync (with live reload), WP-CLI, Yarn. All the standards you already know, all the customizations you may need.

Build Status Documentation Status

Getting started

Wordless GEM

The quickest CLI tool to setup a new WordPress locally. Wordless ready. Navigate to https://github.com/welaika/wordless_gem to discover the tool to setup all you need for local development. In less than 2 minutes ;)

(Not so) Manual

Prerequisites

  1. Install WP-CLI http://wp-cli.org/#installing
  2. Install global packages from NPM: npm install -g foreman yarn

Once done, considered you have a standard WordPress installation already up and running and you are in its root directory:

  1. wp plugin install wordless
  2. wp plugin activate wordless
  3. wp wordless theme create mybrandnewtheme
  4. cd wp-content/themes/mybrandnewtheme
  5. yarn install

Now you have all you need to start developing 💻; just be sure to be in your theme directory and run

yarn run server

webpack, php server and your browser will automatically come up and serve your needs :)

GiT and Deployment

Wordless 2.x is backed by WebPack for all code automation tasks (compiling, but it's up to you to eventually extend it to other behaviours - image optimization will probably be v2.1 goal). As a general advice on a default Wordless installation you should add screen.css and application.js your .gitignore.

Those compiled assets must obviously be deployed on remote server.

PUG templates are compiled by the WP plugin at runtime and cached in theme's tmp folder. So just gitignore tmp/* and no other worries.

As a result we provide a minimal .gitignore inside theme's folder:

tmp/
!tmp/README.mdown
application.js
screen.css
node_modules

Insights

Wordless 2. Re-embracing a modern flow. - An histotical overview about the Wordless history and why it moved from Ruby to Node.

How does it works - Basic concepts (WIP)

Wordless theme anatomy - Structure and conventions

Additional recommended plugins and tools

Wordless is not meant to be a bloated, all-included tool. This is why we recommend adding some other plugins to get the most out of your beautiful WP developer life.

  • We are developing Wordless-extender. A little plugin, that brings our collection of favorite plugins and let you set up some constants in wp-config.php useful in hardening the WP installation. At the moment is not yet well documented and absent from wordpress.org repository, but we are moving fast, so keep follow!

  • Wordmove: a great gem (from yours truly) to automatically mirror local WordPress installations and DB data back and forth from your local development machine to the remote staging server;

  • Wordless-gem: the CLI sheriff for your Wordless theme! Compile and clean assets, create new WP installation, a new wordless theme and let you set up a deploy command in order to easily deploy your site, collaborating with Wordmove, with a wordless deploy (warning: with the advent of Wordless 2.x some wordless-gem's functions are no more useful. We are in the process to imagine its future deveopment path)

Known problems and limitations

  • Wordless has not been tested on Windows machines
  • The routing part can be drammaticaly improved to make it more readable and DRY

Deprecations

Wordless 2.5 deprecates the old ruby preprocessors support. It is disabled by default. If you need to develop an old theme you need to explicitely activate them by setting the following in your wp-config.php

define('WORDLESS_LEGACY', true);

Wordless 3 is planned to completely remove this support.

Inline code documentation

You can find it here. If you are intrested in contribuing to the documentation:

  • we are documenting the following at the moment (path recursive)
wordless/helpers/*
wordless/helpers/placeholder_images/*
wordless/helpers/templates/*
vendor/mobile_detect.php
  • here is a list of documentation holes :9
  • go and add doc following the doxygen guides
  • pull-request your commits
  • we'll recompile the doxygen doc
  • the community will be grateful!

Localization

Wordless is available in English, German, Greek, Italian and Spanish, at the moment.

The user interface was translated by Wasilis Mandratzis-Walz (German and Greek), David Mejorado (Spanish).

Your help is welcome! Add your own language using Transifex.

Need more tools?

Visit WordPress Tools.

Third Part Libraries

Author

made with ❤️ and ☕️ by weLaika

License

(The MIT License)

Copyright © 2011-2018 weLaika

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.