skip to Main Content
Building A Blueprint With Underscores And Foundation

Building a Blueprint with Underscores and Foundation

One of DesktopServer’s most powerful premium features is building a Blueprint. Blueprints allow you to create a custom default installation for your local development sites. If you always start a new site with a particular theme framework or starter theme, creating a Blueprint can save a ton of time by pre-installing it for you when you create a new development site.

A popular starter theme is Underscores (also called _s), which features very little CSS, but all of the powerful features of any WordPress theme. This allows you to save many hours of development time by not having to hand-code every feature of a WordPress theme.

Zurb’s Foundation does the same thing for the design side of things. It features a CSS framework that is mobile-ready and takes a lot of the work out of setting up the layout of your site.

Combining Underscores and Foundation in a DesktopServer Blueprint gives you a power-house development suite that can save thousands of hours on new sites.

To create the Blueprint, you’ll first need to create a new blank WordPress Installation using DesktopServer to use as the basis for the Blueprint. First, open up DesktopServer, and Start the Apache & MySQL services if they aren’t already running, and click Next.

Then, select “Create a new development site,” and click Next. Name the new website, and be sure to take note of the directory WordPress will be installed in. Then, click next.

DesktopServer will now create the database and host entries for the new site. Once that is completed, click the link to go to the new WordPress installation and follow the prompts to run the WordPress installation.

Once WordPress is installed, log into your WordPress installation and run the WordPress update if one is available.

Next, you’ll need to download Underscores and Foundation. Go to, enter a new theme name in the box, and click “Generate.” You can also download/fork the theme from Github.

Once it’s downloaded, uzip and install the theme in your WordPress directory under /wp-content/themes/.

To get Foundation, go to, click the “Download Foundation 5” button, and click the download button for the version of Foundation that you want to use.

Copy the files from the Foundation archive into your Underscores-based theme’s directory. You’ll need to create a subdirectory called “foundation” to put the files in.

Add the following code to your theme’s functions.php to enqueue the Foundation styles and scripts (code assumes foundation is in a subdirectory):

function enqueue_foundation() {
    /* Add Foundation CSS */
    wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/foundation/css/normalize.css' );
    wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' );
    wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '5', true );
add_action( 'wp_enqueue_scripts', 'enqueue_foundation' );
/* Add Foundation footer */
function foundation_footer(){
    <script type="text/javascript">
        jQuery(document).ready(function($) {

After you’ve installed the theme and made the code changes, activate the theme in the WordPress dashboard. Now it’s time to create the Blueprint!

From the main menu of DesktopServer, select “Export, import or share a website,” and click Next. From there, select “Export or deploy a WordPress website,” click Next, and select the name of the local development environment you just created. Give the new Blueprint a name in the “Export as” field, select “Export to a website archive (.zip file), and click Next.

On the next screen, simply click Next, leaving the database and server information blank. Verify that the filename for your archive is what you want, click Browse, and navigate to your Blueprints directory. On Windows, this can be found at C:\xampplite\blueprints\ and on Mac OS X, the location is \Applications\XAMPP\blueprints. Once you’ve located the directory, click Next.

Now, DesktopServer will create your Blueprint archive. Once it’s completed, click Next. To use your new Blueprint, select “Create a new development website” and click next. Select your newly created Blueprint, give your site a new name, choose the location to install your site (it’s not recommended to install it in your \blueprints\ directory). and click Create.

From there, just follow the steps to create the site and install WordPress as outlined above. Once the site has finished installing, you can log into the site. You’ll see that your base theme is already installed and ready for you to start creating!

Don’t forget to check out our video on creating a Blueprint with DesktopServer on Youtube.

For more information on working with Underscores and Foundation, see the video of our friend Steve Zehngut’s WordCamp OC presentation, Build a WordPress Theme with Foundation and Underscores.