Bones – HTML5 Wordpress Theme Development

Bones – HTML5 WordpressTheme Development Kyle spehar

What is ‘Bones’? Bones is an HTML5, Mobile-First starter theme for rapid Wordpress development. Bones is built around the latest in Web Standards. It serves as an excellent base to build Wordpress themes. “Bones was created after years of editing and reusing the same template to develop custom sites. It came from trial and error and tons of experience customizing templates. I trimmed the fat on stuff that you don’t really need as well as adding things you almost always have to use plugins for.” – Eddie Machado, Wordpress Developer and blogger at Themble.

What is ‘Bones’? • At its core, Bones is designed to be used as a template for making your own theme. • Bones is NOT a framework. • Frameworks add a layer on top of the base. You’re not supposed to modify a framework’s code, only add your own code on top of it. • When building with Bones, you’re supposed to mess with the base code. Bones is as bare and minimalistic as possible. It's meant to be used on a per-project basis, this means no Child Themes. • Bones is completely FREE.

Features • Mobile-First & Responsive • Bones comes loaded with SASS and LESS • Custom Post Types & Custom Dashboard Functions Preloaded • Insanely Detailed • Fully Customizable • Made with HTML5 Boilerplate platform • Responsible Fallbacks for older browsers • Built for speed by prioritizing minimal bandwidth for mobile devices. • Clean Header Sections • Solid Documentation (GitHub, website is currently being renovated)

Features * Some of these statistics may be out of date. This chart was posted on September 5, 2011.

Installation • Download Bones • http://themble.com/bones/ • Themes Directory • Unzip the file into wp-content/themes and rename its directory to bones. • Theme Settings • Set the theme in the WP admin to Bones (at Appearances / Themes). • Theme Basic Data • Place theme name, description, author, version, etc. in style.cssin the theme’s main directory.

The Basic Page • This is how the website will look with the basic Bones theme. • The resolution of the screen in this screenshot is 1440 x 900 pixels. • As you can obviously see, there is plenty of room for customization.

Getting Started • Library folder • All of your LESS, SASS, CSS, JavaScript, images, and custom bones-specific function files are. • The first thing you will want to do is define custom post types. This is done in the library/custom-post-type.php file. • You can clear this file out if you don’t need it or customize the functions and settings to get the type of post you want. • It’s best to make use of as many built-in WordPress capabilities as possible.

Getting Started • Template Files • Bones starts you off with the core page layouts for viewing archives, author, pages, search, and single posts. • It has a template for page-custom, single-custom-type, and taxonomy-custom-cat. These files are meant to help guide you through making theme styles for custom posts as well as custom page themes. • If you want to have a special page template, add a file named page-my_template_name.php and at the top add: <?php /* Template Name: My Template Name */ ?> • This will show up in your Template folder when adding a new page. • You can also edit the footer, header, sidebar, and comment layouts, as well as the 404 page.

Bones Styling • Bones uses LESS and SASS CSS preprocessors, therefore you will need a compiler to compile and minify the styles into a production CSS file. • Delete folder for whichever preprocessor isn’t used. • LESS is located in library/less • SASS is located in library/scss • Compilers include: • Third-party – PrePros, Compass, WinLESS, etc. • Built into editor • Wordpress/JS plugin • Initially you’ll want to check out the mixinsfiles for LESS/SASS. Here you will find some core variables, cross-browser fixes, and common mixinfunctions.

Bones Styling • ie.less – all IE styles but without media queries • login.less – modify WP login page • mixins.less – LESS mixins & constants • normalize.less – general reset • style.less – main styles • 1030up.less – desktop • 1240up.less – mega sized monitor • 2x.less – styles for retina display • 481up.less – 481px+ styles • 768up.less – tablet & small desktop • base.less – base for mobile device • Stylesheets include (all in /library/less -or- scssdirectory): • First is the base file. Here you define the most basic styles for your theme. This structure follows a mobile-first approach, so mobile devices only need to load this base file. • Next is the normalize file. This contains reset rules to make sure all browsers are showing nearly the same thing at the most basic style. • Lastly are the responsive styles. This moves by screen size using media queries.

Functions • The heart of the theme is the functions.phpfile. • Bones fills this file with default code including: sidebars, comments layout, search form, image sizes, etc. • It will also include the library/bones.php, plugins, and custom-post-type files. • The bones.php file has a much more in-depth set of functionality. • This includes: head cleanup, js and cssenqueing, excerpt_more, theme support arguments, a custom related-posts function, pagination, etc.

Examples

Live Example • http://chinaus.cah.ucf.edu/bones/?page_id=2

Sources • http://themble.com/bones/ • https://github.com/eddiemachado/bones • http://code.tutsplus.com/tutorials/making-a-theme-with-bones-getting-started--wp-26545 • http://chrisrolfs.com/theme-your-blog-with-bones/ • http://www.plattsoft.net/2013/05/20/bones-my-learning-experience/

Questions • Which of the following is NOT true about Bones: • It is made with HTML5 Boilerplate platform. • It comes loaded with LESS and SASS. • It is a framework. • What makes Bones good for rapid WordPress theme development? • The base.less/scss/css file is where you defined the basic styling of your desktop view. • True • False

Answers • Which of the following is NOT true about Bones: • It is made with HTML5 Boilerplate platform. • It comes loaded with LESS and SASS. • It is a framework. • What makes Bones good for rapid WordPress theme development? • Bones offers a mobile-first approach of creating WordPress themes through a basic template. It trims the unnecessary features and adds core functionality that is common for many WP Plugins. It allows you to build on top of the template as opposed to adding and removing features from themes and frameworks that do not allow for the same level of customization that Bones offers. • The base.less/scss/css file is where you defined the basic styling of your desktop view. • True • False

Bones – HTML5 Wordpress Theme Development