Skip to content
/ heightwind Public

HeightWind is a lightweight, free WordPress theme designed to showcase content. It features a clean, responsive design with a strong focus on typography, plus a bunch of presentational options and widgetised regions allowing you to give your site a unique touch.

License

GPL-2.0 license
0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

mattsimpson/heightwind

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
framework
framework
 
 
includes
includes
 
 
languages
languages
 
 
scripts
scripts
 
 
templates
templates
 
 
.gitignore
.gitignore
 
 
404.php
404.php
 
 
README.md
README.md
 
 
accessibility.css
accessibility.css
 
 
archive.php
archive.php
 
 
block-editor-style.css
block-editor-style.css
 
 
changelog.md
changelog.md
 
 
comments.php
comments.php
 
 
content-page.php
content-page.php
 
 
content.php
content.php
 
 
footer.php
footer.php
 
 
functions.php
functions.php
 
 
header.php
header.php
 
 
image.php
image.php
 
 
index.php
index.php
 
 
license.txt
license.txt
 
 
loop.php
loop.php
 
 
package.json
package.json
 
 
page.php
page.php
 
 
readme.txt
readme.txt
 
 
screenshot.png
screenshot.png
 
 
search.php
search.php
 
 
searchform.php
searchform.php
 
 
sidebar.php
sidebar.php
 
 
single.php
single.php
 
 
style.css
style.css
 
 
style.scss
style.scss
 
 
theme.json
theme.json
 
 

Repository files navigation

HeightWind

Version 2.0.0 - A modern WordPress theme for developers

HeightWind is a lightweight WordPress theme with a clean, responsive design and strong focus on typography. Originally created by James Koster as Highwind, this modernized version is maintained by Matt Simpson.

Quick Links

License

For Developers

Technical Features

  • Modern Build System: npm + Sass (SCSS) + Terser
  • Developer Friendly: Extensive hooks and filters via Theme Hook Alliance
  • Typography: Modular scale for consistent hierarchy
  • Responsive Grid: Semantic grid system
  • Accessibility: WCAG compliant, skip links, semantic HTML
  • WooCommerce Ready: Full integration with customization options
  • Child Theme Ready: Extensive customization via child themes

Development

HeightWind uses a modern npm-based build system with SCSS for stylesheets and Terser for JavaScript minification.

Prerequisites

  • Node.js and npm installed on your system

Setup

Install development dependencies:

npm install

Build Commands

Build everything (CSS and JavaScript)

npm run build

Build CSS only

npm run build:css

Compiles:

  • style.scss → style.css
  • framework/scss/editor-styles.scss → framework/css/editor-styles.css

Build JavaScript only

npm run build:js

Minifies:

  • framework/js/script.js → framework/js/script.min.js
  • framework/js/plugins.js → framework/js/plugins.min.js

Watch for changes

npm run watch

Automatically rebuilds CSS and JavaScript when source files change.

Project Architecture

Directory Structure

heightwind/
├── framework/              # Core theme framework
│   ├── css/               # Compiled CSS
│   ├── js/                # JavaScript files
│   ├── scss/              # SCSS source files
│   ├── heightwind-functions.php
│   ├── heightwind-hooks.php
│   ├── heightwind-template.php
│   └── heightwind-customizer.php
├── includes/              # Feature integrations
│   └── integrations/
│       └── woocommerce/   # WooCommerce support
├── templates/             # Page templates
├── style.scss            # Main stylesheet source
├── style.css             # Compiled main stylesheet
├── functions.php         # Theme initialization
└── package.json          # Build configuration

SCSS Files (Source)

  • style.scss - Main stylesheet (imports all partials)
  • framework/scss/_mixins.scss - Reusable mixins and animations
  • framework/scss/_normalize.scss - CSS normalization
  • framework/scss/_grid.scss - Semantic grid system
  • framework/scss/_core.scss - Core theme styles

JavaScript Files

  • framework/js/script.js - Main theme JavaScript (navigation, back-to-top)
  • framework/js/plugins.js - jQuery plugins

Theme Hook System

HeightWind provides extensive action hooks for customization:

Body Hooks:

  • heightwind_body_top - Top of <body> tag
  • heightwind_body_bottom - Bottom of <body> tag

Header Hooks:

  • heightwind_header_before - Before header
  • heightwind_header - Main header area
  • heightwind_header_after - After header

Navigation Hooks:

  • heightwind_navigation_before - Before navigation
  • heightwind_navigation_top - Top of navigation
  • heightwind_navigation_bottom - Bottom of navigation
  • heightwind_navigation_after - After navigation

