Adding back WordPress-specific styles

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:

  1. Open the Roots app.less file inside the less folder in your editor.
  2. In another editor window, create a new file named _wp.less and save it within our own custom assets in the less folder as shown in the following screenshot:
    Adding back WordPress-specific styles
  3. Copy the following lines of code from 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; }
  4. If you anticipate running a blog in your WordPress site, you'll also want to speed up your blog design process by adding the section of selectors for posts. The selectors found here cover the elements and class names used in the Roots template for blog posts.
    /* ========================
   Posts
   ======================== */

hentry header { }
hentry time { }
hentry .byline { }
hentry .entry-content { }
hentry footer { }
  5. If you anticipate using a sidebar in a section of your site, grab the .sidebar selector.
  6. You may want to pull over other selectors as reminders of the classes that Roots uses by default: .content, .main, .sidebar, and so on.
  7. Also note the styles used for gallery shortcode:
    /* Gallery Shortcode */
.gallery-row { padding: 15px 0; }
  8. After bringing over the lines you'd like to keep, take a few moments to convert comments from block comments to single-line comments so that they will not compile to CSS.
    //     Posts
//     ------------------------
...

//     WordPress Generated Classes
//     ------------------------
  9. Save _wp.less.
  10. Close app.less.
  11. Now open __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";
  12. Recompile __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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset