There is a reason we saved the original Roots assets in the __ROOTS_ASSETS_ORIGINAL
folder. Though we have everything we need for our design, Roots included two key sets of WordPress-specific styles that we lack and may want to bring back in.
First, in the original Roots CSS
folder, you'll find the editor-style.css
file. As this file enables us to improve the WYSIWYG editing experience, we may want to copy this file to our own CSS
folder. (You could also opt to create your own custom version of this file to more closely match your custom styles.)
Second, if we intend to have a blog in our site or to distribute our theme, we'll want to recover a few key styles specific to WordPress, which Roots has provided us in the app.less
file in the less
folder. It is only a small matter to add these to our own custom LESS file and then recompile into our main.css
file. To add WordPress-specific styles, perform the following steps:
app.less
file inside the less
folder in your editor._wp.less
and save it within our own custom assets in the less
folder as shown in the following screenshot:app.less
to _wp.less
as they ensure we address WordPress-generated classes for images:/* ======================== WordPress Generated Classes ... ======================== */ aligncenter { display: block; margin: 0 auto; } alignleft { float: left; } alignright { float: right; } figure.alignnone { margin-left: 0; margin-right: 0; }
/* ======================== Posts ======================== */ hentry header { } hentry time { } hentry .byline { } hentry .entry-content { } hentry footer { }
.sidebar
selector..content
, .main
, .sidebar
, and so on./* Gallery Shortcode */ .gallery-row { padding: 15px 0; }
// Posts // ------------------------ ... // WordPress Generated Classes // ------------------------
_wp.less
.app.less
.__main.less
and add a line to import _wp.less
as shown in the following lines of code:// Other custom files @import "_page-contents.less"; @import "_footer.less"; @import "_wp.less";
__main.less
to css/main.css
—being sure to minify the CSS output to ensure best performance.That's it! Not only have we integrated our custom design, but we've prepared our theme for whatever we may need to do next with WordPress.