mattbanks / wordpress-starter-theme

WordPress Starter Theme for use as a starting template for building custom themes. Uses SCSS, Normalize, AutoPrefixr, Grunt for compilation/linting/deployments, and BrowserSync for cross-device auto refreshing.

WordPress Starter Theme

Version: 4.2.2

Author:

Matt Banks ( @mattbanks / collectivthkg.com / mattbanks.me )

Summary

WordPress Starter Theme for use as a starting template for building custom themes. Uses SCSS and AutoPrefixr, HTML5 Boilerplate with Modernizr and Normalize.css, and Grunt for all processing tasks. Syncs changes across local development devices with BrowserSync. Tested up to WordPress 4.0 RC1.

Usage

The theme is setup to use Grunt to compile SCSS (with source maps), run it through AutoPrefixr, lint, concatenate and minify JavaScript (with source maps), optimize images, and syncs changes across local development devices with BrowserSync, with flexibility to add any additional tasks via the Gruntfile. Alternatively, you can use CodeKit or whatever else you prefer to compile the SCSS and manage the JavaScript.

Rename folder to your theme name, change the style.scss intro block to your theme information. Open the theme directory in terminal and run npm install to pull in all Grunt dependencies. Run grunt to execute tasks. Code as you will.

If you are using MAMP or Vagrant, change the proxy option in the grunt browserSync task to match your vhost URL.

• Compile assets/styles/style.scss to style.css
• Compile assets/styles/editor-style.scss to editor-style.css
• Concatenate and minify plugins in assets/js/vendor and assets/js/source/plugins.js to assets/js/plugins.min.js
• Minify and lint assets/js/source/main.js to assets/js/main.min.js
• ??
• Profit
• Create sprites by adding PNGs to assets/images/sprites and use by referencing created classes in assets/styles/partials/_spritesheet.scss

To concatenate and minify your jQuery plugins, add them to the assets/js/vendor directory and add the js filename and path to the Gruntfile uglify task. Previous versions of the starter theme automatically pulled all plugins in the vendor directory, but this has changed to allow more granular control and for managing plugins and assets with bower.

Bower

Supports bower to install and manage JavaScript dependencies in the assets/js/vendor folder.

Deployment

The theme includes deployments via grunt-rsync. The Gruntfile includes setups for staging and production - edit your paths and host, then run grunt deploy:staging or grunt deploy:production to deploy your files via rsync.

Features

1. Normalized stylesheet for cross-browser compatibility using Normalize.css version 3 (IE8+)
2. Easy to customize
3. Flexible grid based on work from Chris Coyier
4. Media Queries can be nested in each selector using SASS
5. SCSS with plenty of mixins ready to go
6. Grunt for processing all SASS, JavaScript and images, and cross-device refreshing with BrowserSync
7. Much much more

Suggested Plugins

• WordPress SEO by Yoast
• Google Analytics for WordPress by Yoast
• W3 Total Cache
• Gravity Forms
• Pods Framework

Contributing:

Anyone and everyone is welcome to contribute! Check out the Contributing Guidelines.

Contributors:

• ddropik
• jjmu15

Credits

Without these projects, this WordPress Starter Theme wouldn't be where it is today.

• HTML5 Boilerplate
• Normalize.css
• SASS / SCSS
• AutoPrefixr
• BrowserSync
• Don't Overthink It Grids
• Underscores Theme
• Grunt

wordpress-starter-theme's Issues

Sass error : File not found

When running grunt after installing from scratch, i got this error :
Error: File to import not found or unreadable: partials/spritesheet.
Load path: /wordtest/wp-content/themes/starter-theme
on line 31 of assets/styles/style.scss

Looks like there's a blank _spritesheets.scss file missing in 1821e08

gulp file setup really slow.

Hello Mattbanks,

Thanks for making such a great gulp.js file template environnement.
I was although why my setup seems to be so slow... Finished 'styles' after 6.65 s in my case. Here's a sample of my gulpfile.js setup.

Let me know!
Thanks

// Load plugins
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')({
camelize: true
}),
lr = require('tiny-lr'),
server = lr();
var gutil = require('gulp-util');

// Error Handling
var onError = function (err) {
plugins.util.beep();
};

