Skip to content

WordPress Theme with Administrator Setting based in Underscores (_s)

License

Notifications You must be signed in to change notification settings

zekinah/wp-theme-zone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Contributor

About

WordPress Theme with Administrator Setting based in Underscores (_s)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published