cferdinandi / keel Goto Github PK

View Code? Open in Web Editor NEW

45.0 7.0 6.0 494 KB

A lightweight boilerplate for WordPress theme developers.

License: MIT License

PHP 14.58% CSS 10.49% JavaScript 74.94%

keel's Introduction

[DEPRECATED] Keel

A lightweight boilerplate for WordPress theme developers.

Note: This project is no longer maintained.

How to Contribute

Please review the contributing guidelines.

License

The code is available under the MIT License.

keel's People

Contributors

Stargazers

Watchers

Forkers

palimadra barokoko vjdesign jmo-jr aussieweb samarpw

keel's Issues

Replace `get_search_query` with `the_search_query` in searchform.php

http://codex.wordpress.org/Function_Reference/the_search_query

Remove SVG support from functions.php

Move to plugin

Add Feedburner redirect to functions.php

    /**
     * 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 );

Add additional map embedding support

fluidvids.init({
    selector: ['iframe', 'object'],
    players: ['www.youtube.com', 'player.vimeo.com', 'www.slideshare.net', 'www.google.com/maps', 'maps.google.com']
});

Add source file docs

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 emoji support in functions.php

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

Add JetPack markdown support to hero

See cferdinandi/harbor-wp-theme#39

Add function to remove post limit

/**
 * 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' );

Spinoff remove empty p method as a plugin

Better suited for plugin status.

Improve SVG detection

;(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);

Add console log helper

/**
 * 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;
}

Add feature detection init to functions.php

/**
 * 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);

Convert to lazypipe

"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'
]);

Add wp_nav_menu() as default to nav-main

Add .screen-reader-focusable class to skip nav link

Clean up heading structure

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...

Use h2 with .h1 class
Add hidden h1 for heading if needed
Switch to the_excerpt() instead of the_content()

Update syntax for image alignment

/**
 * 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;
    }
}

Update to normalize.css v5.x

https://github.com/necolas/normalize.css/blob/master/CHANGELOG.md

Where is jQuery being deregistered?

I´m trying to find the code where the default jQuery script is being deregistered ... cannot find anything in functions.php

Thanks

Update to normalize v4

https://github.com/necolas/normalize.css/blob/master/CHANGELOG.md#400-march-19-2016

Rename inline scripts/styles functions in functions.php

Add method to remove wpautop in functions.php

/**
 * 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' );

Enqueue all styles and scripts from functions.php

Add blog post featured image support

See cferdinandi/harbor-wp-theme#37

Complete rebuild with Harbor as foundation

https://github.com/cferdinandi/harbor-wp-theme

Update readme

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.

Add functions to customize the_excerpt() to functions.php

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' );

Update dropdown menu for better a11y

Copy the one in Harbor: http://harbor.gomakethings.com/

theme options missing?

Hi Chris, Noticed that Theme Support menu appears in place of Theme Options menu (compared to harbor theme). Wondering, where do I set theme options?

Add a11y feedback link to custom nav-accessibility.php template

<?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>

Update approach to script initialization in functions.php

/**
 * 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 all styles and scripts in functions.php

/**
 * 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'

Remove icon-fonts.js from detects

Update gulp js with lazypipe

https://github.com/cferdinandi/gomakethings

Rename menus primary and secondary in functions.php

Update config.scss file to match kraken

Add support for SVGs in the content editor

/**
 * 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;

Update SVG and @font-face feature detection

Use module pattern for more control and conditional loading.

Update wp_list_comments with specified comment type

wp_list_comments( array(
    'style' => 'div',
    'avatar_size' => 120,
    'type' => 'all',
    'callback' => 'keel_comment_layout' // Custom comment structure (in `functions.php`)
) );

get_template_directory_uri() in keel_load_inline_header()

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>

Add function to remove empty paragraphs added by wpautop

/**
 * 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|&nbsp;)+</p>\s?~', '', $content );
    return $content;
}
add_filter('the_content', 'keel_remove_empty_p', 20, 1);