WP Base

A theming process using Bones.

Base theme

• bones
  • bones/library/scss
  • style.scss
    • import _normalize.scss - a reset
    • import _mixins.scss - colours, typography, basic buttons+alerts
    • import _base.scss - 320px to 480px. basic styles.
    • media query, min-width: 481px - _481up.scss - larger mobile devices. navigation, post & content, footer.
    • media query,min-width: 768px - _768up.scss - tablet and desktop. has a grid (1140px, ugh)
    • media query, -webkit-min-device-pixel-ratio: 1.5, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5 - _2x.scss - for retina devices
    • basic print style
  • webfont goes in library/fonts

• Create new Git branch of theme

@include rounded(4px);
@include border-radius(4px,4px,0,0);
@include transition(all,2s,ease-out);
@include box-shadow(5px, 5px, 10px, #000);
@include css-gradient(#dfdfdf,#f8f8f8);
@include box-sizing(border-box);

Grid

• semantic.gs
  • zipball
  • grid.scss | grid.scss (raw)

wget https://raw.github.com/twigkit/semantic.gs/master/stylesheets/scss/grid.scss grid.scss / 
 -O _grid.scss

Import in _481up.scss or _768up.scss?

@import "grid";
  defaults to 12 column, 960 grid system. Customize by overriding three variables
  (after the import has been declared):

@column-width: 60;
@gutter-width: 20;
@columns: 12;

@total-width: 100%;
  for fluid (percentage-based) grid rather than a fixed pixels

Preprocess

• https://github.com/sanchothefat/wp-sass - uses richthegeek/phpsass

git clone git://github.com/sanchothefat/wp-sass.git wp-content/plugins/wp-sass
git submodule update --init --recursive

Alter bones.php to register the style.sass after turning on the module.

Install process

Is a WIP

See https://gist.github.com/milkmiruku/3157720

mkdir wp-content/themes/bones && cd $_ && wget https://github.com/eddiemachado/bones/zipball/master
&& unzip master && mv eddie*/* eddie*/.. && rm -rf eddie* && rm master

or

git archive --remote=git://github.com/eddiemachado/bones.git master | tar -xf -

the git one doesn't work, to check.

plugins

# backup
wp plugin install backwpup

# cache
wp plugin install w3-total-cache
# wp plugin install wp-super-cache
# wp plugin install cloudflare

# dev
wp plugin install wordpress-sass
wp plugin install rewrite-rules-inspector
wp plugin install font-uploader
wp plugin install wp-show-ids
wp plugin install lorem-ipsum-generator-shortcode

# form
wp plugin install advanced-custom-fields
wp plugin install front-end-editor
wp plugin install hide-login
wp plugin install login-security-solution

# etc
wp plugin install google-analytics-for-wordpress
wp plugin install all-in-one-seo-pack

# activate
wp plugin activate backwpup
wp plugin activate w3-total-cache
# wp plugin activate wp-super-cache
# wp plugin activate cloudflare
wp plugin activate wordpress-sass
wp plugin activate rewrite-rules-inspector
wp plugin activate font-uploader
wp plugin activate wp-show-ids
wp plugin activate advanced-custom-fields
wp plugin activate front-end-editor
wp plugin activate hide-login
wp plugin activate login-security-solution
wp plugin activate google-analytics-for-wordpress
wp plugin activate all-in-one-seo-pack

# init login-security-solution

to sort;

• http://wordpress.org/extend/plugins/theme-check/

• wordpress-importer - for testing theme

• http://wordpress.org/extend/plugins/nginx-compatibility/

• http://wordpress.org/extend/plugins/rewrite-rules-inspector/
  • https://github.com/Automattic/Rewrite-Rules-Inspector
• http://wordpress.org/extend/plugins/backwpup/
• http://wordpress.org/extend/plugins/google-analytics-for-wordpress/
• http://wordpress.org/extend/plugins/google-sitemap-generator/
• http://wordpress.org/extend/plugins/w3-total-cache/
• http://wordpress.org/extend/plugins/all-in-one-seo-pack/

Post-install

To work into install script

• Remove sample post, page, links

• Settings
  • Blog / network
  • General: title, tagline,
  • Permalink? - default nginx blog/2012/08/14/sample-post/, to check if required

• Theme
  • Make sure preprocess and grid is available
  • Change name, etc, in style.css
  • Activate

• Set preprocess things in
  • _mixins.scss - colours, fonts
    • Webfont via Font Squirrel
  • _base.scss - styles for single column pages

Prelaunch

• Signup, comment, avatar, trackback settings