WP Base

From Things and Stuff Wiki
Jump to: navigation, search

Things and Stuff Wiki - An organically evolving personal wiki knowledge base with a totally on-the-fly taxonomy containing topic outlines, descriptions and breadcrumbs, with links to sites, systems, software, manuals, organisations, people, articles, guides, slides, papers, books, comments, screencasts, webcasts, scratchpads and more. Use the Table of Contents to navigate on longer pages, use the Small-ToC and Tiny-ToC above on longer pages. probably not that mobile friendly atm. I am milk (or milkii) on Freenode IRC, give me a pm for feedback, or see About for login and further information. / et / em

A theming process.

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);


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

See Grid/rhythm#semantic.gs


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


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

the git one doesn't work, to check.


# 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;

  • wordpress-importer - for testing theme


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


  • Signup, comment, avatar, trackback settings