Importing sass into underscores theme

Underscores is primarily built so that you put your styles in style.css. This stylesheet is compiled from the main SASS file at sass/style.scss. Additionally, woocommerce.css is compiled from sass/woocommerce.scss. If you want to take advantage of SASS yourself, you can either add your styles to sass/style.scss, or import a file into it that has your … Read more

Are there any caveats to compiling all of my theme’s SCSS into the style.css file in the theme root?

Your theme requires style.css to be present in the theme’s root directory, with a comment header at the top containing information about he theme, like this: /* Theme Name: Twenty Nineteen Theme URI: https://wordpress.org/themes/twentynineteen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Our 2019 default theme is designed to show off the power of the … Read more

Force Code (Appearance) Editor to Use Spaces Not Tabs

The WordPress theme/plugin (file) editor uses CodeMirror for syntax highlighting, and with the hook wp_enqueue_code_editor (which is available starting from WordPress version 4.9.0), you can filter the default CodeMirror settings, as in the following example: add_filter( ‘wp_code_editor_settings’, function( $settings ) { $settings[‘codemirror’][‘indentUnit’] = 2; $settings[‘codemirror’][‘indentWithTabs’] = false; return $settings; } ); See http://codemirror.net/doc/manual.html#config if you’d … Read more

Underscore – Self hosted fonts

Using @import is the way to go, you can do something like this on your stylesheet: @font-face { font-family: FontName; src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf); font-weight: normal; } Then you simply use it as usual. p { font-family: FontName; }