Divi WordPress Theme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Attempting WP Theme Development with Additional Tools

Discussion in 'Themes and Templates' started by Cinnamon, Jul 16, 2014.

  1. Cinnamon

    New Member

    Jul 12, 2014
    Likes Received:
    This has been bugging me for the longest, and I have yet to find a solid answer anywhere through Google searching. So, I'll try my luck here.

    Ok, so I'm not sure if many of you know that SASS is pretty big now when developing themes for WP, and I need a bit of advice on how to set up my workspace.

    I want to incorporate Twitter's Bootstrap's SASS, Underscores Theme with Wordpress.

    I was able to create a Wordpress theme that I am working on, using my local machine. The issue I am having is incorporating Sass into the Underscores Starter theme, with Twitter Bootstrap's Sass and Wordpress.

    I was creating the fixed-top bootstrap navigational bar. I managed to add the proper code to include WP_Walker_Nav in my functions.php file, but my drop down part (children url) in my navigation overlaps the navigational bar instead of being directly under the parent url.

    The content is too close to the fixed-top navigation and I wasn't able to control the body tag styles to provide padding of at least 60px from the top.

    I was wondering if someone can guide me in the direction on how to incorporate Twitter Bootstrap's Sass and Font-Awesome's Sass into Underscore's Wordpress theme.

    I'm struggling with the proper workflow. For my Wordpress default style.css, all I would do is put (at) import url("css/style.css"); underneath Wordpress Stylesheet default comments.

    I have a folder labeled sass (for all my scss files) and a folder css (for all my compiled css). In my style.scss, I import bootstrap and font-awesome's sass files, and I create a separate scss file (main.scss) to use for my custom styling, but nothing works when I create a variable in my main.scss file.

    I would set my style.scss file like this:
    (at) import 'main';
    (at) import 'bootstrap-sass';
    (at) import 'font-awesome';

    For example:
    $padding10: 10px;
    body {
    padding-top: ($padding10 * 6)

    Nothing happens when I set up my body tag. Please tell me what I am doing wrong, any help is appreciated.

    *Note: Please excuse the '(at)', I'm not able to post any links, images, or pictures right now and the forum must assume that the format file extensions for the import as links.

    Thank you!
  2. SimplySidy


    Jun 24, 2014
    Likes Received:
    Though I am not that in-depth advocate of SASS and Wordpress together or even LESS with wordpress, I can suggest that to make things easier, try this -

    Create a simple HTML page with the SASS first and get the things right. Then use the Generated CSS onto your wordpress - That reduces complexities manyfolds - the idea translates to - create a design for every unique page that you want to have on your wordpress and do it in HTML. Once done, convert it to as a part of your Wordpress Theme. I have found this way easier when I was on a project that involved LESS and Wordpress site. I did read some of the LESS and used the Crunch Editor for LESS.

    PS: I know this is not the best of solutions and nowhere near to what you are looking out for. But unfortunately, I have realized that there is not too much fun (if you are working for a client) in trying to reinvent the wheel. And if you are doing it for your own... In that case, I will be back with some information which can help (as I mentioned, I have not been a learner of SASS or even BootStrap, hence I believe it will take a while). Good Luck
  3. don bell

    New Member

    Jun 13, 2015
    Likes Received:
    Hi SimplySidy!
    Thanks for your valuable suggestion. As such, I have never tried my hand on SASS but your answer is quite helpful for me to start with it. So far, I used to download free themes from sites like (URL DELETED BY ADMIN) or develop it myself via templatetoaster and similar tools. Currently I am learning CSS to improve my soft skills more.

Share This Page

Monarch Social Sharing Plugin