WP Base
Jump to navigation
Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
A theming process.
Headless
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
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;
- wordpress-importer - for testing theme
- http://wordpress.org/extend/plugins/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
- _mixins.scss - colours, fonts
Prelaunch
- Signup, comment, avatar, trackback settings