A lightweight boilerplate for WordPress theme developers.
Note: This project is no longer maintained.
Please review the contributing guidelines.
The code is available under the MIT License.
A lightweight boilerplate for WordPress theme developers.
License: MIT License
A lightweight boilerplate for WordPress theme developers.
Note: This project is no longer maintained.
Please review the contributing guidelines.
The code is available under the MIT License.
Move to plugin
/**
* Replace RSS links with Feedburner url
* @link http://codex.wordpress.org/Using_FeedBurner
*/
function keel_custom_rss_feed( $output, $feed ) {
if ( strpos( $output, 'comments' ) ) {
return $output;
}
return esc_url( 'http://feeds.feedburner.com/GoMakeThings' );
}
add_action( 'feed_link', 'keel_custom_rss_feed', 10, 2 );
fluidvids.init({
selector: ['iframe', 'object'],
players: ['www.youtube.com', 'player.vimeo.com', 'www.slideshare.net', 'www.google.com/maps', 'maps.google.com']
});
3. [Working with the Source Files](#working-with-the-source-files)
## Working with the Source Files
If you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code, and runs unit tests.
### Dependencies
Make sure these are installed first.
* [Node.js](http://nodejs.org)
* [Ruby Sass](http://sass-lang.com/install)
* [Gulp](http://gulpjs.com) `sudo npm install -g gulp`
* [PhantomJS](http://phantomjs.org)
### Quick Start
1. In bash/terminal/command line, `cd` into your project directory.
2. Run `npm install` to install required files.
3. When it's done installing, run `gulp` to get going.
Every time you want to run your tasks, run `gulp`.
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
/**
* Display all posts instead of a limited number
* @param array $query The WordPress post query
*/
// function keel_get_all_posts( $query ) {
// $query->set( 'posts_per_page', '-1' );
// }
// add_action( 'pre_get_posts', 'keel_get_all_posts' );
Better suited for plugin status.
;(function (window, document, undefined) {
'use strict';
// SVG feature detection
var supports = !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
// Check against Opera Mini (throws a false positive)
var whitelist = navigator.userAgent.indexOf('Opera Mini') === -1;
// If SVG is supported, add `.svg` class to <html> element
if ( supports && whitelist ) {
document.documentElement.className += (document.documentElement.className ? ' ' : '') + 'svg';
}
})(window, document);
/**
* Log PHP in the JavaScript console
*/
function keel_console_log($name, $data = NULL, $jsEval = FALSE) {
if (! $name) return false;
$isevaled = false;
$type = ( $data || gettype($data) ) ? 'Type: ' . gettype($data) : '';
if ( $jsEval && ( is_array( $data ) || is_object( $data ) ) ) {
$data = 'eval(' . preg_replace('#[\s\r\n\t\0\x0B]+#', '', json_encode($data)) . ')';
$isevaled = true;
} else {
$data = json_encode($data);
}
// Sanitalize
$data = $data ? $data : '';
$search_array = array("#'#", '#""#', "#''#", "#\n#", "#\r\n#");
$replace_array = array('"', '', '', '\\n', '\\n');
$data = preg_replace($search_array, $replace_array, $data);
$data = ltrim(rtrim($data, '"'), '"');
$data = $isevaled ? $data : ($data[0] === "'") ? $data : "'" . $data . "'";
$js =
"<script>
// fallback - to deal with IE (or browsers that don't have console)
if (! window.console) console = {};
console.log = console.log || function(name, data){};
// end of fallback
console.log('$name');
console.log('------------------------------------------');
console.log('$type');
console.log($data);
console.log('\\n');
</script>";
echo $js;
}
/**
* Include feature detect inits in the header
*/
function keel_initialize_theme_detects() {
?>
<script>
// inits go here
</script>
<?php
}
add_action('wp_header', 'keel_initialize_theme_detects', 30);
"lazypipe": "0.2.2",
// Gulp Packages
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var clean = require('gulp-clean');
var lazypipe = require('lazypipe');
var rename = require('gulp-rename');
var flatten = require('gulp-flatten');
var tap = require('gulp-tap');
var header = require('gulp-header');
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-ruby-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var karma = require('gulp-karma');
var package = require('./package.json');
// Paths to project folders
var paths = {
output : 'dist/',
scripts : {
input : [ 'src/js/*' ],
output : 'dist/js/'
},
styles : {
input : 'src/sass/**/*.scss',
output : 'dist/css/'
},
static : 'src/static/**',
test : {
spec : [ 'test/spec/**/*.js' ],
coverage: 'test/coverage/',
results: 'test/results/'
}
};
// Template for banner to add to file headers
var banner = {
full :
'/**\n' +
' * <%= package.name %> v<%= package.version %>\n' +
' * <%= package.description %>, by <%= package.author.name %>.\n' +
' * <%= package.repository.url %>\n' +
' * \n' +
' * Free to use under the MIT License.\n' +
' * http://gomakethings.com/mit/\n' +
' */\n\n',
min :
'/**' +
' <%= package.name %> v<%= package.version %>, by Chris Ferdinandi' +
' | <%= package.repository.url %>' +
' | Licensed under MIT: http://gomakethings.com/mit/' +
' */\n'
};
// Lint, minify, and concatenate scripts
gulp.task('scripts', ['clean'], function() {
var jsTasks = lazypipe()
.pipe(header, banner.full, { package : package })
.pipe(gulp.dest, paths.scripts.output)
.pipe(rename, { suffix: '.min' })
.pipe(uglify)
.pipe(header, banner.min, { package : package })
.pipe(gulp.dest, paths.scripts.output);
return gulp.src(paths.scripts.input)
.pipe(plumber())
.pipe(flatten())
.pipe(tap(function (file, t) {
if ( file.stat.isDirectory() ) {
var name = file.relative + '.js';
return gulp.src(file.path + '/*.js')
.pipe(concat(name))
.pipe(jsTasks());
}
}))
.pipe(jsTasks());
});
// Process, lint, and minify Sass files
gulp.task('styles', ['clean'], function() {
return gulp.src(paths.styles.input)
.pipe(plumber())
.pipe(sass({style: 'expanded', noCache: true}))
.pipe(flatten())
.pipe(prefix('last 2 version', '> 1%'))
.pipe(header(banner.full, { package : package }))
.pipe(gulp.dest(paths.styles.output))
.pipe(rename({ suffix: '.min' }))
.pipe(minify())
.pipe(header(banner.min, { package : package }))
.pipe(gulp.dest(paths.styles.output));
});
// Copy static files into output folder
gulp.task('static', ['clean'], function() {
return gulp.src(paths.static)
.pipe(plumber())
.pipe(gulp.dest(paths.output));
});
// Lint scripts
gulp.task('lint', function () {
return gulp.src(paths.scripts.input)
.pipe(plumber())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// Remove prexisting content from output and test folders
gulp.task('clean', function () {
return gulp.src([
paths.output,
paths.test.coverage,
paths.test.results
], { read: false })
.pipe(plumber())
.pipe(clean());
});
// Run unit tests
gulp.task('test', function() {
return gulp.src([paths.scripts.input + '/../**/*.js'].concat(paths.test.spec))
.pipe(plumber())
.pipe(karma({ configFile: 'test/karma.conf.js' }))
.on('error', function(err) { throw err; });
});
// Combine tasks into runner
gulp.task('default', [
'lint',
'clean',
'static',
'scripts',
'styles',
'test'
]);
See cferdinandi/harbor-wp-theme#38
Follow proper rank structure since doc outline is not supported by any browsers. On blog index and archive pages...
h2
with .h1
classh1
for heading if neededthe_excerpt()
instead of the_content()
/**
* Image alignment
*/
.aligncenter {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.alignleft {
@extend .aligncenter;
@media (min-width: $bp-small) {
float: left;
margin-right: calc-em(8px);
}
}
.alignright {
@extend .aligncenter;
@media (min-width: $bp-small) {
float: right;
margin-left: calc-em(8px);
}
}
.alignnone {
@extend .aligncenter;
@media (min-width: $bp-small) {
margin-left: 0;
margin-right: 0;
}
}
I´m trying to find the code where the default jQuery script is being deregistered ... cannot find anything in functions.php
Thanks
/**
* Disable WordPress auto-formatting on page-plain.php template
*/
function keel_remove_wpautop() {
if ( is_page_template( 'page-plain.php' ) ) {
remove_filter('the_content', 'wpautop');
}
}
add_action( 'pre_get_posts', 'keel_remove_wpautop' );
In lieu of a formal style guide, take care to maintain the existing coding style. Please apply fixes to both the development and production code. Don't forget to update the version number, and when applicable, the documentation.
Overreaching as a boilerplate
Source: http://codex.wordpress.org/Function_Reference/the_excerpt
Length
function custom_excerpt_length( $length ) {
return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
Read More Link
function new_excerpt_more( $more ) {
return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('Read More', 'your-text-domain') . '</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );
Copy the one in Harbor: http://harbor.gomakethings.com/
<?php
/**
* nav-accessibility.php
* Template for accessibility improvements to the navigation.
*/
?>
<div class="container container-large">
<!-- Skip link for better a11y -->
<a class="screen-reader screen-reader-focusable" href="#main"><?php _e( 'Skip to main content', 'keel' ); ?></a>
<!-- a11y feedback -->
<a class="screen-reader screen-reader-focusable" href="mailto:<?php echo antispambot( get_option( 'admin_email' ) ); ?>?subject=Accessibility%20Feedback"><?php _e( 'Accessibility Feedback', 'keel' ); ?></a>
</div>
/**
* Include script inits in the footer
*/
function keel_initialize_theme_scripts() {
?>
<script>
// inits go here
</script>
<?php
}
add_action('wp_footer', 'keel_initialize_theme_scripts', 30);
/**
* Load theme scripts in the footer
*/
function keel_load_theme_files() {
wp_enqueue_script( 'keel-theme-detects', get_template_directory_uri() . '/dist/js/detects.js', null, null, false );
wp_enqueue_style( 'keel-theme-styles', get_template_directory_uri() . '/dist/css/main.css', null, null, 'all' );
wp_enqueue_script( 'keel-theme-scripts', get_template_directory_uri() . '/dist/js/main.js', null, null, true );
}
add_action('wp_enqueue_scripts', 'keel_load_theme_files'
/**
* Allow new content types in posts
*/
$allowedposttags['svg']['xmlns'] = true;
$allowedposttags['svg']['class'] = true;
$allowedposttags['svg']['id'] = true;
$allowedposttags['svg']['viewbox'] = true;
$allowedposttags['path']['d'] = true;
Use module pattern for more control and conditional loading.
wp_list_comments( array(
'style' => 'div',
'avatar_size' => 120,
'type' => 'all',
'callback' => 'keel_comment_layout' // Custom comment structure (in `functions.php`)
) );
Hey, shouldn´t get_template_directory_uri() in the function keel_load_inline_header() (functions.php) be replaced with get_template_directory()?
Otherwise file_get_contents is making a http request ... i guess, not sure ;)
`
get( 'Version' ) . '.js' ); ?> </script>
`
/**
* Remove empty paragraphs created by wpautop()
* @author Ryan Hamilton
* @link https://gist.github.com/Fantikerz/5557617
*/
function keel_remove_empty_p( $content ) {
$content = force_balance_tags( $content );
$content = preg_replace( '#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content );
$content = preg_replace( '~\s?<p>(\s| )+</p>\s?~', '', $content );
return $content;
}
add_filter('the_content', 'keel_remove_empty_p', 20, 1);
For less experienced git & gulp users like me: what is the recommended way to start a new project with keel, kraken and astro?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.