Hi. I'm a starter theme called ZF Theme, which stands for either Zeeland Family or Zurb Foundation, whichever you prefer. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
My structure is 95% the same as _s by Automattic, but I integrate the Foundation Zurb Template.
Learn more about the Foundation framework by reading the Foundation docs.
functions/custom-header.php
just add the code snippet found in the comments of functions/custom-header.php
to your header.php
template.functions/template-tags.php
that keep your templates clean and neat and prevent code duplication.functions/template-functions.php
that can improve your theming experience._src
directory.To personalise your theme, download zf-theme
from GitHub. The first thing you want to do is copy the zf-theme
directory and change the name to something else (like, say, megatherium
), and then you'll need to do a five-step find and replace on the name in all the templates.
'zf-theme'
(inside single quotations) to capture the text domain.zf_theme_
to capture all the function names.Text Domain: zf-theme
in style.css. ZF_Theme
(with a space before it) to capture DocBlocks.zf-theme-
to capture prefixed handles.OR
'zf-theme'
and replace with: 'megatherium'
zf_theme_
and replace with: megatherium_
Text Domain: zf-theme
and replace with: Text Domain: megatherium
in style.css. ZF_Theme
(with a space before it) and replace with: Megatherium
zf-theme-
and replace with: megatherium-
Then, update the stylesheet header in style.css
and the links in footer.php
with your own information. Next, update or delete this readme.
There are two routes you can take for development, depending on whether you like Sass, Gulp and friends:
If you're not into Sass or Gulp, just delete the _src directory and remove the comment from the beginning of this line in functions/scripts-and-styles.php
:
// wp_enqueue_style( 'zf-theme-custom-style', get_stylesheet_uri() );
You can then add your own custom styles into style.css
.
It is highly recommended that you create a custom version of the Foundation JS & CSS using the online configurator so you have only what you need and nothing else. This will save users' bandwidth, time, batteries, money, headaches and reduce CO2 emissions. If you do this however, you need to do a couple of things after extracting the custom download:
css/foundation.min.css
from the custom package into dist/assets/css/
and rename it to app.css
.js/vendor/foundation.min.js
from the custom package into dist/assets/js/
and rename it to app.js
.If you have any custom JS, I suggest creating a new file in dist/assets/js
and enqueuing it the usual way in functions/scripts-and-styles.php
.
Requirements: Node and NPM. And a local WordPress development server (MAMP, XAMPP, Pressmatic, something else, it's your choice).
Set up a local WordPress development site, and take note of its URL, e.g. 'example.dev'. Drop your theme in the themes directory and activate it. Edit config.yml
and make sure the BROWSERSYNC options point to the right URL. This is also where you change options regarding which Foundation (and other) JS files should be concatenated, how the autoprefixer works etc.
Run npm install
in your theme directory. Go make a cup of tea while this is happening. Then run npm start
and start developing!
VERY IMPORTANT: Run npm run build
to compile compressed, production-ready CSS and JS, or make sure your deployment process does this for you. Otherwise you'll end up with ridiculously large CSS and JS files and your clients will call you on a Saturday evening when you're trying to enjoy a beer with your friends.
The main entry point to the theme JavaScript is in _src/assets/js/app.js
. Adding your own code follows similar logic to SCSS files:
You probably only want a subset of Foundation for your project. To prevent a module from being loaded, open _src/assets/js/lib/foundation-explicit-pieces
in your text editor and comment out both the import line at the top and the initialization line at the end of the file. For example, if you don't need the AccordionMenu component, comment out this:
import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
and this:
Foundation.plugin(AccordionMenu, 'AccordionMenu');
_src/assets/js/app.js
.import './my-custom-feature';
and use ES6 imports to add the required depencies such as jQuery (see app.js for an example._src/assets/wp-js
. Do this if you only want to conditionally load them in WordPress based on page etc.If you prefer to start development by building HTML mockups, you can build your templates in _src/pages
and _src/partials
and change the BROWSERSYNC type setting in config.yml
to html
. Browsersync will start up a simple static file server at localhost:8000 and refresh every time you make a change to your Sass, JS or HTML template files. The benefit of this is you can get going faster without the overhead of a WP site running locally, and it's easier to include front-end devs in your team who might not have a local server setup or WordPress experience.
Read more about the Panini template language in the Panini docs on the Foundation site.
You can build a styleguide within your theme in _src/styleguide/
, extremely handy when passing on development to new theme members. Instructions for how to edit the styleguide on the Foundation site. The BROWSERSYNC value in config.yml
needs to be set to html
and you can view your guide at localhost:8000/styleguide.html
.