Roots Discourse

How to make a Installable Sage 9 Theme ZIP File

After the development of the theme is complete follow the following steps to make your theme installable via Wordpress’ Default Theme Uploader.

  1. Run composer install

  2. Clone sage-prep by @knowler into your theme directory and copy the bin sub-folder in to the theme directory (optionally you may delete the originally cloned directory)

  3. Open the package.json and add the following line "prep": "npm run build:production && ./bin/prep.sh" in between "scripts": {}
    For Windows: You can skip this step

  4. Add chmod +x bin/prep.sh from the terminal
    For Windows: You can skip this step

  5. Run yarn prep
    For Windows: Run yarn build:production then run bash bin/prep.sh. You need to download either Gow or Git for Windows before running this command.
    This will create a zipped file your-theme-name-{timestamp}-{latest git short hash}.zip in your theme directory

  6. Unzip the newly created zipped file your-theme-name-{timestamp}-{latest git short hash}.zip and open the extracted folder in you preferred Text-Editor/IDE

  7. Move index.php, functions.php, style.css and screenshot.png from resources to theme’s root directory

  8. Move resources/views to theme’s root directory (/views)

  9. Open config/views.php and replace

    ‘paths’ => [
    get_theme_file_path().’/resources/views’,
    get_parent_theme_file_path().’/resources/views’,
    ]

    to

    ‘paths’ => [
    get_theme_file_path().’/views’,
    get_parent_theme_file_path().’/views’,
    ]

  10. Open functions.php and replace the following lines

    if (!class_exists(‘Roots\Sage\Container’)) {
    if (!file_exists($composer = __DIR__.’/../vendor/autoload.php’)) {

    to

    if (!class_exists(‘Roots\Sage\Container’)) {
    if (!file_exists($composer = __DIR__.’/vendor/autoload.php’)) {

  11. In the functions.php file again replace the following lines

    if (!class_exists(‘Roots\Sage\Container’)) {
    if (!file_exists($composer = __DIR__.’/../vendor/autoload.php’)) {

    to

    if (!class_exists(‘Roots\Sage\Container’)) {
    if (!file_exists($composer = __DIR__.’/vendor/autoload.php’)) {

  12. In the functions.php file again replace the following lines

    array_map(function ($file) use ($sage_error) {
    $file = “../app/{$file}.php”;

    to

    array_map(function ($file) use ($sage_error) {
    $file = “/app/{$file}.php”;

  13. In the functions.php file again comment out the following lines

    array_map(
    ‘add_filter’,
    [‘theme_file_path’, ‘theme_file_uri’, ‘parent_theme_file_path’, ‘parent_theme_file_uri’],
    array_fill(0, 4, ‘dirname’)
    );

  14. In the functions.php file again comment out the following lines

    Container::getInstance()
    ->bindIf(‘config’, function () {
    return new Config([
    ‘assets’ => require dirname(__DIR__).’/config/assets.php’,
    ‘theme’ => require dirname(__DIR__).’/config/theme.php’,
    ‘view’ => require dirname(__DIR__).’/config/view.php’,
    ]);
    }, true);

    to

    Container::getInstance()
    ->bindIf(‘config’, function () {
    return new Config([
    ‘assets’ => require __DIR__.’/config/assets.php’,
    ‘theme’ => require __DIR__.’/config/theme.php’,
    ‘view’ => require __DIR__.’/config/view.php’,
    ]);
    }, true);

  15. And lastly if you are using Controllers & Models add the following lines in app/setup.php to fix the paths else skip

    /**
    * Soberwp Models
    */
    add_filter(‘sober/models/path’, function () {
    return get_theme_file_path() . ‘/app/models’;
    });

    /**
    * Soberwp Controller
    */
    add_filter(‘sober/controller/path’, function () {
    return get_theme_file_path() . ‘/app/controllers’;
    });

  16. Now Zip Up the folder and try uploading

4 Likes

Thanks for this! Really helped <3