// Styles
gulp.task('styles', function() {
return gulp.src('assets/styles/source/*.scss')
.pipe(plugins.plumber({
errorHandler: onError
}))
.pipe(plugins.rubySass({
compass: true,
lineNumbers : true,
// sourcemap: true
}))
// .pipe(plugins.autoprefixer('last 2 versions', 'ie 9', 'ios 6', 'android 4'))
.pipe(gulp.dest('assets/styles/build'))
// .pipe(plugins.minifyCss({
// keepSpecialComments: 1
// }))
.pipe(plugins.livereload(server))
.pipe(gulp.dest('./'))
.pipe(plugins.notify({
message: 'Styles task complete'
}));
});

// Styles
gulp.task('phpfiles', function() {
return gulp.src('header.php')
.pipe(plugins.plumber({
errorHandler: onError
}))
.pipe(plugins.livereload(server))
.pipe(plugins.notify({
message: 'Phpfiles task complete'
}));
});

// Vendor Plugin Scripts
gulp.task('plugins', function() {
return gulp.src(['assets/js/source/plugins.js', 'assets/js/vendor/*.js'])
.pipe(plugins.concat('plugins.js'))
.pipe(gulp.dest('assets/js/build'))
.pipe(plugins.rename({
suffix: '.min'
}))
.pipe(plugins.uglify())
.pipe(plugins.livereload(server))
.pipe(gulp.dest('assets/js'))
.pipe(plugins.notify({
message: 'Scripts task complete'
})
.on('error', gutil.beep));

});

// Site Scripts
gulp.task('scripts', function() {
return gulp.src(['assets/js/source/*.js', '!assets/js/source/plugins.js'])
.pipe(plugins.jshint('.jshintrc'))
// .pipe(plugins.jshint.reporter('default'))
// .pipe(plugins.concat('main.js'))
.pipe(gulp.dest('assets/js/build'))
.pipe(plugins.rename({
suffix: '.min'
}))
// .pipe(plugins.uglify())
.pipe(plugins.livereload(server))
.pipe(gulp.dest('assets/js'))
.pipe(plugins.notify({
message: 'Scripts task complete'
}));
});

// Images
gulp.task('images', function() {
return gulp.src('assets/images/*/')
.pipe(plugins.cache(plugins.imagemin({
optimizationLevel: 7,
progressive: true,
interlaced: true
})))
.pipe(plugins.livereload(server))
.pipe(gulp.dest('assets/images'))
.pipe(plugins.notify({
message: 'Images task complete'
}));
});

// Watch
gulp.task('watch', function() {

// Listen on port 35729
server.listen(35729, function(err) {
    if (err) {
        return console.log(err);
    }
    // Watch .php files
    gulp.watch('header.php', ['phpfiles']);

    // Watch .scss files
    gulp.watch('assets/styles/source/**/*.scss', ['styles']);

    // Watch .js files
    gulp.watch('assets/js/**/*.js', ['plugins', 'scripts']);

    // Watch image files
    // gulp.watch('assets/images/**/*', ['images']);

});

});

// Default task
gulp.task('default', ['styles', 'plugins', 'scripts', 'images', 'watch']);

Grunt imagemin error - "Cannot read property 'contents' of undefined"

When I run grunt, it fails at imagemin:dist. I haven't modified any code in any ways.
I'm running Windows 10, with node version 6.9.1 and npm version 3.10.8.

Expected behavior

Execute the imagemin:dist without errors

Actual behavior

Returned error Fatal error: Cannot read property 'contents' of undefined

Console log

$ grunt
Running "sass:dist" (sass) task

Running "autoprefixer:files" (autoprefixer) task
>> 2 autoprefixed stylesheets created.
>> 2 sourcemaps created.

Running "cssmin:minify" (cssmin) task
>> 2 files created. 23.21 kB → 7.5 kB

Running "uglify:plugins" (uglify) task
>> 1 sourcemap created.
>> 1 file created.

Running "uglify:main" (uglify) task
>> 1 sourcemap created.
>> 1 file created.

Running "imagemin:dist" (imagemin) task
Fatal error: Cannot read property 'contents' of undefined

grunt deploy:production gives rsync error

