New here? Head to the introduction to development chapter, the first part of our WordPress Developer Guide. This is the third chapter in a series of blog posts about our method for building WordPress and WooCommerce websites.

This section outlines the important parts of the site, the parts you need to know about and what you need to know about them. It gets technical here. Skip through if there is a section that you have already sorted out.

Structure

All the elements that make your site unique are kept in WP Content. Some plugins create their own folders in wp-content but the main three are:

  • Themes
  • Plugins
  • Uploads

These folders contain exactly what you would expect! When you migrate a site you will only need the wp-content folder and the database.

[optin-monster-shortcode id=”rvsz8apxiz4dsn70″]

There are sometimes some ‘define’ items in wp-config.php as well, but this should be considered on a case by case basis and you never need (or want!) to copy across the wp-config.php file.

The uploads folder will have a year/month folder structure.

There may also be an mu-plugins folder. This is for a must-use plugin, plugins that are always activated. If you are using a hosted WordPress service you may find there are some obligatory plugins in here and also that you may not be able to edit/remove them.

Bambino Structure

Bambino is the embodiment of the Bamboo workflow. It’s the framework for our child theme. It can work with any parent theme.

It takes best practices and formalises them. Bambino is a work in progress and always will be. It will grow as WordPress grows and as the process is refined. Understanding why we structure and set out our child theme is the most important thing to take on board. You can pick and choose which items you use in your own child theme.

You do not need to use Bambino, but you can definitely learn a lot about how to structure your child theme development by using this as a template.

The Bambino Child Theme lives in wp-content/themes and consists of the following folder structure:

/assets/scss/
/assets/css/
/assets/img/
/assets/js/
/assets/js/min/
/assets/sass/

/includes/functions/
/includes/shortcode/
/includes/template/
/includes/widget/

/woocommerce/

Below we will look at what is in each folder.

Bambino CSS

We have moved to using SASS, but this chapter is about CSS and how we used to manage styling. I’m keeping it because it’s a good example of how your process can evolve.

Many sites have a single CSS file. This is good because every time a CSS file is loaded an HTTP request is fired. This slows the site down.

However when developing it is important to have a structure and process for managing CSS. Often a single CSS file becomes very messy. Even with the best will in the world, it becomes unwieldy to manage a 5000 line document.

We have created multiple css files and add CSS to the corresponding file. So if we have some header CSS we can add this to header.css. The Bamboo plugin lists all the CSS files opened by the child theme. It scrapes the HTML file and shows the CSS files. It can also toggle them on and off. This really helps development. It means we can quickly and simply which stylesheet causes different styling. It also means that we can stay much more organised.

But hang about, I thought you said having lots of stylesheets meant for a slow site. It does, but there is a fantastic plugin called BWP which will take all our CSS and make it into a single file. It will also minify that CSS so that it loads even quicker. It works with Javascript files too, as well as being compatible with Content Delivery Networks. Clever Stuff.

CSS stands for Cascading Style Sheets. This means that the styles loaded last are the ones that are used. We have our responsive stylesheets loaded last so they are given precedence.

This also helps stop the cardinal sin of CSS – the lazy use of !important. When !important is added to a CSS style it is given priority. This is poor practice and can be a real nuisance for styling and should be avoided.

The CSS files are found in this folder:

/assets/css/

The CSS files, in order of loading, are:

| File | Description |
|************************-|**********************************|
| layout.css | Site Structure |
| styles.css | Style Page |
| templates.css | Custom templates |
| woo-styling.css | Styles from the Woo Styles |
| woocommerce.css | WooCommerce Styles |
| responsive-htabplus.css | Horizontal Tablets and Larger |
| responsive-vtablet.css | Vertical Tablets |
| responsive-phones.css | Phones |
|************************-|**********************************|

SASS

So, now I’m telling you to ignore all of that. There’s a new way to manage your styling. There are pre-processors. That’s to say code that is compiled. There are two types: Sass and Less. I’ve chosen Sass because it’s been adopted by the WooCommerce developers.

I know a lot of front-end developers are reluctant to use Sass because they don’t want to complicate their process. The beauty of using Sass is that you don’t actually have to change anything at all. You can write the CSS you know and love and it get’s managed the same.

So, I won’t go into detail about the benefits of Sass and how to use it. That’s for another book.

I will however talk about how you can create multiple .scss files and then include them.

For example I keep all my layout items in a single folder called layout. In each folder I have an _all.scss file which then includes the remaining files.

So in this instance it will say:

@import “helpers/all”, “base”, “footer”, “footer-nav”, “header”, “header-nav”, “headings”, “side-menu”, “buttons”, “adaptive”, “effects”;

I can the process that _all.scss file and all those individual files are compressed into a single .css file.

Neat!

We can extrapolate this out and have a whole structure that can help us stay organised just like we were with the CSS structure I showed earlier. The beauty is that we compress it and minify the files into a single style.css

It’s important to note that the style.css file must include at the top the details of the theme you are creating. To do this I have added a style.css file in my assets file that looks like this:

/*!
Theme Name: Bambino
Description: Layers child theme for Bamboo by Raison – http://raison.co
Author: Bamboo
Template: layerswp
Version: 1.3
Author URI: https://raison.co
Theme URI: https://raison.co/bamboo
*/

