Kim Maida | Blog http://blog.kim-maida.com Resources and Downloads for the discerning Web Designer Sat, 25 Jan 2014 17:51:14 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.19 reStart-angular, AngularJS http://blog.kim-maida.com/web-development/angularjs/restart-angular-angularjs http://blog.kim-maida.com/web-development/angularjs/restart-angular-angularjs#comments Sat, 25 Jan 2014 17:51:14 +0000 http://blog.kim-maida.com/?p=1051 AngularJS. This boilerplate serves as a framework for building a single-page JavaScript application, complete with CSS3 and other fully responsive features.]]> Another spiritual successor to the KM Front-end Kit, this time in AngularJS. This boilerplate serves as a framework for building a single-page JavaScript application, complete with CSS3 and other fully responsive features.

This project is available on GitHub at reStart-angular where it can be downloaded and forked freely. The project issues and updates will be maintained via GitHub.

]]>
http://blog.kim-maida.com/web-development/angularjs/restart-angular-angularjs/feed 0
reStart Boilerplate, a Front-End Kit http://blog.kim-maida.com/web-development/front-end/restart-boilerplate-a-front-end-kit http://blog.kim-maida.com/web-development/front-end/restart-boilerplate-a-front-end-kit#comments Sun, 21 Jul 2013 21:56:01 +0000 http://blog.kim-maida.com/?p=1033 KM front-end kit is reStart Boilerplate, a responsive starter site. The framework has been refined since KMFEK, now utilizing a Mobile First paradigm, off-canvas navigation leveraged with CSS3, and responsive JavaScript.]]> README on GitHub | Demo

This project is available on GitHub at reStart-boilerplate-php where it can be downloaded and forked freely. The project features, details, and updates will remain available there as well.

]]>
http://blog.kim-maida.com/web-development/front-end/restart-boilerplate-a-front-end-kit/feed 0
Twitter API 1.1 for Websites http://blog.kim-maida.com/web-development/php/twitter-api-1-1-for-websites http://blog.kim-maida.com/web-development/php/twitter-api-1-1-for-websites#comments Sun, 21 Jul 2013 02:52:45 +0000 http://blog.kim-maida.com/?p=980 README on GitHub | Demo

It used to be commonplace to see clever, creative treatments of tweets displayed on websites, particularly portfolios. This trend has more or less collapsed recently, but not because Twitter is any less of a behemoth in social networking. With the deprecation of version 1 of their API, Twitter effectively broke every implementation of good old blogger.js across the web. The landscape of embedding tweets in websites is altered dramatically.

Version 1.1 considers any custom implementation of a tweet or timeline an application. That means no more tapping into a small JavaScript file to quickly and easily output some tweet text HTML and a timestamp… at least, not if custom styling is desired. Twitter still offers several options for embedding timelines and statuses in the form of widgets / Embedded Tweets. However, if styling is desired, beware. Twitter’s Embedded Tweets API documentation even warns:

Assume the embed HTML format will change. The HTML markup for the embed may change over time, so don’t assume classnames or the DOM layout will stay the same. If you need to style the embedded HTML, wrap it in a parent element and style the parent.”

And then there’s authentication. Unless one of Twitter’s prefab widgets is being used, anyone desiring to use the API to GET-request tweets will need to have OAuth set up on their website.

Initially, this was enough to put many people off. Nicely styled Twitter feeds were replaced by boring, default widgets or disappeared off websites entirely (including this blog!).

All of that being said, API 1.1 is powerful and cool, even if the goal isn’t to write the next TweetDeck or Twitterific.

The main issue is the barrier to entry.

There are several hurdles that need to be overcome in order to take advantage of the REST API v1.1 and put custom Twitter timelines on websites.

The first hurdle is the need for a server-side authentication library. The second hurdle is the need to parse a lot of JSON and write all the formatting of timestamps and plaintext tweets manually. The third is writing the logic required to create a timeline that functions in a desirable, Twitter-like, interactive way. Finally, the fourth is the fact that Twitter has far more stringent rules about displaying their content if the API is being used.

Clearing the hurdles is gratifying but a decent amount of work (and simultaneously feeling like the work had been done previously). The curve can be particularly steep for those who don’t dabble in the server-side. Previously, it was entirely possible to put timelines on a website using only the client-side. Not even a working knowledge of JavaScript was required; one had only to call blogger.js from Twitter and take care of the rest with HTML and CSS.

