Puddinq.com sharing knowledge

Change breakpoint in Homestore and Storefront

Change breakpoint in Homestore and Storefront

(not advisable setup) You can run in a payed child theme (Homestore) for Storefront. Changing styling in the stylesheets can be a nightmare. In a situation where you only want to change the breakpoints this script can help you. For general supplements to the styling it is advised to create a plugin that adds an extra stylesheet.

This little script will:

  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);
        }

    }

}