Wordpress Theme Framework

1. Installation
2. Demo Theme
3. Frontend Libraries ↗
4. Frontend Helpers ↗
5. Configuration
6. Configuration Options ↗
7. Environment Detection

Installation

Installation is very simple - install and activate this Plugin on your Wordpress site. Once running, most of the Frontend HTML and Dashboard UI cleanup functionality will happen automatically. If you would like to customize functionality within the framework refer to the Configuration section of this document.

If you are using any of the Template Libraries or Helper Functions in your theme code, we suggest placing the following in your code functions.php file to safeguard against errors if the event the Plugin is deactivated.

#functions.php
// Make sure the Theme Framework plugin is present. Required by this theme.
if (!is_admin() && !defined('HELLO_DIR')) exit('<strong>Whooops.</strong> This theme is meant to be used with the <a href="https://github.com/louiswalch/Wordpress-Theme-Framework">Theme Framework</a>. Please install and activate.');

Getting Started with the Demo Theme

To familiarize yourself with developing Wordpress themes using this framework I recommend checking out our demo theme. This is a very light implementation showcasing most of the major features.

https://github.com/louiswalch/Wordpress-Theme-Framework-Demo

Configuration

Customization and control over the functionality contained in the framework is done through configuration files you place in your theme. To manage the configuration of your theme, create a file at _framework/config.php with your desired options.

Example Usage - Assigning theme CSS & JS files:

# _framework/config.php
CONFIG()->set('frontend/assets/css', ['css/site.min.css']);
CONFIG()->set('frontend/assets/css_print', ['css/print.min.css']);
CONFIG()->set('frontend/assets/js', ['js/vendor.min.js', 'js/site.min.js']);

In addition base level configuration file, you can also create environment-specific (development, staging) files which would override all default settings only on that environment.

Example Usage - Assigning alternative CSS & JS on development server:

# _framework/config_development.php
CONFIG()->set('frontend/assets/css', ['css/site.css']);
CONFIG()->set('frontend/assets/css_print', ['css/print.css']);
CONFIG()->set('frontend/assets/js', ['js/vendor.js', 'js/site.js']);

To inspect the current framework configuration you can use the following command.

<? pr(CONFIG()->dump(), 'Site Configuration'); ?>

Configuration Options

For a list of all available options that be configured through your theme's config.php file, refer to this list ↗.

Directory Structure

By default, the framework is configured for the following organization. Paths relative to your theme root and can be changed through the framework config.php file.

• _framework/
  • assets/ Login, Dashboard & Editor CSS files.
  • config_development.php Development site overrides.
  • config_staging.php Staging site overrides.
  • config.php Your custom framework configuration.
  • metabox/ Custom Metabox HTML.
  • types/ Custom post type declarations.
• _includes/ Files being used with Includes.
• _modules/ Blocks being used with Modules.
• assets/ Theme CSS/JS/IMG/etc.

Environment Detection

Based on the website domain, the framework will detect the current environment (development, staging, production) and if an environment-specific config.php file is present also load this to override the default values. This is very useful for having an unminficed and source mapped CSS file appear when viewing on your development servers. The default match logic is outlined below, but this can also be customized through the framework config.php file.

Development Domain contains ".local"

Staging Domain contains "staging."

Production If the above two fail.

Contributors

• Filippo Della Casa

License

GNU General Public License v2.0