How to make a Installable Sage 9 Theme ZIP File

sage
1

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

6 Likes
2

Thanks for this! Really helped <3

3

If you use Package nothingworks/blade-svg, be sure you’ve created assets folder inside the root with the icons folder inside of it.

4

An “eject” or “package” npm script in sage 9/10 would be great. :heart_eyes_cat:

1 Like
5

Yes, this would be very essential for traditional setup websites.

Where can we add feature requests?

6

Where can we add feature requests?

Send PRs to GitHub - roots/sage: WordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and a modern development workflow or https://github.com/roots?q=bud&type=&language=

7

I will work on it and see If I can make get it to work

1 Like