Need help with understrap-child?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

understrap
443 Stars 260 Forks 187 Commits 54 Opened issues

Description

Basic Child Theme for UnderStrap Theme Framework

Services available

!
?

Need anything else?

Contributors list

No Data

understrap-child

Basic Child Theme for UnderStrap Theme Framework: https://github.com/understrap/understrap

How it works

Understrap Child Theme shares with the parent theme all PHP files and adds its own functions.php on top of the UnderStrap parent theme's functions.php.

IT DOES NOT LOAD THE PARENT THEMES CSS FILE(S)! Instead it uses the UnderStrap Parent Theme as a dependency via npm and compiles its own CSS file from it.

Understrap Child Theme uses the Enqueue method to load and sort the CSS file the right way instead of the old @import method.

Installation

  1. Install the parent theme UnderStrap first:
    https://github.com/understrap/understrap
    • IMPORTANT: If you download UnderStrap from GitHub make sure you rename the "understrap-master.zip" file to "understrap.zip" or you might have problems using this child theme!
  2. Upload the understrap-child folder to your wp-content/themes directory
  3. Go into your WP admin backend
  4. Go to "Appearance -> Themes"
  5. Activate the UnderStrap Child theme

Editing

Add your own CSS styles to

/sass/theme/_child_theme.scss
or import you own files into
/sass/theme/understrap-child.scss

To overwrite Bootstrap's or UnderStrap's base variables just add your own value to:

/sass/theme/_child_theme_variables.scss

For example, the "$brand-primary" variable is used by both Bootstrap and UnderStrap.

Add your own color like:

$brand-primary: #ff6600;
in
/sass/theme/_child_theme_variables.scss
to overwrite it. This change will automatically apply to all elements that use the $brand-primary variable.

It will be outputted into:

/css/understrap-child.min.css
and
/css/understrap-child.css

So you have one clean CSS file at the end and just one request.

Developing With NPM, Gulp, SASS and Browser Sync

Installing Dependencies

  • Make sure you have installed Node.js, Gulp, and Browser-Sync [1] on your computer globally
  • Open your terminal and browse to the location of your UnderStrap copy
  • Run:
    $ npm install
    then:
    $ gulp copy-assets

Running

To work and compile your Sass files on the fly start:

  • $ gulp watch

Or, to run with Browser-Sync:

  • First change the browser-sync options to reflect your environment in the file
    /gulpconfig.json
    in the beginning of the file:
    javascript
    "browserSyncOptions" : {
    "proxy": "localhost/wordpress/",
    "notify": false
    }
    };
    
  • then run:
    $ gulp watch-bs

[1] Visit https://browsersync.io/ for more information on Browser Sync

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.