Installation of the ItalyStrap framework and Child themes

Theme Installation

Upload

1. Download the latest tagged archive (choose the “zip” option).
2. Go to the Themes -> Add New screen and click the Upload tab.
3. Upload the zipped archive directly.
4. Now install a child theme.

Manual

1. Download the latest tagged archive (choose the “zip” option).
2. Unzip the archive.
3. Copy the folder to your /wp-content/themes/ directory.
4. Now install a child theme.

Git

Using git, browse to your `/wp-content/themes/` directory and clone this repository ItalyStrap:

git clone https://github.com/overclokk/italystrap.git italystrap
cd italystrap
composer install --no-dev

Make shure that the directory name is lowercase italystrap.

Then install a child theme.

Child theme Installation

Again, from your WordPress themes directory, clone the git repo:

git clone https://github.com/overclokk/ItalyStrap-child.git my-personal-theme

Or simply download master zip file:

Rename child directory (ItalyStrap-child) as you wish, e.g. my-personale-theme

Change Theme name in style.css:

/**
 * Theme Name: my-personale-theme
 * Template: ItalyStrap
 * Version: 1.0.0
 */

• Theme Name: The name for child theme. Required
• Template; The name of Parent template. Required (Default ItalyStrap)
• Version: The version of your child theme. Optional

More file header example.

Don’t use style.css for your style customization, this file is only for WordPress theme loading, use files in css directory, see below.

Create your personal screenshot.png with your theme design (optional) and add it at the root folder of your theme.

Now from command line:

cd my-personal-theme

Install npm plugin:

npm install

Execute grunt task:

grunt build

With this commands there will be create the theme scaffolding, now you can start to develope your awesome theme.

How to ItalyStrap load scripts

ItalyStrap use an Asset class for script loading, the file structure mirroring the template name routing, for example, singular template load the singular.css/js, in case no file are founded it will be loaded custom.css/js, you can filter this behavior simply by appending a function to the filter:

add_filter( 'italystrap_config_enqueue_script', array( $myclass, 'my_method' ) );
add_filter( 'italystrap_config_enqueue_style', array( $myclass, 'my_method' ) );

Now in child theme you have to have the same file structure with the custom.css/js always present otherwise no file will be loaded, if you use the command grunt build the script file structure will be create.

The ItalyStrap uses Twitter Bootstrap CSS framework also the starter child theme you have downloaded from my github repo but this is not mandatory, you can utilize the CSS framework you want, also a vanilla CSS, in future I will share more simple base theme with some different CSS.

Required plugin installation

This theme require some plugin for better working, please, install them from your admin panel:

• ItalyStrap extended: Plugin for make your site more powerfull

Main plugin installation

Upload

1. Download the latest [tagged archive](https://github.com/overclokk/italystrap-extended/releases) (choose the “zip” option) or the [latest from WP.org](https://wordpress.org/plugins/italystrap/).
2. Go to the Plugins -> Add New screen and click the Upload tab.
3. Upload the zipped archive directly.
4. Go to the Plugins screen and click Activate.

Manual ###

1. Download the latest [tagged archive](https://github.com/overclokk/italystrap-extended/releases) (choose the “zip” option) or the [latest from WP.org](https://wordpress.org/plugins/italystrap/).
2. Unzip the archive.
3. Copy the folder to your /wp-content/plugins/ directory.
4. Go to the Plugins screen and click Activate.

WP.org ###

1. Install ItalyStrap either via the WordPress.org plugin directory, or by uploading the files to the `/wp-content/plugins/` directory in your server.
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Activate your desired functionality from ItalyStrap option page.
4. After activating ItalyStrap, read the documentation for any kind of customization.
5. That’s it.  You’re ready to go!

Git ###

Using git, browse to your `/wp-content/plugins/` directory and clone this repository:

`git clone https://github.com/overclokk/italystrap-extended.git italystrap`

`cd italystrap`

`composer install –no-dev`

Then go to your Plugins screen and click Activate.

How to customize ItalyStrap with child theme

Child them is gorgeous for personal customization :-), here some tip:

File structure

Understand parent and child file structure is important to customize a child theme, simply copy the file from parent theme you want make personalization and paste it to child directory in the same folder, e.g. ItalyStrap/lib/script.php -> my-personale-theme/lib/script.php

As soon as you have downloaded child them from Github you have this file structure:

• css/
  In this directory there are files for css style, the name of each files indicate where they are loaded.
  • src/: Directory for source files
    • less
      The less files
    • sass
      The scss files
  • admin.css is loaded in admin editor
  • archive.css is loaded in archive.php
  • bootstrap.min.css is loaded in each page
  • custom.css is loaded if the others don’t
  • home.css is loaded in home page
  • singular.css is loaded in post and page
• fonts/
  Here there are fonts from Bootstrap Framework
• img/
  Some default image for theme
• js/
  Same as css files
• lib/
  By default in this folder you can find the script.php files that is the script manager for your child theme, you have to use that file for loading your script (css & js files).
• functions.php
  Required for child theme, you can use this for your personal funtions.
• Gruntfile.js
  This is for the grunt tasks runner
• License.md
  The license for theme
• package.json
  For Nodejs package manager
• README.md
  The readme file
• screanshot.png
  The screanshot of you child theme (It will show in appearance > themes)
• style.css
  Use only for your child name, don’t use this for your personal style

From parent theme copy only files in the lib and root directory, don’t touch files in others directory, they are used for theme functionality.