Lowering the barrier to entry:

I put together a starter kit that takes care of all four hurdles, or at least lowers them to a manageable height. Its function is to place a fully customizable, fully styleable Twitter user timeline on a website (providing PHP is available).

Available on GitHub.

(Or direct-download the master branch zip file at the top of this post.)

See the GitHub twitter-timeline-php repository to view the README, submit issues, or fork (I’d love to see this translated into other server-side languages).

]]>
http://blog.kim-maida.com/web-development/php/twitter-api-1-1-for-websites/feed 0
jQuery Methods & Plugins http://blog.kim-maida.com/web-development/jquery/jquery-methods-and-plugins http://blog.kim-maida.com/web-development/jquery/jquery-methods-and-plugins#comments Sun, 14 Jul 2013 20:49:02 +0000 http://blog.kim-maida.com/?p=961 There are countless tutorials on the web about how to write jQuery plugins. This is not a tutorial, it’s just a couple of very simple templates for creating your own jQuery methods and plugins (with callback functions) from scratch. These examples are chainable.

$.fn.methodName = function(){
    // 'this' refers to the matched elements (by selector)
    return this.each(function(index, element){
        var $this = $(this);	// DOM element object
		// do something with the objects	
    });
}

// Calling the method
$('.myElement').methodName();

A working example of method creation (and a simple check to determine if a method exists) is available on CodePen.

;(function($,window,document,undefined) {
    $.fn.extend({
       myPlugin: function(options){
            var defaults = {
            		// define default options and their values
                	option1		: 'Hi there!',
                	option2		: null,
                	complete	: function() {}
				},
            	options = $.extend(defaults, options),
				o = options;	// can call options using "o" instead of "options";	

            return this.each(function(){
            	var $this = $(this);
            	
            	// Perform your desired functionality
            	                         
				// Callback
				if ($.isFunction(o.complete)) {	// check that the callback is a function
			        o.complete.call(this); // apply scope to the callback function
			    }
            });
        }
    });    
}) (jQuery,window,document);

// Call the plugin	
$(function() {
	$('.myElement').myPlugin({
		option1: 'Hello world!',
		option2: 'blue',
		complete: function() { console.log('This is a callback function!'); }
	});
});

A working example of this plugin template is available on CodePen. Code is also available in a GitHub Gist.

]]>
http://blog.kim-maida.com/web-development/jquery/jquery-methods-and-plugins/feed 0
Unix Timestamp to JS Local http://blog.kim-maida.com/web-development/unix-timestamp-to-js-local http://blog.kim-maida.com/web-development/unix-timestamp-to-js-local#comments Mon, 18 Feb 2013 12:54:27 +0000 http://blog.kim-maida.com/?p=936 Dates are one of those finicky programming items that can lead to frustration. Here's a handy JavaScript function to convert a Unix timestamp to a user's local standard time.

]]>
Dates are one of those finicky programming items that can occasionally lead to frustration. Here’s a handy JavaScript function to convert a Unix timestamp to a user’s local standard time.

function convertTimestamp(timestamp) {
	var d = new Date(timestamp * 1000),	// Convert to milliseconds
		yyyy = d.getFullYear(),
		mm = ('0' + (d.getMonth() + 1)).slice(-2),	// Months are zero based. Add leading 0.
		dd = ('0' + d.getDate()).slice(-2),			// Add leading 0.
		hh = d.getHours(),
		h = hh,
		min = ('0' + d.getMinutes()).slice(-2),		// Add leading 0.
		ampm = 'AM',
		time;
			
	if (hh > 12) {
		h = hh - 12;
		ampm = 'PM';
	} else if (hh == 0) {
		h = 12;
	}
	
	// ie: 2013-02-18, 8:35 AM	
	time = yyyy + '-' + mm + '-' + dd + ', ' + h + ':' + min + ' ' + ampm;
		
	return time;
}

