Modernizing WordPress Theme Development with Sage

Sage: A Modern WordPress Theme Framework

Several years ago, we featured Roots, a WordPress theme framework. Roots has since evolved into a company offering two powerful toolsets: Sage and Bedrock. This article focuses on Sage, a framework leveraging HTML5 Boilerplate, Gulp, Bower, and Bootstrap for streamlined WordPress theme development. We'll cover an overview of these tools, installation, customization, and the basic Sage workflow.

Key Advantages of Sage:

• Modernizes WordPress theme development using tools like HTML5 Boilerplate, Gulp, Bower, and Bootstrap, resulting in efficient and responsive themes.
• Simplifies asset management and automation through a robust build process.
• Provides a clear directory structure for easy navigation and customization.
• Offers extensive customization options for various theme aspects.
• Streamlines the workflow with real-time updates via Browsersync.

Essential Tools:

• HTML5 Boilerplate: A robust front-end template providing a solid foundation.
• Gulp: An automation tool for tasks like minification, concatenation, image optimization, and testing.
• Bower: A package manager for front-end assets, simplifying the inclusion of JavaScript libraries.
• Browsersync: Enables synchronized file changes and interactions across multiple devices.
• asset-builder & wiredep: Assist in asset collection and dependency injection.
• Bootstrap: A popular front-end framework for creating responsive websites.

Installation:

Sage installation utilizes Git. Navigate to your WordPress theme directory and execute the following command in your terminal (replace theme-name with your chosen theme name):

<code class="language-bash">git clone https://github.com/roots/sage.git theme-name</code>

Alternatively, download the zip file from the GitHub repository, extract it, and copy the contents to a new folder within your WordPress theme directory.

Next, configure WordPress for development mode by adding this line to your wp-config.php file:

<code class="language-php">define('WP_ENV', 'development');</code>

Theme Directory Structure:

Sage maintains a standard WordPress theme structure with additions for enhanced functionality:

• Core files (index.php, functions.php, 404.php, etc.)
• lib directory: Contains theme configuration and utility files (assets.php, init.php, titles.php).
• assets directory: Houses Sass/Less files compiled into main.css, along with JavaScript and image assets.
• lang directory: Contains the sage.pot file for theme translation.
• templates directory: Holds HTML5 Boilerplate-based templates.

Customization:

Customize Sage via the lib/init.php file. Key customization points include:

• Title Tag: Enable/disable title tag modification using add_theme_support('title-tag').
• Navigation Menus: Register navigation menus using register_nav_menus().
• Post Thumbnails: Enable/disable featured images using add_theme_support('post-thumbnails').
• Post Formats: Manage enabled post formats using add_theme_support('post-formats').
• HTML5 Markup: Add support for HTML5 elements using add_theme_support('html5').
• Editor Stylesheet: Specify the editor stylesheet path using add_editor_style().
• Sidebars: Register sidebars using register_sidebar() within the widgets_init() function.

Workflow:

Sage's workflow relies on Node.js and npm packages. Install necessary tools using npm:

<code class="language-bash">git clone https://github.com/roots/sage.git theme-name</code>

Using Bower:

Use Bower commands for managing front-end packages:

• bower search <query></query>: Search for packages.
• bower install <package></package>: Install packages.
• bower list: List installed packages.
• bower uninstall <package></package>: Uninstall packages.

Using Gulp:

Install Gulp plugins:

<code class="language-php">define('WP_ENV', 'development');</code>

Run gulp to compile and optimize assets. gulp watch provides real-time updates. The gulpfile.js file controls the build process. Customize tasks and settings as needed within gulpfile.js and assets/manifest.json.

Conclusion:

Sage offers a powerful and efficient approach to WordPress theme development. By leveraging modern tools and a streamlined workflow, developers can create high-quality, responsive themes with ease. The detailed explanation of the process and customization options provided in this article should enable you to effectively utilize Sage for your next WordPress theme project.

The above is the detailed content of Modernizing WordPress Theme Development with Sage. For more information, please follow other related articles on the PHP Chinese website!