Change breakpoint in Homestore and Storefront

in a not advisable setup you can run in a bought theme (Homestore) as child theme for Storefront change styling in the stylesheets can be a nightmare. In a situation where you only want to change the breakpoints this script can help you.

  1. Copy stylesheets for themes that should not be edited
  2. If they have not been copied before change the breakpoints

If the themes are updated, the backups are gone and the breakpoints will be changed again.

add_action('admin_init', 'check_status_breakpoints');

function check_status_breakpoints() {

    $themePath = get_theme_root();

    // settings - replace in theme
    $themesStyles = [
        'homestore' => [
            'replace'   => 'max-width: 767px',
            'with'      => 'max-width: 990px'
            ],
        'storefront'    => [
            'replace'   => 'min-width: 768px',
            'with'      => 'min-width: 991px'
        ]
    ];

    // for settings
    foreach ($themesStyles as $theme => $themesStyle) {
        // theme files
        $themeStyleSheet        = $themePath . '/' . $theme . '/' . 'style.css';
        $themeStyleSheetBackup  = $themePath . '/' . $theme . '/' . 'style.backup.css';

        // if no backup => no replacement has taken place => backup and replace
        if (file_exists($themeStyleSheet) && !file_exists($themeStyleSheetBackup)) {
            // backup
            copy($themeStyleSheet, $themeStyleSheetBackup);
            // replace
            $styleSheet = file_get_contents($themeStyleSheet);
            $styleSheet = str_replace($themesStyle['replace'], $themesStyle['with'] ,$styleSheet);
            file_put_contents($themeStyleSheet, $styleSheet);
        }

    }

}