Git Product home page Git Product logo

html5blank's Introduction

Powerful shell for rapidly deploying your WordPress projects.

Getting Started with HTML5 Blank

  • Go to the Wordpress' theme folder (.../wp-content/themes)
  • In CLI, run: git clone https://github.com/html5blank/html5blank.git
  • cd html5blank and then npm install (you'll need gulp installed as well)
  • gulp watch will enable livereload and development version
  • gulp build for distribute version with minified js and css files
  • NOTE: src and dist folders can live happily together inside the same folder (html5blank) that's inside the theme folder. You'll have two different instances of the theme within Appearance > Themes panel inside the admin

Get involved! Make HTML5 Blank better

Help make the code better by submitting a pull request or open an issue.

Features

HTML5

  • Basic Semantic HTML5 Markup
  • W3C Valid Code Foundations
  • Responsive Ready, ViewPort meta data
  • HTML Class support for IE7, IE8, IE9 Conditionals (HTML5 Boilerplate)
  • Clean, neatly organized code, with PHP annotations

jQuery + JavaScript

  • Replaced built-in WordPress enqueue with Google CDN
  • Protocol relative jQuery if Google CDN offline (HTML5 Boilerplate)
  • Conditionizr for cross-platform/device detects and enhancements
  • Modernizr feature detection, HTML5 element support for legacy, progressive enhancement (HTML5 Boilerplate)
  • DOM Ready JavaScript file setup (scripts.js) for instant JavaScript development
  • JavaScript files enqueued using WordPress functions into wp_head

CSS3

  • HTML5 Boilerplate reset
  • Media Queries framework for instant development using @media
  • @font-face empty framework with Fonts folder setup ready for new custom fonts
  • CSS3 custom selection styles
  • Inline print styles (HTML5 Boilerplate)
  • Body element config, including Optimize Legibility for kerning and font-smoothing
  • Replaced focus styles to avoid blue blur in field elements, replaced with border
  • Stylesheet enqueued using WordPress functions into wp_head

Preloaded Functions (functions.php)

  • Enqueue Scripts functions setup
  • Enqueue Styles functions setup
  • Dynamic WordPress Menu Navigation Support, preloaded with 3 Dynamic menus
  • Cleaned up dynamic nav output (Remove outer 'div')
  • Remove all injected classes from nav items, ID's, Page ID's
  • Custom Post Type x1 preloaded for demonstration, supporting: Category, Tags, Post Thumbnails, Excerpts
  • Dynamic Sidebar with x2 Widget Areas, and sidebar.php setup
  • WordPress Thumbnail Support, no Plugin image cropping, custom Arrays and Thumbnail settings
  • Custom Excerpt callbacks, with changeable callback numbers
  • Replaced 'Read More' button for custom Excerpt callbacks
  • Demo Shortcodes included, with Nested Shortcode capability
  • Add Slug to body class (Starkers Theme credit)
  • wp_head functions stripped right down, remove excess injected junk
  • All functions annotated, categorized into sections, filters, actions, shortcodes etc.
  • Space for development, neatly organized code with Modules/External files

Theme Files and Functionality

  • Built in Pagination, no plugins (strips out prev + next post and gives page numbers)
  • Optimized Google Analytics in footer (HTML5 Boilerplate)
  • Widget Area Sidebar support, functions in place to get developing
  • Custom Search Form included (searchform.php) - fully editable
  • Tags support for showing Post Tags
  • Category support for showing the Category of post
  • Author support showing the author
  • Demo Custom Page Template for expansion

Contributors

Thanks to all the awesome contributors!

html5blank's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

html5blank's Issues

jQuery messed up

I'm trying to do a simple alert(); in the script.js and nothing happens. What's up ?

The new modification of the js files and functions.php seems to have broke something. Am I the only one having trouble to run jQuery now with the lastest WP 3.8.2 and HTML5Blank ?

X-UA-Compatible header problem

replacing this in header.php:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"

with this in function.php:

if ( ! headers_sent() && isset($_SERVER['HTTP_USER_AGENT'] ) &&( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE' ) !== false ) )
header( 'X-UA-Compatible: IE=edge,chrome=1' );

caused Html5 Validation in validator.w3.org test.

Taking more control of id and class in wp_nav_menu

What If we want more control of our menu? or what if we need a a sepacial ID for the navigation or just having clean code.

like:

// Remove the <div> surrounding the dynamic navigation to cleanup markup
function my_wp_nav_menu_args( $args = '' ) {
    $args['container'] = false;
    $args['menu_class'] = 'browser';
    $args['menu_id'] = 'browser';
    return $args;
}

    // Remove Injected classes, ID's and Page ID's from Navigation <li> items

function tag_attributes_filter($var) {

  return is_array($var) ? array_intersect($var, array('selected')) : 'selected';
}

function my_css_attributes_filter($var) {
  if(is_array($var)){
   $varci= array_intersect($var, array('current-menu-item'));
   $cmeni = array('current-menu-item');
   $selava   = array('selected');
   $selavaend = array();
   $selavaend = str_replace($cmeni, $selava, $varci);
  }
  return $selavaend;
 }

add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args');
add_filter('nav_menu_css_class', 'tag_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'tag_attributes_filter', 100, 1);
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);

Am I nuts? or something good of this can be use?

Gulp workflow and local servers

We're moving into a time where local servers and front-end tooling are so important, and I feel HTML5 Blank is missing out on:

  • Sass/SCSS compilation
  • JSHint/JavaScript concats/minification
  • HTML compression
  • editorconfig etc for teams
  • Loads of other Gulp stuff

There are Wordpress plugins for some of this stuff, but that's not a workflow. I'm wondering whether some kind of workflow (similar to Yeoman and other projects) could be setup, or just ignored for those not wanting. WordPress is a complete pain to setup a decent workflow for, I'm wondering if something can be done to help build locally alongside modern web practices.

Looking for maintainers/contributors

I don't develop WordPress websites or applications anymore, and feel due to the popularity of HTML5 Blank would hate to see it untouched for longer than I've left it.

The website receives over 10,000 hits a month, and presumably a great deal of downloads from that. I'm looking for maintainers/contributors that can help keep the project going being one of the top WordPress starting points for WordPress developers.

Things would involve developing and maintaining the HTML5 Blank project core, as well as keep it fresh with the latest WordPress APIs/changes, make it your own with new ideas and implementations, and join the project. I can provide HTML5 and JavaScript assistance on anything, but I'm completely out of touch of the WordPress core.

If anyone would like to take the gauntlet on HTML5 Blank, drop a comment here or email me. Happy coding!

gulp workflow

I'd like to use a Gulp workflow with html5blank, mainly for using BrowserSync, compiling Sass (using autoprefixer and sourcemaps), and managing (and wiring) Bower dependencies.

Anyone has any thoughts on that or have tried something similar?

I'm currently working on that, starting from gulp-webapp's Gulp implementation.

gulp tasks: using flags instead of dev/production naming convention

or to be more clear, it means that instead of having two gulp tasks that are almost identical, we will have a task that will trigger by a flag.
for example today we have two tasks that are almost identical stylesDev and stylesProduction (and we have more of this duplication). we can change it to have only one task styles that will be trigger by cli: gulp styles --prod (production) or just gulp styles (for dev).
what's your thoughts?

html5wp_pagination customize next/prev buttons label

Hi there,

I've been using HTML5 Blank for a few years now as inspiration for my projects. Great stuff. I love the simple pagination, but would love to customize the labels for previous / next. Is this possible?

cheers,
Bram

Errors in Custom comment callback and Custom Gravatar functions

Hi toddmotto, I hope writing in the right area, It is my first tim ein GitHub. I think there is a error in functions.php in // Custom Comments Callback. It seems to be a

  • tag not opened properly, since in my comment box i saw displayed this string: li class="comment even thread-even depth-1 parent" id="comment-2">. In addition, if I go to Discussion and i choose the Custom Gravatar, it's not shown. From source I can see that the path still refers to //0.gravatar.com...and not to directory theme uri. Thank you for any help!!

  • Jquery conflicts

    I'm trying to add some JQuery scripts to the header file, but when I put it below the , they don't do anything, and when I put it above that line, I keep getting this error:

    ReferenceError: Can't find variable: $

    Seems like there's some JQuery conflicts going on. What is the best way to implement these kinds of scripts into the template?

    Incorrect cite-tag usage

    http://dev.w3.org/html5/spec/the-cite-element.html

    "A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.)"

    The Comment Author is wrappen in cite-tag => functions.php and translation-files

    JetPack Infinite Scroll

    I'm having issues getting Infinite Scroll through JetPack to work with HTML5BLANK;

    below is my loop:

    'results', // it's default, you can skip it 'order_by' => 'date', // it's also default ); $query = new WP_Query( $args ); ?> have_posts()) : $query->the_post(); get_template_part( 'results', get_post_format() ); endwhile; ?>

    Then, below are the items in my functions.php file.

    function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
    'container' => 'results',
    'render' => 'mytheme_infinite_scroll_render',
    'footer' => 'page',
    ) );
    }
    add_action( 'init', 'mytheme_infinite_scroll_init' );

    function mytheme_infinite_scroll_render() {
    get_template_part( 'loop' );
    }

    Any ideas??? I've tried everything; googled it a bunch of times to no avail.

    Interest in a build script and some basic less files?

    I'm submitting this to see if it would be valuable/desired to submit a pull request adding a build script and some basic LESS style files.

    The idea is to be able to write in LESS right out of the box in an intuitive way; not a complete "framework" of less files (like Bootstrap), but something a bit more basic, with simple mixins for browser compatibility and primary variables for colors and fonts.

    Thoughts?

    Adding structure to theme directory

    Again, considering the overhaul of html5blank (#77), are there any opinions on getting some php files out of the root directory? I usually use a partials/ folder with get_template_part for the header, footer, pagination, etc.

    Indentation and spacing in functions.php is inconsistent

    A few things jump out from a quick read:

    Line 19, 21: if statement is indented but there's no enclosing reason for it to be, same thing with all functions declared below.

    Line 50: 'function' is indented 3 instead of 4 spaces

    Line 51: blank line before body of function, most other functions no, a couple have the same blank line

    Line 54: statements inside if(!is_admin() block not indented

    I'd be happy to fix this and submit a pull request if this is of interest.

    Me, personally, I find mis-indented code extremely difficult to follow and am therefore extremely anal about getting it all consistent even if I may disagree with the specific style used by the main maintainer of the code.

    As long as it's consistent, I can read it.

    add_theme_support for html5

    this is html5 theme, maybe add:

    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

    Custom Post Types

    Maybe this is me, but I tried changing all of the Custom Post type info in the functions.php file to create a new area for Job Postings.

    Here's the code.

    function create_post_type_html5()
    {
    register_taxonomy_for_object_type('category', 'custom-jobs'); // Register Taxonomies for Category
    register_taxonomy_for_object_type('post_tag', 'custom-jobs');
    register_post_type('custom-jobs', // Register Custom Post Type
    array(
    'labels' => array(
    'name' => __('Impact Careers', 'html5blank'), // Rename these to suit
    'singular_name' => __('HTML5 Blank Custom Post', 'html5blank'),
    'add_new' => __('Add New', 'html5blank'),
    'add_new_item' => __('Add New Impact Careers Job Posting', 'html5blank'),
    'edit' => __('Edit', 'html5blank'),
    'edit_item' => __('Edit Impact Careers Job Posting', 'html5blank'),
    'new_item' => __('New HTML5 Blank Custom Post', 'html5blank'),
    'view' => __('View HTML5 Blank Custom Post', 'html5blank'),
    'view_item' => __('View Job Posting', 'html5blank'),
    'search_items' => __('Search Job Postings', 'html5blank'),
    'not_found' => __('No Job Postings found', 'html5blank'),
    'not_found_in_trash' => __('No Job Postings found in Trash', 'html5blank')
    ),
    'public' => true,
    'hierarchical' => true, // Allows your posts to behave like Hierarchy Pages
    'has_archive' => true,
    'supports' => array(
    'title',
    'editor',
    'excerpt',
    'thumbnail'
    ), // Go to Dashboard Custom HTML5 Blank post for supports
    'can_export' => true, // Allows export in Tools > Export
    'taxonomies' => array(
    'post_tag',
    'category'
    ) // Add Category and Post Tags support
    ));
    }

    Everything changes in the Dashboard to respond to this, but when I try to visit the post after publishing it just goes to the 404 page. Not sure why here? Any help would be greatly appreciated!

    Calling the load_theme_textdomain() function.

    The load_theme_textdomain() is called directly from functions.php.
    But in the WP API docs I read this:

    The load_theme_textdomain() function should generally be called from within the after_setup_theme action hook.
    Ref: http://codex.wordpress.org/Function_Reference/load_theme_textdomain
    Add: http://codex.wordpress.org/Plugin_API/Action_Reference/after_setup_theme

    EDIT: Just checked and in WP 3.8 all 3 inluded themes call the load_theme_textdomain() function from the after_setup_theme action hook.(I realize that the word "generally" is used in the docs.)

    Are there edge cases where translation wouldn't work properly when not called from the after_setup_theme action hook?

    Unable to add a class to the <ul> (Wrapped item) in the nav

    Hi, great theme! I want to add a class to the menu's ul nav. Is this not possible?

    This doesn't work (only ul will display), had to delete some tags but you get my drift :

    // DigiAdress navigation
    function DigiAdress_nav()
    {
    wp_nav_menu(
    array(

    <!> 'items_wrap' => ul class='nav pull-right'>%3$s ,

        )
    );
    

    Is there a solution to add this class?

    Can not translate into Vietnamese

    Hi,
    I use Poedit to translate HTML5Blank into Vietnamese but my Poedit reports there is an error for missing path.
    I am newbie on Wordpress.
    thanks

    Lag from the CDN Cloudflare

    I don't know if it's just me but since a couple of days, the loading seems to lag because it get stuck at trying to load the modernizr and conditionizr from the CDN of Cloudflare. When I remove those script from the function.php, it's much faster...

    Any clue on why this CDN is laggy ? Maybe trying to find a faster CDN or adding it to the core will help.

    Errors in .pot file

    08/18/14 13:42:54: C:\Users\user\AppData\Local\Temp\poeC504.tmp\0ref.pot:195: duplicate message definition...
    08/18/14 13:42:54: C:\Users\user\AppData\Local\Temp\poeC504.tmp\0ref.pot:172: ...this is the location of the first definition
    08/18/14 13:42:54: C:\Program Files (x86)\Poedit\GettextTools\bin\msgmerge.exe: found 1 fatal error
    

    Break out reset

    Hey Tood

    I'm currently working on breaking out the reset from style.css into it's own stylesheet as well as a couple of outher CSS changes.

    Before I make the pull request, what are your thoughts on breaking out the CSS reset into it's own separate file which is called prior to style.css?

    Javascript on footer to fasten up page load

    I suggest to place all JavaScript on footer rather than on header to speed up page load as suggested by YSlow and Google on performance issue.

    Modernizr and Conditionzr could remain on header but Jquery and Scripts should be on footer to slightly speed up page load.

    Or anyway we can do it manually? Please advice.

    get_avatar for comments gets a notice

    In functions.php line 314 we have
    <?php if ($args['avatar_size'] != 0) echo get_avatar( $comment, $args['180'] ); ?>
    This kept giving me a Undefined offset: 180 php notice.

    Fixed the notice by just entering the the size into a string.
    <?php if ($args['avatar_size'] != 0) echo get_avatar( $comment, '180' ); ?>

    Why isn't this livereloading?

    I've tried with livereload and browsersync, looking at the page through my localhost using MAMP pro within a wordpress install. The theme is loaded properly, everything is compiling correctly. When I manually refresh I get the result I'm expecting but it doesn't automatically inject css/js changes.

    Pull Requests

    Seems like there are some outstanding pull requests that can be merged. I can start closing out some issues on a new branch this week. What do you think?

    Be more careful with externally hosted jQuery.

    https://github.com/toddmotto/html5blank/blob/50f29cba667762d896bdaf5e4b8bf141b79a6aa3/functions.php#L96

    Three issues:

    1. Google's hosted jQuery isn't launched in noConflict mode, as WP core's is.
    2. The version you're linking to doesn't match with the version you're stating in wp_register_script()
    3. As newer versions of jQuery ship with WordPress, you're locking your users into an old version, which will break things.

    Please stop this.

    If users really want to use Google-hosted libraries, kindly direct them to use this plugin instead:

    http://wordpress.org/plugins/use-google-libraries/

    Customise Options

    Loving the theme, very well thought out and saves a lot of time.

    However, it would be nice to have more customize options, in particular, the options to set the header text / tagline, on / off and maybe set your logo through a custom function rather than hard coding it.

    An example on how you might do this can be found here:

    http://kwight.ca/2012/12/02/adding-a-logo-uploader-to-your-wordpress-site-with-the-theme-customizer/

    Thanks again and keep up the good work!

    Regards,
    Codex

    footer CSS issue

    somehow the footer got to the left navigation top section, and blocked some texts
    screen shot 2014-03-10 at 11 33 36 am

    Search Redirecting to Homepage

    I have the default search widget added to the sidebar on the blog page. When I try and use the search functionality, it just redirects to the homepage and doesn't perform any type of search.

    Anyone have any experience with this in why it may be happening?

    http://developer.creativ3group.com/creativ33/blog

    1. I have a search.php file in the Theme
    2. My permalink structure is /blog/%postname%

    Any help here would be GREATLY appreciated. I also be happy to provide FTP/WP access if needed if someone wants to look under the hood as I have a few custom functions added.

    Schema.org

    Any plans for adding Schema.org microdata support for SEO benefits?

    loop.php – postdetails: date and time format

    Hi there,

    having some "trouble" with these date/time outputs... ;)

    <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
    
    1. User-Settings
      They won't use the users date/time setting from the backend... 12h/24h this isn't good for easy localisation.
    2. Output
      And it produce this output in the german version: Juli 9, 2012 2:09 am
      "am" means (in german) something like "at" which is completly wrong behind the data ;)
    3. Different date/time format output
      The date/time format for comments (in functions.php) is different to the loop.php, guess it would be better, if all these outputs looks similar...

    What do you think?
    And sorry for my english ✌️

    add_slug_to_body_class() on main posts page

    Hello,

    i'm using HTML5 Blank for a while now, i'm very happy with it :)

    However, i have a small question, i dont understand why i dont have all the slugs on my main post page (in the admin, Settings > Reading > Posts page), when i select the page "News". It looks the add_slug_to_body_class() function doesn't work in this case.. i only have "logged-in" class on the body :(

    Show Full Recent Posts on Homepage

    Hi,
    I am new to creating themes in Wordpress. I used your template to get started. However, I am having trouble figuring out how to display the full posts on the homepage rather than excerpts. The settings I chose under Settings > Reading > For each article in a feed, show > "Full text" do not seem to be applied to this theme.
    How can I accomplish this?

    -Daniel

    IE8 Compatibility

    Hey there,

    I am having a little trouble with getting my site to show properly in IE8. In IE, I go to the Emulation section of the Developer Tools and change the Document to IE8, but it is showing mobile view. I can't seem to figure out how to get this to show correctly. When I did the same process for the html5blank.com site, it also shows mobile view in IE8.

    I know IE8 compatibility is probably not a high priority, I was just hoping there might be an easy solution for this.

    Thank you,

    Erin

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. 📊📈🎉

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google ❤️ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.