WP THEME ZONE

Requirements

WP Theme Zone requires the following dependencies:

• Composer
• Node.js
• Gulp

Features

🛠	Includes
📦	Theme Administrator
🔥	Latest Bootstrap and Font Awesome
🎨	Next Generation CSS
✂️	Source Maps
🎒	Code Minification
🌈	Lazy Loading for the images
🤖	External Libraries
🛎	Production ready ZIP theme

Installation

There are several ways to install WP Theme Zone. We'll look at three of them: (1) classic install by uploading WP Theme Zone to a WordPress install, and (2) using npm

Classic install

• Download or clone this repository from Github
• IMPORTANT: If you download it from GitHub make sure you rename the "wp-theme-zone-master.zip" file just to "wp-theme-zone.zip" or you might have problems using child themes!
• Upload it into your WordPress installation theme subfolder: /wp-content/themes/
• Login to your WordPress backend
• Go to Appearance → Themes
• Activate the WP Theme Zone

npm install

• Open your terminal
• Change to the directory where you want to add WP Theme Zone
• Type npm install wp-theme-zone

Developing With npm, Gulp and SASS and Browser Sync

Installing Dependencies

• Make sure you have installed Node.js and Browser-Sync (optional) on your computer globally
• Then open your terminal and browse to the location of your WP Theme Zone copy
• Run: $ npm install : install the dependencies.
• Run: $ gulp copy-assets : Copy all needed dependency assets files from node_modules to theme's /js, /scss and /fonts folder. Run this task after npm update.

Running

To work with and compile your Sass files on the fly start:

• $ gulp watch

Or, to run with Browser-Sync:

• First change the browser-sync options to reflect your environment in the file /gulpconfig.json in the beginning of the file:

{
    "browserSyncOptions" : {
        "proxy": "localhost/theme_test/", // <----- CHANGE HERE
        "notify": false
    },
    ...
};

• then run: $ gulp watch-bs

Available CLI commands

Wp-theme-zone comes packed with CLI commands tailored for WordPress theme development :

• gulp watch : automize compiling the custom css on the wp-theme-zone/sass/theme/_theme.scss with the existing css.
• gulp compile : manual compiling the custom css on the wp-theme-zone/sass/theme/_theme.scss with the existing css.
• gulp watch-bs : reloads page automatically on your browser.

Confused by all the CSS and Sass Files?

Some basics about the Sass and CSS files that come with WP Theme Zone:

• The theme itself uses the /style.cssfile only to identify the theme inside of WordPress. The file is not loaded by the theme and does not include any styles.
• The /css/theme.css and its minified little brother /css/theme.min.css file(s) provides all styles. It is composed of five different SCSS sets and one variable file at /sass/theme.scss:

// 1. Add your variables into this file. Also add variables to overwrite Bootstrap or __WP Theme Zone__ variables here
@import "theme/theme_variables"; 
// 2. All the Bootstrap stuff - Don´t edit this! 
@import "assets/bootstrap4";  
// 3. Some basic WordPress stylings and needed styles to combine Boostrap and WP Theme Zone
@import "themezone/themezone"; 
// 4. Font Awesome Icon styles
@import "assets/font-awesome";
// Any additional imported files //
// 5. Add your styles into this file
@import "theme/theme";

For Developer - Customizing the theme

Styling

• Don’t edit the number 2-4 files/filesets listed above or you won’t be able to update WP Theme Zone without overwriting your own work!
• Your design goes into: /sass/theme.
  • Add your styles to the /sass/theme/_theme.scss file
  • And your variables to the /sass/theme/_theme_variables.scss
  • Or add other .scss files into it and @import it into /sass/theme/_theme.scss.
  • Also you can use the variables available here src/sass/bootstrap4/_variables.scss. But take note that don't edit that file.

Scripts

• Your script goes into: src/js/theme
  • Add your script to the src/js/theme/custom-javascript.js file

Theme Setting Hooks

There are several ways to get the settings of WP Theme Zone.

• By using a function zn_option_get('option-id')
• By using a shortcode do_shorcode('option-id')

For Administrator - Customizing the theme

• Wp Theme Zone > Dashboard
  • Global
    • General // Layout
    • Copyrights // content
    • Hooks // Can Add custom SEO scripts
  • Social
    • General // Social Media links
  • Colors
    • General // Background Color of header, body, footer
  • Addons
    • General // Options to use embeded third party libraries
  • Custom CSS & JS
    • CSS // Section to add custom CSS
    • JS // Section to add custom JS

Acknowledgment

Thank you for the third party and libraries that is used into this wordpress theme.

• Underscores - Based Theme
• Bootstrap - Styling
• Fontawesome - Icons
• Scroll Reveal - Add Ons
• Parallax - Add Ons
• Dark Mode - Add Ons

Contributor

• Zekinah Lecaros - main author