You can also see a working demo of this code on CodePen.

]]>
http://blog.kim-maida.com/web-development/unix-timestamp-to-js-local/feed 0
KM Front-End Kit with PHP http://blog.kim-maida.com/web-development/front-end/km-front-end-kit-v1-3-with-php http://blog.kim-maida.com/web-development/front-end/km-front-end-kit-v1-3-with-php#comments Sun, 17 Feb 2013 15:45:42 +0000 http://blog.kim-maida.com/?p=791 The kit includes the following files. Modify or delete the files however you see fit.

  • /images
  • /includes
    • header.php – Modernizr.js, conditional body classes for styling versions of IE, page title variable
    • footer.php – jQuery, JS script, Google Analytics
  • /js
    • script.js – jQuery
    • libs/modernizr.min.js – Modernizr
  • /styles
    • styles.css – CSS reset and some basic styles, media query, print styles
  • index.php – Page title and active page variables, includes
  • subpage.php – Page title and active page variables, includes
  • ReadMe (pdf)

This kit will be updated periodically. Please keep an eye out for updates!

Changelog

  • Feb. 17, 2013 – updated to v1.3.5: updated outdated readme (sorry!), added Modernizr.js, removed HTML5 shim, removed JS class, simplified media queries.
  • Feb. 11, 2013 – updated to v1.3.4: removed mobile detection PHP class (should use Modernizr.js instead), updated jQuery to version 1.9.1, improved/bugfixed conditional comments.
  • Apr. 20, 2012 – updated to v1.3.3: edited the viewport meta to permit user scaling, added caution regarding the use of mobile detection PHP class, deleted comprehensive media queries examples, edited existing media queries to use a mobile-first approach
  • Feb. 9, 2012 – updated to v.1.3.2: added mobile detection PHP class, tweaked media queries for more consistent rendering
  • Feb. 7, 2012 – updated to v.1.3.1: removed nav.php and integrated into header, integrated a few select practical media queries and print styles into main stylesheet to reduce HTTP requests, updated jQuery version to 1.7.x, minor code clean-up

If PHP isn’t your thing, the plain HTML version of the kit can be downloaded at KM Front-End Kit v1.3.

]]>
http://blog.kim-maida.com/web-development/front-end/km-front-end-kit-v1-3-with-php/feed 0
WP Custom Sharing Links http://blog.kim-maida.com/web-development/wordpress/wp-custom-sharing-links http://blog.kim-maida.com/web-development/wordpress/wp-custom-sharing-links#comments Thu, 24 Jan 2013 21:34:24 +0000 http://blog.kim-maida.com/?p=861 Sometimes you may want to design and build a theme that doesn't use the same boring, standard social sharing buttons that spit iframes out all over your pages. There is a huge selection of social sharing plugins available for WordPress, but I've often felt the vast majority of them look and feel too much like... well, plugins. They display like what they are: disparate chunks of third party code that have been Krazy-glued onto your elegant theme.

If you want something of your own design and are willing to forgo the ability to display a count, you can try building something a little more custom. And if you've got a passing knowledge of template tags and Javascript, this is a piece of cake to implement! It also allows you to avoid doing things like wrapping a jQuery plugin (ie., Sharrre) in a WordPress plugin (and then possibly having to wrestle with php.ini files and server settings as well).

]]>
Sometimes you may want to design and build a theme that doesn’t use the same boring, standard social sharing buttons that spit iframes out all over your pages. There is a huge selection of social sharing plugins available for WordPress, but I’ve often felt the vast majority of them look and feel too much like… well, plugins. They display like what they are: disparate chunks of third party code that have been Krazy-glued onto your elegant theme.

If you want your own design and are willing to forgo the ability to display a count, you can try building something a little more custom. And if you’ve got a passing knowledge of template tags and Javascript, this is a piece of cake to implement! It also allows you to avoid doing things like wrapping a jQuery plugin (ie., Sharrre) in a WordPress plugin (and then possibly having to wrestle with php.ini files and server settings as well).

This tutorial is going to cover adding buttons to share on Twitter, Facebook, Google+, and Pinterest. Please keep in mind that this is not a technique for your average WordPress user: this is a developer technique for theme-builders who want to create themes with sharing features built directly in. If you’re just looking to add standard sharing buttons to your blog posts, there are plenty of quality plugins for exactly that purpose.

Still in? Then let’s begin! Open up your WordPress theme directory.

Add the HTML to display share links

