Skip to content
A WordPress parent theme using Zurb's Foundation for Sites 6.4, the most advanced responsive front-end framework in the world. Foundation for Sites 6.4, unlike earlier versions, uses a flexbox based grid system called XY Grid.
PHP CSS JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
framework
languages
library/src
loops
page-templates
post-formats
template-parts
.babelrc
.gitignore
404.php
CHANGELOG.md
LICENSE
README.md
archive.php
author.php
bower.json
category.php
comments.php
config.yml
footer.php
front-page.php
functions.php
gulpfile.babel.js
header.php
home.php
image.php
index.php
package.json
page.php
screenshot.png
search.php
searchform.php
sidebar-footer.php
sidebar.php
single.php
style.css
tag.php

README.md

inti-foundation

GitHub version

Inti Foundation is a WordPress parent theme that uses Foundation for Sites 6.4, the most advanced responsive front-end framework in the world. Foundation for Sites 6.4, unlike earlier versions, uses a flexbox based grid system called XY Grid

As a theme it is a starting point for you to build a WordPress/Foundation site from scratch.

As a parent theme it allows you to create unique child themes harnessing the functionality of the parent while still allowing you to upgrade the parent when new features are released.

As a framework it comes packed with tonnes of WordPress functionality baked-in and ready to expand upon, all neatly organized into easy to understand directories and files.

Getting Started

Gulp

Inti Foundation and its child themes come configured with a Gulp file that will compile your Sass and javascript changes for you with its watch function. (If your workflow doesn’t include Gulp, please review this file to see what library elements need to be compiled into a final CSS file with your own tools).

To begin:

  • Modify config.yml file for your setup, then run:
  • npm install
  • gulp build
  • gulp default, a new browser window will open pointing to a BrowserSync server displaying the WordPress installtion (via BrowserSync).

The best way to customize Inti Foundation is to create a child theme. Consider doing that before making edits to the parent theme.

Activating

Inti Foundation (and a child theme) should be uploaded to wp-content/themes and activated via the WordPress Dashboard.

On visiting the site with the new theme activated, you'll see the homepage is not displaying any content and that no menu is displayed. We need to run through an intial configuration to begin using the theme.

Initial Settings

Front Page and Blog Index

Most sites require a Home Page and a Blog Index page. In the WordPress Dashboard, publish a page called ‘Home’ and another called ‘Blog’. In Settings->Reading in the WordPress Dashboard, set ‘Home’ as the front page and ‘Blog’ as the blog page.

The theme has a template for the home page which contains two elements,

  • The content from the page set as ‘Home’
  • A loop of posts underneath

This loop has been placed here as an example of how to add more custom elements to the front page. A theme options page has been added so that this element can be configured. Additional elements can be added in the same way.

An example child theme has been created that expands on this idea. Numerous 'front page blocks' has been added with accompanying post types, metaboxes, taxonomies, widgetsa and shortcodes – all configured through the WordPress Customizer. View the inti-kitchen-sink theme on GitHub

Options

The theme can be configured, and more options can be added as you develop your own theme, with either an Options page or with Customizer in live preview mode. Both methods have been added by default in Inti Foundation so that you can choose which you'd prefer to you for your own options. By default, options that are more to do with global settings have been added to an Options page called "Inti Options" and options that are more to do with visual elements have been added in Customizer. Feel free to modify these as you see fit.

Have a look around and set the options activate elements in the theme. Perhaps the most important area is found in the Customizer and relates to the header area.

Header / 'Site Banner'

In Inti Foundation we call the header area is made up of two parts. The menu and the 'site banner'. The site banner is a wrapper that is home to a number of elements that can be turned on and off, or customized in the Customizer. Upload a logo, turn on and off the site name and description, etc.

The inti-kitchen-sink child theme expands on this with a number of template parts that contain variations of the header with different or additional elements or changes in position. Coupled with the numerous hooks before, after and inside each element wrapper, it's easy to change one of the most important parts of the site.

Menus

The menu will appear in the theme when a menu is created and added to one of the three menu areas that exist by default in the theme. These are the main menu, the mobile menu (which is usually just the same menu) and the footer menu (which is usually single-level)

Functionality switches

Each part of the theme, from default post types, to menu areas, to template files, to minor functions like the breadcrumps can be switched on and off with WordPress's add_theme_support() in functions.php

Documentation

Slowly but surely more complete documentation is being set up at here.

Contributing

Please do leave comments, post new issues and make pull requests. Any form of contribution is welcome. You can also get in touch here: stuart (at) waqastudios.com

You can’t perform that action at this time.