WP THEME ZONE

Requirements

WP Theme Zone requires the following dependencies:

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

zekinah / wp-theme-zone Goto Github PK

wp-theme-zone's Introduction