Sage is an excellent WordPress framework and is also very easy to get started with. The official documentation is already clear and well written, so developers with workable English can usually read it directly. Even so, I translated it in a simpler form to make it easier to read. Depending on length, the documentation may be split into several articles. During translation, I also add some explanatory notes based on my own understanding and experience to make the framework easier to understand and use. My level is limited, so if there are places where the translation is not ideal or not completely correct, feel free to point them out in the comments.
Install the WordPress Sage theme framework
Clone Sage directly into the WordPress theme directory, or download it from GitHub and extract it into the theme directory.
git clone https://github.com/roots/sage.git theme-nameIf you are not using Bedrock, add the following configuration to wp-config.php.
define('WP_ENV', 'development');WordPress Sage framework configuration
All configuration for the Sage theme framework lives in lib/config.php. In that file, we can enable or disable some of the functionality provided by Sage and the Soil plugin. Some of the default theme configuration is shown below.
Enable the Soil cleanup functionality:
add_theme_support('soil-clean-up');Enable the Soil navigation walker:
add_theme_support('soil-nav-walker');Enable the Soil relative URL feature:
add_theme_support('soil-relative-urls');Enable the Soil nice-search feature:
add_theme_support('soil-nice-search');Enable the Soil jQuery CDN feature:
add_theme_support('soil-jquery-cdn');WordPress Sage framework feature overview
functions.php
This file is mainly used to include the files inside lib/. Almost all theme features are defined there. Do not add custom functionality directly to this file. Instead, place your code in the lib/ directory and load it through functions.php. That keeps the theme structure much clearer.
Because Sage is a starter theme, you can freely modify the functionality in the lib/ directory to match your own needs.
lib/assets.php- Enqueues the styles and JavaScript used by the theme.
lib/conditional-tag-check.php- The
ConditionalTagCheckutility class used in the theme sidebar.
lib/config.php- Enables and disables theme features.
lib/extras.php- Extra theme functionality, including adding CSS classes to
<body>and appending a “read more” link to excerpts.
lib/gallery.php- Rebuilds the gallery shortcode to work with Bootstrap thumbnails.
lib/init.php- Initializes the theme, registers menus and sidebars, and defines core WordPress theme support such as post thumbnails, post formats, and HTML5 markup.
lib/nav.php- Cleans extra HTML markup from navigation menus.
lib/titles.php- Controls page title output.
lib/utils.php- Redefines the location of the
searchformtemplate and provides several helper functions.
lib/wrapper.php- The theme wrapper.
This part is a basic introduction to the WordPress Sage theme framework. Once you understand these pieces, installing Sage and configuring some of its features becomes straightforward. In the next part, I will translate the structure of Sage’s templates and the method for extending custom templates.