Find the file where you want to display the sharing links. This would probably be single.php (the single post view) and/or in the loop. Below is some code showing the share links. You can put whatever code you want inside and around the anchor tags. Just make sure the attributes are in place.

<div class="socialShare">

	<a class="twitter shareLink" title="Tweet" 
		href="http://twitter.com/intent/tweet?url=<?php urlencode(the_permalink()); ?>" 
		data-tweet="<?php the_title(); ?>"
		data-hashtags="foo,bar"
		data-via="twitterUsername"
	>
		Tweet
	</a>
	
	<a class="pinterest shareLink" title="Pin It" 
		href="http://pinterest.com/pin/create/button/?url=<?php urlencode(the_permalink()); ?>"
		data-media="<?php echo $image_url; ?>"
		data-description="<?php the_title(); ?> - <?php the_permalink(); ?>"
	>
		Pin It
	</a>
	
	<a class="facebook shareLink" title="Facebook"
		href="http://facebook.com/dialog/feed?link=<?php urlencode(the_permalink()); ?>" 
		data-name="<?php the_title(); ?>"
		data-picture="<?php echo $image_url; ?>"
		data-caption="I just read <?php the_title(); ?> at <?php the_permalink(); ?>"
		data-redir="<?php bloginfo('template_url'); ?>/closeDialog.html"
	>
		Facebook
	</a>
	
	<a class="googleplus shareLink" title="Google+" 
		href="https://plus.google.com/share?url=<?php urlencode(the_permalink()); ?>"
	>
		Google+
	</a>
	
</div>

Now we’re getting down to it. The URLs that were provided by the share links’ href attributes are the base share dialog activation with the shared link encoded with PHP. The details of the content that you’re sharing is in the data- attributes, and will be encoded and appended to the URL via Javascript. The reason the share URL is encoded with PHP and not Javascript is so that the share will still work even if Javascript fails or is disabled.

Data attributes are always prefixed “data-”, but can then be called anything you’d like. I’ve named them to match the URL parameters they are supplying.

