Skip to content

igmoweb/domestic

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
inc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Domestic WordPress Theme

Development

Requirements

Node.js.

It's recommended to install NVM to switch between different Node versions:

Docker Desktop

Quickstart

1. Clone the repository into your themes folder

cd my-wordpress-folder/wp-content/themes
git clone https://github.com/igmoweb/domestic.git

2. Run npm install

Make sure that Docker Desktop is running

cd domestic
npm install

3. Watch for changes

webpack will watch changes in PHP, JS and CSS files for you and it will reload the browser automatically.

  • Start watching changes with npm start and open your local development WordPress site with Domestic theme activated.

Compile assets for production

When building for production, the CSS and JS will be minified. To minify the assets in your /dist folder, run

npm run build

To create a .zip file of your theme, run:

npm run package

Running this command will build and minify the theme's assets and place a .zip archive of the theme in the packaged directory. This excludes the developer files/directories from your theme like /node_modules, /src, etc. to keep the theme lightweight for transferring the theme to a staging or production server.

Styles and Sass Compilation

  • src/assets/scss/style.scss: The main styles file for the Theme.

  • src/assets/scss/editor-styles.scss: Gutenberg editor styles

  • src/assets/scss/owl.carousel.scss: Owl carousel styles.

  • src/assets/js/app.js: The main Theme JS file. Loads Foundation scripts and initializes Owl Carousel.

  • src/assets/js/customize.js: JS loaded in WP Customizer.

JavaScript Compilation

All JavaScript files, including Foundation's modules, are imported through the src/assets/js/app.js file. The files are imported using module dependency with webpack as the module bundler.

If you're unfamiliar with modules and module bundling, check out this resource for node style require/exports and this resource to understand ES6 modules.

About

Domestic Theme for WordPress

Resources

License

Stars

Watchers

Forks

Packages

No packages published