//import all your partials

//
//#################################################
// Main SASS file that joins everything together
//#################################################
//

//Add Bourbon Mixin Library
@import “bourbon”, “neat”;

//variables
@import “sass/settings”;

//load mixins
@import “sass/mixins/all”;

//layout, modules, etc loads responsive last
@import “sass/layout/all”, “sass/modules/all”, “sass/thirdparty/all”, “sass/templates/all”, “sass/responsive/all”;

You can see here how we structure the import process.

SASS Processing

There are many command line ways to process your SASS files.

I prefer to use GUI applications. I get sneered and scoffed at by many in the developer community for having this approach. It is however consistent with my Bamboo methodology. Learning less can be more.

Fortunately there is a fantastic tool called CodeKit that can process the SASS file into a single Style.css for us. I have it setup to watch my theme folder. Every time I save a SCSS file it re-complies the style.css file automatically. It only takes a few seconds to do.

I also have it setup to create a sass map. This means when I inspect the elements in my browsers developer tools I can see the line and file that the style originates from. This makes finding and editing your sass files much easier.

I have included these code kit settings within the bambino child theme on GitHub so you can get going straight away with this.

SASS Structure

Here is the folder structure that I currently use. I am constantly amending this. The key is for this to be as self-explanatory as possible. So the button stylings go in _buttons, the footer goes in _footer and so on.

The key here is to create a structure that anyone can jump into without having previous experience of the project.

/assets/sass/_settings.scss
/assets/sass/_shame.scss

/assets/sass/layout/_adaptive.scss
/assets/sass/layout/_all.scss
/assets/sass/layout/_base.scss
/assets/sass/layout/_buttons.scss
/assets/sass/layout/_footer-nav.scss
/assets/sass/layout/_footer.scss
/assets/sass/layout/_header-nav.scss
/assets/sass/layout/_header.scss
/assets/sass/layout/_headings.scss
/assets/sass/layout/_side-menu.scss

/assets/sass/layout/helpers/_all.scss
/assets/sass/layout/helpers/_border-box.scss
/assets/sass/layout/helpers/_rem.scss
/assets/sass/layout/helpers/_reset.scss

/assets/sass/layout/responsive/_all.scss
/assets/sass/layout/responsive/_responsive-htabplus.scss
/assets/sass/layout/responsive/_responsive-phones.scss
/assets/sass/layout/responsive/_responsive-vtablet.scss

/assets/sass/mixins/_all.scss
/assets/sass/mixins/_border-radius.scss
/assets/sass/mixins/_box-shadow.scss
/assets/sass/mixins/_box-sizing.scss
/assets/sass/mixins/_rem.scss

/assets/sass/modules/.DS_Store
/assets/sass/modules/_all.scss
/assets/sass/modules/_templates.scss
/assets/sass/modules/_woocommerce.scss
/assets/sass/modules/_woostyling.scss
/assets/sass/thirdparty/.DS_Store
/assets/sass/thirdparty/_all.scss

JS

The JQuery library is loaded by Bamboo. The Javascript/JQuery files are found in this folder:

/assets/js/

The JS files loaded are:

| File | Description |
|**************-|**************-|
| jsgeneral.js | Misc JS |
| flexcustom.js | FlexSlider JS |
|**************-|**************-|

jQuery is loaded in compatibility mode in WordPress. This means that when a dollar sign is used you should use jQuery.

/- Normal jQuery you see everywhere -/
$(“#an-element”).thisandthat();

/- “Safe” jQuery you see in WordPress -/
jQuery(“#an-element”). thisandthat();

This can get confusing. Because of this both our JS files include some code that fixes this. It means you can use dollar signs without worry.

When you load these JS files you will see some code already there. Make sure any JS you add is wrapped within this existing code and that you use dollar signs in your JS ($).

Bambino JS

jQuery(document).ready(function($) {
// Code here will be executed on document ready. Use $ as normal.

console.log(‘Bambino JS Working’);

});

Functions

A ninja will use the functions file much more than editing the template files. It’s a much more long-term and future-proof way of creating a bespoke theme.

The functions file runs PHP when the site loads. It is similar to how a plugin works. Rather than having a single functions file we have split the functions into sections so it is easy to stay organised and efficient.

The function files are found within the following folder:

/includes/functions/

The files are:

| File | Description |
|****************-|****************************|
| hooks.php | Hooks |
| misc.php | Misc |
| scripts.php | Additional Scripts |
| widgets.php | Adding widgets |
| woocommerce.php | WooCommerce |
|****************-|****************************|

Includes

Also within the includes folder we have the following folders:

/includes/shortcodes/
/includes/templates/
/includes/widget/

Later we explain how to create your own shortcodes, templates and widgets. They will live in these folders so you can always find theme with ease.

Setting Up your Child Theme

This applies to Bambino or your own child theme.

  • Rename the folder of the child theme from bambino to {project-name}
  • Open style.css and rename the Theme Name to {Project-name}
  • Go to Appearances > Themes and check correct theme selected
  • Go to Settings > General and change the Site Name and Description