The URL parameters that each social share link accepts are as follows:

  • Twitter: ?url=[URL], &text=[tweet text], &hashtags=[comma-separated list of hash tags, no # symbols], &via=[Twitter username, no @ symbol]
  • Pinterest: ?url=[URL], &media=[absolute path to image file], &description=[description text]
  • Facebook: ?link=[URL], &display=[popup], &app_id=[Facebook app ID; see below], &name=[title], &picture=[absolute path to image for thumbnail], &caption=[description text], &redirect_uri=[absolute path to page to go to upon share completion; see below]
  • Google+: ?url=[URL], &hl=[language code] (As of this writing, these are the only parameters that the Google+ share link can be passed. It does the rest on its own.)

We will use PHP’s template tags to populate these data- attributes. Then we can access them with jQuery using the .data() method.

Note: I used my custom code for a featured post image as the data-media and data-picture attributes. You may not have this tag in your theme, or it may be called something different! If you leave the media (Pinterest) or picture (Facebook) parameters empty, the networks will do their best to gather the images on the page automatically.

Close dialog redirect

The Facebook parameter redirect_uri should be a path to an HTML file that contains nothing but a short script to close a window. Facebook uses this to redirect the user to another page when finished sharing. The reason this particular variable is defined in the HTML and not the Javascript file is because I want to be able to use the WP template URL tag. If it’s in the Javascript file, it needs to be a hard-coded absolute path: bad news if you decide to change servers or rename your theme.

Create a new HTML file in your theme root and call it closeDialog.html. Paste the following in and save:

<!DOCTYPE html>
<html>
	<head>
		<title>Close</title>
		<script>window.close();</script>
	</head>
	<body>
	</body>
</html>

As you can see, all this does is close itself. When passed to the Facebook dialog, it closes the popup window when the user has finished sharing. That way you don’t get redirected to your Facebook wall inside the popup window. You don’t have to use this if you’d prefer not to autoclose the window, but it’s become expected behavior, so the user will likely thank you for it.

Include jQuery

To make this actually do anything, we’re going to need jQuery. If jQuery isn’t already enqueued in your theme, there are a few ways to go about it. I won’t go into detail in this post, but there are resources out there as well as a nice Codex article on the wp_enqueue_script function.

Once you have jQuery enqueued, a Javascript file has to be added (if one doesn’t already exist in your theme). I like to create mine as follows: /wp-content/themes/[theme]/js/script.js. Once the file has been created, it needs to be loaded. This can be done by adding the following script tag to the theme’s footer.php file:

<script src="<?php bloginfo('template_url'); ?>/js/script.js"></script>

Note: You may wish to cache-bust this file to ensure that the users are served a fresh copy whenever it has been updated. For more information about cache-busting in WordPress, see this article on WordPress CSS and JS Caching. The cache-busted version of the above script include is as follows:

<?php $cachebustFile = '/js/script.js'; ?>
<script src="<?php echo get_template_directory_uri(); echo $cachebustFile . '?' . filemtime(get_template_directory() . $cachebustFile); ?>"></script>

Write the Javascript

Now that we have the HTML for our buttons and the data to share, it’s time to write the Javascript. Open the script.js file you created.

If you don’t already have custom jQuery scripts on your page and you’re starting this from scratch, you’ll need to use jQuery.noConflict() to relinquish jQuery’s control of the $ variable. If you don’t do this, your scripts will break in WordPress. I like to use $j as a replacement.

var $j = jQuery.noConflict();

$j(function(){
	
	$j('.twitter').on('click', function(e) {
		var $this = $j(this),
			tweet = encodeURI($this.data('tweet')),
			hashtags = $this.data('hashtags'),
			via = $this.data('via');
			
		e.preventDefault();
			
		window.open(
			this.href + '&text=' + tweet + '&hashtags=' + hashtags + '&via=' + via,
			'tweetDialog',
			'height=450, width=550, toolbar=0, status=0'
		);
	});
	
	$j('.pinterest').on('click', function(e) {
		var $this = $j(this),
			media = encodeURI($this.data('media')),
			description = encodeURI($this.data('description'));
			
		e.preventDefault();
		
		window.open(
			this.href + '&media=' + media + '&description=' + description,
			'pinterestDialog',
			'height=400, width=700, toolbar=0, status=0, scrollbars=1'
		);
	});
	
	$j('.facebook').on('click', function(e) {
		var $this = $j(this),
			name = encodeURI($this.data('name')),
			picture = encodeURI($this.data('picture')),
			caption = encodeURI($this.data('caption')),
			redir = encodeURI($this.data('redir')),
			appID = '[ENTER FACEBOOK APP ID HERE - SEE NEXT SECTION]';
			
        e.preventDefault();

        window.open(
            this.href + '&display=popup&app_id=' + appID + '&name=' + name + '&picture=' + picture + '&caption=' + caption + '&redirect_uri=' + redir,
            'facebookDialog',
            'height=300, width=550, toolbar=0, status=0'
        );

	});
	
	$j('.googleplus').on('click', function(e) {	
		e.preventDefault();
		
		window.open(
			this.href, 
			'gplusDialog',
			'height=600, width=600, toolbar=0, status=0'
		);
	});
	
});

This is straightforward jQuery. We’re attaching a click handler to each of our social sharing links and preventing default so that the link doesn’t take the user off the page to the partial URL provided in the HTML. Instead, we’re opening a new popup window (the share dialog). The dialog window will go to the base href link with the contents of the data- attributes appended to it by using the jQuery .data() method. We will encodeURI most of the data in these variables. If they contain links or other special characters and are not encoded, they will not work in the URL.

Now the social network has been given all the information it needs to populate the share dialog. We then give the new window some parameters, like height, width, hide toolbars, hide status bar, show scrollbars if needed.

Get a Facebook App ID for your share dialog

To create a Facebook app ID, you need to enable developer privileges for your personal Facebook account. This is free to do. The only caveat is that you cannot make up a dummy account to be your development account; that is a breach of Facebook’s Terms of Service, and they won’t permit it.

Once you have a developer account, go to the apps dashboard. Click the +Create New App button. Give your app a name (leave the other fields blank) and click Continue. Fill in some information about your app, including Display Name (title of your site), Contact Email, and App Domains. The App Domain should be the domain of your site.

Click the pane titled Website with Facebook Login and enter your site’s URL. Save your changes.

You can also set your app’s images by clicking on the little thumbnail icon at the top next to the app name. It is recommended to upload 16x16px and 75x75px thumbnails representing your site. The 16x16px icon will show up in your Facebook share dialog box.

Below your app’s name, an App ID is listed. Copy this numeric value. Open your script.js file and paste the app ID into the appID variable in the Facebook on(‘click’) handler. It may take a few minutes for Facebook’s servers to update, so be patient if your Facebook dialog throws an error for a little while.

Final Words

Now when the user clicks any of the share links, the appropriate dialog will pop up. They can fill in any additional information and submit. Upon submission, some networks provide confirmation and the option to view the share. The user can then close the dialog window (if it doesn’t autoclose, a la the Facebook autoclose we set up) and return to browsing your site.

At this point, you can see why we’ve done this with Javascript and data attributes instead of embedding the full URLs with all data directly into the href on the page and leaving it at that: the user has come to expect that these social networks open in a dialog window that will then go away. They do not expect to be taken off your site and to the sharing site instead, which is what would happen if we let the link have default behavior.

Some people like to add a target=”_blank” attribute to the HTML links in case the Javascript fails and the dialog doesn’t open in a separate window. I prefer not to, personally, because I dislike when sites open links in new tabs: it disables my use of the back button. I don’t like trying to hit “back”, discovering it doesn’t work, and then having to close a tab—a minor user experience enhancement, in my opinion.

Overall, this is just one way of approaching custom social sharing links. There are other ways to accomplish the same thing, but this method is valuable because it allows you to use several instances of share links on the same page, for example, on each post in an archive, as well as single posts.

]]>
http://blog.kim-maida.com/web-development/wordpress/wp-custom-sharing-links/feed 5
Nav link separator in WordPress http://blog.kim-maida.com/web-development/wordpress/nav-link-separator-in-wordpress http://blog.kim-maida.com/web-development/wordpress/nav-link-separator-in-wordpress#comments Sat, 19 Jan 2013 15:47:18 +0000 http://blog.kim-maida.com/?p=849 posts_nav_link tag allows passing a parameter for a separator and performs logic to conditionally display the separator when both prev/next links are present. However, if you want to use separate tags for previous and next post links for more custom control over the style and markup of your links, you lose this convenient conditional separator feature. Here's how to recreate it.]]> WordPress’s posts_nav_link tag accepts a parameter for a separator and performs logic to conditionally display the separator when both prev/next links are present. However, if you want to use separate tags for previous and next post links for more custom control over the style and markup of your links, you lose this convenient conditional separator feature.