I'm running Windows and trying to deploy my local theme using deploy task. For some reason, it's giving me an error. I've been using cmd.exe with Admin rights so that shouldn't be a problem. I've double checked the settings to make sure my creds are right and I don't see the problem there either.

Here's what I'm seeing (with everything being correct but obfuscated for privacy):

Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'ReduxFramework' does not have a method '_options_page' in /home4/wilmer/public_html/wp-includes/plugin.php on line 525

Me aparece este error:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'ReduxFramework' does not have a method '_options_page' in /home4/wilmer/public_html/wp-includes/plugin.php on line 525

Me puede ayudar a solucionarlo.

"styles" task finised after >30s on Windows

Hi !

I have a problem with the "styles" gulp task.

It immediatly compiles .scss files really well, but the task take more than 30s to finish, and I get 4 "Styles task complete" before it finish. During these 30s, the task can't be run, so I have to wait these 30s to compile again my files.

Other tasks like "scripts" last like 10s, and five me 2 notifications.

Do you have a solution ?

I'm on Windows.

Thank you,
Thomas

Just noticed a spelling/class name mistake

_post.scss line 53 .navgation I believe should be .navigation

Was racking my brain trying to figure out why I couldn't style the navigation!

Cheers,
Nathan

Getting error Warning: call_user_func_array() expects parameter 1 to be a valid callback

Hi,
I just tried to use this as a starter theme and got this error.

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function '_mbbasetheme_setup' not found or invalid function name in /Users/user/Sites/Wordpress/my-theme/wp-includes/plugin.php on line 403

Any ideas? I'm using Wordpress 3.4.2.

Thanks

Is this still supported and updated

I guess if this theme is till updated and supported..

Getting Error Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'wp_set_excerpt_length' not found or invalid function name in C:\xampp\htdocs\wordpress\wp-includes\class-wp-hook.php on line 298

Hi,
I'm getting this error when I try to add this function for the excerpt length.

function wp_set_excerpt_lenght( $length ){
	return 20;
}

add_filter( 'excerpt_length', 'wp_set_excerpt_length');

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'wp_set_excerpt_length' not found or invalid function name in C:\xampp\htdocs\wordpress\wp-includes\class-wp-hook.php on line 298

I'm new to Wordpress actually.

Can you help in here?
Thanks in advance.

Incorrect path for skip-link-focus-fix.js and navigation.js

In lib/theme-functions.php, lines 87 and 89, these files are missing a slash after the get_template_directory_uri() function, so they give a 404 when visiting the website:

• assets/js/vendor/skip-link-focus-fix.js
• assets/js/vendor/navigation.js

Suggested fix:

    wp_enqueue_script( '_mbbasetheme-navigation', get_template_directory_uri() . '/assets/js/vendor/navigation.js', array(), '20120206', true );

    wp_enqueue_script( '_mbbasetheme-skip-link-focus-fix', get_template_directory_uri() . '/assets/js/vendor/skip-link-focus-fix.js', array(), '20130115', true );

Display Tweets plugin

@mattbanks Apologies if this is a plugin issue rather than a theme issue but I am not sure where the issue lies at the moment.

The conflict arises when the 'Display Tweets' plugin is enabled with your theme.

http://wordpress.org/plugins/display-tweets-php/

The plugin has a settings page that is normally located under Settings called 'Twitter Feed'. When the plugin is enabled with your theme the menu item disappears and the page returns a You do not have sufficient permissions to access this page.

/wp-admin/options-general.php?page=displaytweets

This erroneous message does not occur and the Setting menu item is listed when the default Twenty Thirteen theme is enabled.

I have tested this on a vanilla WordPress 3.7.1 install, logged in as admin with only your Starter Theme and the Display Tweets plugin. Please advise where to go next because its got me stumped.

Wordpress "The tracked link has expired." error

When I try to activate the theme in the themes page, this error is showing..
screenshot

Wordpress version : 4.9.5

Any idea of the problem ?

Thanks in advance,
Kévin

Required Plugins

Hi there is no mention of the required plugins in the docs yet when you activate the plugin they are listed as such.

Are they merely recommended? Keen to hear your thoughts and thanks for a really good starter compass theme.