Content Hooks:

  • heightwind_content_before - Before content container
  • heightwind_content_top - Top of content area
  • heightwind_content_header_top - Top of entry header
  • heightwind_content_bottom - Bottom of content area
  • heightwind_content_after - After content container

Entry Hooks:

  • heightwind_entry_top - Top of entry/post
  • heightwind_entry_bottom - Bottom of entry/post

Footer Hooks:

  • heightwind_footer_before - Before footer
  • heightwind_footer - Main footer area
  • heightwind_footer_after - After footer

See framework/heightwind-hooks.php for complete hook definitions.

Production Deployment

Creating a Production Build

To create a production-ready ZIP file for deployment:

npm run build:dist

This command will:

  1. Compile all CSS and JavaScript files
  2. Create a dist/ folder with only production files (no node_modules, .git, development files)
  3. Generate a heightwind-2.0.0.zip file ready for deployment

Installing on WordPress

Option 1: Upload ZIP via WordPress Admin

  1. Run npm run build:dist
  2. Go to WordPress Admin > Appearance > Themes > Add New > Upload Theme
  3. Upload the generated heightwind-2.0.0.zip file
  4. Activate the theme

Option 2: Manual Installation

  1. Run npm run build:dist
  2. Extract heightwind-2.0.0.zip
  3. Upload the heightwind/ folder to your WordPress site's wp-content/themes/ directory
  4. Activate via WordPress Admin > Appearance > Themes

Option 3: Direct Git Clone (Development Only)

⚠️ Not recommended for production sites - includes 31MB of development dependencies.

For development/testing only, you can clone directly:

cd wp-content/themes/
git clone <repository-url> heightwind
cd heightwind
npm install
npm run build

Then activate the theme in WordPress. This approach is only suitable for development environments where you need access to the build tools.

Customization via Child Theme

For site-specific customizations, use a child theme rather than modifying HeightWind directly. This preserves your changes when updating the parent theme.

Creating a Child Theme

  1. Create a new directory in wp-content/themes/ (e.g., heightwind-child/)

  2. Create style.css with the following header:

/*
Theme Name: HeightWind Child
Template: heightwind
*/
  1. Create functions.php:
<?php
function heightwind_child_enqueue_styles() {
    wp_enqueue_style('heightwind-parent', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('heightwind-child', get_stylesheet_uri(), array('heightwind-parent'));
}
add_action('wp_enqueue_scripts', 'heightwind_child_enqueue_styles');

Using Hooks in Child Themes

Example - Add custom content before footer:

function my_custom_footer_content() {
    echo '<div class="custom-footer">My custom content</div>';
}
add_action('heightwind_footer_before', 'my_custom_footer_content');

Example - Modify post meta display:

// Remove default post meta
remove_action('heightwind_entry_bottom', 'heightwind_post_meta');

// Add custom post meta
function my_custom_post_meta() {
    // Your custom implementation
}
add_action('heightwind_entry_bottom', 'my_custom_post_meta');

Using Filters in Child Themes

Example - Disable header gravatar:

add_filter('heightwind_header_gravatar', '__return_false');

Example - Change featured image size:

add_filter('heightwind_featured_image_size', function() {
    return 'full';
});

Contributing

Contributions are welcome! Please follow these guidelines:

  1. Fork the repository and create a feature branch
  2. Follow WordPress Coding Standards for PHP, CSS, and JavaScript
  3. Test thoroughly with WordPress 6.0+ and PHP 7.4+
  4. Document your changes in comments and commit messages
  5. Update changelog in readme.txt for user-facing changes
  6. Submit a pull request with a clear description

Development Workflow

# Fork and clone
git clone https://github.com/YOUR-USERNAME/heightwind.git
cd heightwind

# Create feature branch
git checkout -b feature/your-feature-name

# Install dependencies
npm install

# Make changes and test
npm run watch  # Auto-rebuild on changes

# Build for production
npm run build:dist

# Commit and push
git add .
git commit -m "Add feature: your feature description"
git push origin feature/your-feature-name

Support

About

HeightWind is a lightweight, free WordPress theme designed to showcase content. It features a clean, responsive design with a strong focus on typography, plus a bunch of presentational options and widgetised regions allowing you to give your site a unique touch.

Resources

Readme

License

GPL-2.0 license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 1

HeightWind 2.0.0 Latest
Oct 15, 2025

Packages

No packages published

Languages