There is, of course, a solution to this. Conditional separators (and much more) can be achieved with a handy WP template function called get_adjacent_post. This templating function accepts three parameters: a boolean for whether to fetch posts only in the same category as the current one, a string of category IDs to exclude (if any), and a boolean for whether to retrieve the previous post. If this third parameter is set to true, the previous post is returned. If set to false, the next post is returned. If no post exists in the specified adjacent position, an empty string is returned.

Therefore, if you wished to (for example) have a pipe “|” separating your prev/next links but only when both links are present, your pagination links might resemble the following:

This function is more powerful and ubiquitous than demonstrated in this snippet alone: you can change the code for the links themselves if you wish. For more information on how to gain fine-grained control over those frustratingly stubborn WordPress nav links, Conditional and custom next/previous post links in WordPress is a great, more detailed article to get you started.

]]>
http://blog.kim-maida.com/web-development/wordpress/nav-link-separator-in-wordpress/feed 0
WordPress HTML5 Blank Theme http://blog.kim-maida.com/web-development/wordpress/wordpress-html5-theme http://blog.kim-maida.com/web-development/wordpress/wordpress-html5-theme#comments Sun, 09 Dec 2012 15:12:48 +0000 http://blog.kim-maida.com/?p=390 This theme utilizes advanced CSS selectors as well as select classes as styling selectors. You should, of course, add whatever HTML and CSS you like to customize the theme to your needs.

Features

The theme natively contains support for the following features and improvements:

  • HTML5 with shim for unsupported browsers
  • Conditional classes for IE7/8
  • Threaded comments with custom callback
  • Featured Images / Post Thumbnails
  • Editor styles
  • Dynamic sidebar
  • Menus
  • Widgets
  • jQuery
  • Smart caching of style.css and script.js
  • Responsive CSS design for mobile / smaller browser viewports
  • Uses get_template_part for includes to improve ease of modification

