So where to start? For many developers, selecting a WordPress starter theme is the most efficient route. Starter themes generally include basic, required WordPress files, commonly used templates (e.g., pages, posts), and often a CSS framework to speed up the stylistic portion of the development process.
The two most popular CSS frameworks used in conjunction with WordPress starter themes are Bootstrap and Foundation . Bootstrap is the most popular CSS framework on github with over 200,000 stars, but there is a lot to like about Foundation, with its smaller (still sizeable) community at just under 25,000 stars.
Foundation benefits from a responsive, mobile-first philosophy, a lean set of core framework files, and offers considerable customizationâincluding grid type, a range of element selections, CSS pre-processor (SASS is available), colors, a range of plugins, and even text direction.
If you’re considering working with Foundation to develop your WordPress theme, below are three WordPress + Foundation starter themes you may want to consider:
FoundationPress
FoundationPress is a free starter theme by Ole Frederick, combining WordPress with Foundation 6 in a SASS-based product. It includes the WordPress required templates, as well as custom templates for pages, posts, search, WooCommerce, and FontAwesome icons.
Because FoundationPress uses SASS, you will need to install and use this tool in your theme development. For developers who haven’t used a SASS-based framework, Frederick’s nifty guide, ‘ FoundationPress for Beginners â, will provide a quick definition and helpful overview of tools used in the installation and workflow, such as git, npm, Sass and Gulp. The Foundation docs also provide instructions for using SASS with Foundation.
For the designer-developer, FoundationPress offers add-on UI kits for Adobe XD and Photoshop, and a widgets kit for Axure RP. Using these programs, designers can quickly prototype Foundation elements for their projects. Kits are not included in FoundationPress, but are available for an additional fee.
Developers can request support and report bugs through the FoundationPress github page.
JointsWP
JointsWP is a free starter theme by Materiell, a digital agency, and combines WordPress with your choice of SASS or CSS. In its documentation , JointsWP provides developers with a basic overview of JointsWP, including installation, features, and functions.
JointsWP isn’t intended to be a child theme, so it’s left to the developer to decide whether to update theme files as new versions are released. Updating to the latest version of Foundation is straightforward: developers using the CSS version can upload Foundation files and overwrite the previous versions.
A sizeable benefit of JointsWP is the availability of support. As with most WordPress starter themes, developers can open an issue or submit a bug report on the github page . For other questions or requests for help, Joints provides at least some support on the Foundation Forums and on Stack Overflow if the developer tags their question with ‘JointsWPâ. This level of support is beyond what most WordPress starter theme developers offer.
There is one other noteworthy, relatively newer WordPress + Foundation starter theme:
Heisenberg
Heisenberg is an open-sourced, previously internal theme from Zeek Interactive, combining Automattic’s popular _s (Underscores) theme with Foundation 6. It currently has a small following on Github, but sizeable potential, as it meets the needs of developers hoping to use the well-tested code of Underscores with Foundation 6.
Heisenberg has only a Sass-based option and limited documentation. Bug reports or questions can be submitted through its github page .
Modifying JointsWP to Use LESS Instead of Sass
If you’re looking to use a WordPress + Foundation starter theme, but prefer the LESS pre-processor to SASS, then one option is to download JointsWP and modify it to work with LESS. Below are the steps you’ll need to take:
- Go to JointsWP.com and download the JointsWP CSS version. Make any necessary adjustments to the theme based on your desired theme files and workflow.
- Create a new file in your theme directory, entitled yourfilename.less. This file can be located in the root of the theme directory or in an asset subdirectory. Just remember the file location; you’ll need it later.
- Register and enqueue your .less file in your theme’s functions.php file. This code should be added to the function you are using to enqueue your other assets (CSS or JavaScript files):
function yourfunction_assets() {
if (!is_admin()) { // we don’t want these files to interfere with the WP admin panel
wp_enqueue_style( ‘yourname’, get_template_directory_uri() . ‘/yourfilename.less’ ); //This filepath must match the location of your .less file in the theme directory
}
}
add_action( ‘wp_enqueue_scripts’, ‘yourfunction_assets’ );
[/code snippet]The final step of compiling your LESS file into CSS depends on your development environment:
If you’re developing WordPress themes online in a testing environment, then once the .less file is properly enqueued, you can compile your LESS using the WP-LESS plugin. This plugin automatically compiles all of your less into CSS and references the resulting CSS file. Once your development process is completed, you can copy the outputted CSS into style.css, deactivate the WP-LESS plugin, and your theme is ready to go.
If you’re developing in a local environment, there are a few different ways to compile the LESS file: online tools, or apps (like CodeKit) which compile LESS and SASS automatically.
If you decide to use an online tool , which is essentially compiling your CSS manually, then you’ll need to add the final CSS output back to your theme. Note that online compiling can sometimes result in missing or changed code, so check the final CSS carefully before adding it back into your theme.
For information on compiling within an app, check the app’s documentation for details.
With so many options available, it’s easy for web developers to get started using a WordPress + Foundation starter theme. Get started on yours today!