Demo / Preview

You may preview a demo of this theme at Demo KM WordPress.

Custom Post Types & Taxonomies

If you plan on adding custom post types, custom taxonomies, and/or custom meta boxes and custom fields to your theme, the KM Custom Post Type Template plugin and theme files are intended to integrate well with the bare-bones KM-H5 theme. (You will need to remove the featured images functions from the plugin, however, as these functions are duplicated in the theme’s functions.php file.) Keep in mind that these are learning files: their intent is to teach.

If you’d prefer an efficiency-based method to get to the end results, try Custom Post Types, revisited for another way of adding custom CMS functionality to your WordPress installation. This technique is geared toward more real-world production, but leaves out much of the teaching.

Regular Updates

Keep an eye on the blog for improvements! Updates and fixes for the theme will be added when appropriate as new versions of WordPress are released, introducing new features and functionality.

Changelog

  • Dec. 9, 2012 – Updated functions.php to call latest jQuery from Media Temple’s CDN. Minor CSS changes to improve responsive baseline.
  • Feb. 18, 2012 – Updated functions.php to call jQuery from Google’s CDN and to remove the WP version number from the head for better security. Minor CSS change to accommodate next/prev links for posts with excessively long titles.
  • Feb. 17, 2012 – Added pagination links template part to the loop (Prev/Next with page numbers). Please note that depending on your installation’s permalink / pagination settings, you may have to edit the format. See the documentation: paginate_links.
  • Jan. 7, 2012 – Added international translation support.
  • Jan. 5, 2012 – Fixed a misplaced end tag in the comments template, broke commonly-repeated elements into template parts (includes), various other small improvements.
  • Jan. 4, 2012 – Numerous fixes for styling, structure, and classes. Removed post format support (determined unnecessary and rarely used). Added CSS3 media query for responsive design. Did some major clean-up and added cache-busting for js and main stylesheet without the use of functions.php.
  • Jan. 3, 2012 – v1.3 released with support for untitled posts, post formats, enhanced styling, and other minor fixes
  • Dec. 31, 2011 – Added intelligent caching of stylesheet, removed version from footer for better security, fixed author page query, added demo
  • Dec. 15, 2011 – Fixed editor styles
  • Dec. 6, 2011 – Added author support

Questions? Feature requests?

Leave a comment!

]]>
http://blog.kim-maida.com/web-development/wordpress/wordpress-html5-theme/feed 3
HTML5 CSS Reset Stylesheet http://blog.kim-maida.com/web-development/front-end/html5-css-reset-stylesheet http://blog.kim-maida.com/web-development/front-end/html5-css-reset-stylesheet#comments Mon, 19 Nov 2012 18:12:17 +0000 http://blog.kim-maida.com/?p=653 My newly-updated reset stylesheet with a few omissions, additions, and edits. Please feel free to use and edit this CSS reset as you see fit.

/*--------------------
      CSS RESET
--------------------*/

/*
HTML5 Reset
Version 1.2
Author: Kim Maida | http://kim-maida.com
Updated: 12-9-2012
*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike, strong, tt, var, dl, dt,
dd, ol, ul, li, fieldset, form, input, textarea, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	margin: 0; padding: 0;
	border: 0; border-radius: 0; /* for iOS */
    font-weight: inherit; font-style: inherit; font-family: inherit;
	line-height: 1;
	text-decoration: none;
	vertical-align: baseline;
}

img, input, select { vertical-align: middle; }

ol, ul { list-style: none; }

a,
label,
input[type=button],
input[type=submit],
button { cursor: pointer; }

input, select, textarea { font-family: inherit; }
textarea { overflow: auto; } /* prevents scrollbar from showing up when unneeded in IE */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td { text-align: left; font-weight: normal; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

i, em { font-style: italic; }
b, strong { font-weight: bold; }

q:lang(en) { quotes: '&#8220;' '&#8221;' '&#8216;' '&#8217;'; }

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

del { text-decoration: line-through; }

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}
]]>
http://blog.kim-maida.com/web-development/front-end/html5-css-reset-stylesheet/feed 0