Loading...
March 28, 2013#
logo

I am no designer, but often times I can hack my way through things and make them work. Digging this logo.

March 28, 2013#

The Truth

I found this on Pearl Velo’s blog. It’s the truth.

From Surly
Beautifully written by Skip Bernet
If you think your bike looks good, it does.

If you like the way your bike rides, it’s an awesome bike.

You don’t need to spend a million dollars to have a great bike, but if you do spend a million dollars and know what you want you’ll probably also have a great bike.

Yes, you can tour on your bike – whatever it is.

Yes, you can race on your bike – whatever it is.

Yes, you can commute on your bike – whatever it is.

26” wheels or 29” or 650b or 700c or 24” or 20” or whatever – yes, that wheel size is rad and you’ll probably get where you’re going.

Disc brakes, cantis, v-brakes, and road calipers all do a great job of stopping a bike when they’re working and adjusted.

No paint job makes everyone happy.

Yes, you can put a rack on that. Get some p-clamps if there are no mounts.

Steel is a great material for making bike frames – so is aluminum, carbon fiber, and titanium.

You can have your saddle at whatever angle makes you happy.

Your handlebars can be lower than your saddle, even with your saddle, or higher than your saddle. Whichever way you like it is right.

Being shuttled up a downhill run does not make you a weak person, nor does choosing not to fly off of a 10 foot drop.

Bike frames made overseas can be super cool. Bike frames made in the USA can be super cool.

Hey, tattooed and pierced long shorts wearin flat brim hat red bull drinkin white Oakley sportin rad person on your full suspension big hit bike – nice work out
there.

Hey, little round glasses pocket protector collared shirt skid lid rear view mirror sandal wearing schwalbe marathon running pletscher two-leg kickstand tourist – good job.

Hey, shaved leg skinny as hell super duper tan line hear rate monitor checking power tap train in the basement all winter super loud lycra kit million dollar wheels racer – keep it up.

The more you ride your bike, the less your ass will hurt.

The following short answers are good answers, but not the only ones for the question asked – 29”, Brooks, lugged, disc brake, steel, Campagnolo, helmet, custom, Rohloff, NJS, carbon, 31.8, clipless, porteur.

No bike does everything perfectly. In fact, no bike does anything until someone gets on it to ride.

Sometimes, recumbent bikes are ok.

Your bikeshop is not trying to screw you. They’re trying to stay open.

Buying things off of the internet is great, except when it sucks.

Some people know more about bikes than you do. Other people know less.

Maybe the person you waved at while you were out riding didn’t see you wave at them.

It sucks to be harassed by assholes in cars while you’re on a bike. It also sucks to drive behind assholes on bikes.

Did you build that yourself? Awesome. Did you buy that? Cool.

Wheelies are the best trick ever invented. That’s just a fact.

Which is better, riding long miles, or hanging out under a bridge doing tricks? Yes.

Yes, you can break your collar bone riding a bike like that.

Stopping at stop signs is probably a good idea.

Driving with your bikes on top of your car to get to a dirt trail isn’t ideal, but for most people it’s necessary.

If your bike has couplers, or if you have a spendy bike case, or if you pay a shop to pack your bike, or if you have a folding bike, shipping a bike is still a pain
in the ass for everyone involved.

That dent in your frame is probably ok, but maybe it’s not. You should get it looked at.

Touch up paint always looks like shit. Often it looks worse than the scratch.

A pristine bike free of dirt, scratches, and wear marks makes me sort of sad.

A bike that’s been chained to the same tree for three years caked with rust and missing parts makes me sad too.

Bikes purchased at Wal-mart, Target, Costco, or K-mart are generally not the best bang for your buck.

Toe overlap is not the end of the world, unless you crash and die – then it is.

Sometimes parts break. Sometimes you crash. Sometimes it’s your fault.

Yes, you can buy a bike without riding it first. It would be nice to ride it first, but it’s not a deal breaker not to.

Ownership of a truing stand does not a wheel builder make.

32 spokes, 48 spokes, 24 spokes, three spokes? Sure.

Single speed bikes are rad. Bikes with derailleurs and cassettes are sexy. Belt drive internal gear bikes work great too.

Columbus, TruTemper, Reynolds, Ishiwata, or no brand? I’d ride it.

Tubeless tires are pretty cool. So are tubes.

The moral of RAGBRAI is that families and drunken boobs can have fun on the same route, just maybe at different times of day.

Riding by yourself kicks ass. You might also try riding with a group.

Really fast people are frustrating, but they make you faster. When you get faster, you might frustrate someone else.

Stopping can be as much fun as riding.

Lots of people worked their asses off to build whatever you’re riding on. You should thank them.

March 25, 2013#

Child Themes + Custom Styling + Custom JQuery

Child Themes

http://codex.wordpress.org/Child_Themes
What is a child theme anyway?
A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

With a basic understanding of PHP, WordPress Templates, and the WordPress Plugin API, you can make the child theme extend virtually every aspect of a parent theme, and again, without actually changing the parent theme files.

So what goes in a Child Theme?
A child theme resides in its own directory in wp-content/themes. The scheme below shows the location of a child theme along with its parent theme (Reverie) in a typical WordPress directory structure:

  • site_root (www) (sites)
    • wp-content
      • themes (directory where all themes are)
        • reverie-master (directory of our example parent theme, Reverie)
        • reverie-child (directory of our child theme; can be named anything)
          • style.css (required file in a child theme; must be named style.css)

This directory can contain as little as a style.css file, and as much as any full-fledged WordPress theme contains:

  1. style.css (required)
  2. functions.php (optional)
  3. Template files (optional)
  4. Other files (optional)

What goes in the style.css file?

/*
Theme Name:     My Reverie Child Theme
Theme URI:
Description:    My Child theme description
Author:         Hank Pantier
Author URI:
Template:       reverie-master
Version:        1.0
*/

But I don’t want to miss out on the base theme styling…

@import url("../reverie-master/style.css");

So the whole style.css file should look like…

/*
Theme Name:     My Reverie Child Theme
Theme URI:
Description:    My Child theme description
Author:         Hank Pantier
Author URI:
Template:       reverie-master
Version:        1.0
*/
 
@import url("../reverie-master/style.css");

What’s a Real World Child Theme Need?

I like to start my child themes with a few more files and folders.

  1. A CSS Folder – to keep all of my style sheet files in a nice orderly place
  2. A JS Folder – to keep all of my Javascript (JQuery) in a nice spot
  3. A functions.php file – so i can make all of this work.
  • site_root (www) (sites)
    • wp-content
      • themes (directory where all themes are)
        • reverie-master (directory of our example parent theme, Reverie)
        • reverie-child (directory of our child theme; can be named anything)
          • style.css (required file in a child theme; must be named style.css)
          • functions.php (so i can change the functionality of my child theme)
          • screenshot.png (no need for this not to be pretty, folks)
          • css
            • app.css
          • js
            • app.js

Getting it to work…

if (!is_admin()) add_action("wp_enqueue_scripts", "hank_jquery_enqueue", 11); 
function hank_jquery_enqueue() {    
	wp_deregister_script('jquery');    
	wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://code.jquery.com/jquery-1.9.1.min.js", false, null);    
	wp_enqueue_script('jquery');        
	wp_register_script( 'hank-js', get_stylesheet_directory_uri() . '/js/app.js', array( 'jquery' ), '', true );    
	wp_enqueue_script( 'hank-js' ); 
} 
 
function hank_css_style(){	 	// normalize stylesheet 	
	wp_register_style( 'hank-stylesheet', get_stylesheet_directory_uri() . '/css/app.css', array(), '' ); 	
	wp_enqueue_style( 'hank-stylesheet' ); 
}
add_action( 'wp_enqueue_scripts', 'hank_css_style' );

NOTE: get_stylesheet_directory_uri() vs get_template_directory_uri()

reference links

wp_deregister_script – http://codex.wordpress.org/Function_Reference/wp_deregister_script
wp_register_script – http://codex.wordpress.org/Function_Reference/wp_register_script
wp_enqueue_script – http://codex.wordpress.org/Function_Reference/wp_enqueue_script
wp_register_style – http://codex.wordpress.org/Function_Reference/wp_register_style
wp_enqueue_style – http://codex.wordpress.org/Function_Reference/wp_enqueue_style

March 22, 2013#

One of the greatest songs ever, a bunch of old Chevy trucks and the cast of Duck Dynasty…well done Darius.

March 18, 2013#

this man lives on his bike.

March 18, 2013#

Back to Basics…

CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML.

A style sheet is a file that describes how an HTML file should look. That’s it!

Ways to Use CSS

  • External style sheet
  • Internal style sheet
  • Inline style

Ways to Include External Style Sheets

<link href="mystyle.css" rel="stylesheet" type="text/css" />
/* import stylesheets and hide from ie/mac \*/
@import url("reset.css");
@import url("master.css");
@import url("enriched.css");
@import url("ie.css");
/* end import/hide */

basic syntax

selector { property: value }

Example:

body {
     background-color: red;
}

classes, id’s, divs and spans

descendant selectors:

div div p {}

child selector:

div > p {}

adjacent sibling selector:

p + p { font-size: smaller; } /* Selects all paragraphs that follow another paragraph */
#title + ul { margin-top: 0; } /* Selects an unordered list that directly follows the element with ID title */

universal selector:

ul * {padding:0px; margin:0px}

group selector

p, strong, h2 {font-weight:bold}

Example HTML Code

<!DOCTYPE html> 
 
<html>
 
	<head>
 
		<meta charset="UTF-8" />
		<meta name="author" content="" />
		<meta name="copyright" content="" />
		<meta name="robots" content="index, follow" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
 
		<title></title>
 
		<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
		<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen,projection" />
		<link rel="index" title="" href="" />
 
		<!--[if lt IE 9 ]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]--> 
 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 
		<style type="text/css">
			body { 
				color: #222;
				font-family: helvetica, arial, sans-serif;
				font-size: 14px;
			}
 
			#content-wrapper {
				width: 960px;
				padding: 0;
				margin: 0 auto;
				border: 2px solid black;
			}
			#content-wrapper #left { 
				width: 25%;
				background: #E0E0E0;
				float: left;
			}
			#content-wrapper #content {
				width: 45%;
				float: left;
				padding: 0 2%;
				border: 1px solid red;
				border-top: 0;
			}
			#content-wrapper #right { 
				width: 25%;
				background: #000;
				color: #FFF;
				float: right;
			}
 
			#content p,
			#content li,
			#content a {
				color: green;
			}
 
			ul#last {
				list-style: none;
			}
			ul#last li { float: left; }
 
		</style>
	</head>
 
	<body class="" lang="en-US">
 
		<header id="primary-header">
 
			<nav id="primary-navigation">
				<ul>
					<li><a href="" title="">list <span>one</span></a></li>
					<li><a href="" title="">list <span>two</span></a></li>
				</ul>
			</nav>
 
		</header>
 
		<div id="content-wrapper">
 
			<aside id="left">
				<nav id="contextual-navigation">
					<ul>
						<li><a href="" title="">another list</a></li>
						<li><a href="" title="">another list</a></li>
					</ul>
				</nav>
			</aside>
 
			<section id="content">
				<p>content area</p>
				<p>content area</p>
				<p class="alternate">content area</p>
				<p>content area</p>
				<p>content area</p>
				<p>content area</p>
				<p>content area</p>
				<p class="end">content area</p>
 
				<div class="big">
					<div>
						<a href="">first link</a>
					</div>
				</div>
 
				<div>
					<div class="big">
						<a href="">second link</a>
					</div>
				</div>
 
				<div>
					<div>
						<a href="">third link</a>
					</div>
				</div>
 
 
				<ul>
				<li class="alternate">1st list item 1</li>
				<li>1st list item 2</li>
				<li class="end">1st list item 3</li>
				</ul>
 
				<ul id="last">
				<li>2nd list item 1</li>
				<li>2nd list item 2</li>
				<li class="end alternate">2nd list item 3</li>
				</ul>
			</section>
 
 
			<aside id="right">
				<p>Right Side content area</p>
			</aside>
			<br clear="both" />
		</div>
 
		<footer>
			footer
		</footer>
 
	</body>
 
</html>

Basic stuff…
http://www.cssbasics.com/
http://en.support.wordpress.com/custom-design/css-basics/

Advanced stuff…
http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

March 10, 2013#

Sidebars / Widgets / Menus…

Sidebars / Widgets / Menus…

and all kinds of other misc stuff…

So we left off last class with creating some sidebars…two to be specific…

How to add two sidebars

with the “register_sidebars” function. http://codex.wordpress.org/Function_Reference/register_sidebar

Here’s one way

if ( function_exists('register_sidebar') ){
 
	register_sidebar(array(
		'name'          =>'Homepage Main Col Feature',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '<img src="'.$template_path.'/img/home/feature_bottom.gif" width="940" height="10" alt="" class="bottom" /></div></div>',
		'before_title' => '<h1 style="color:#fff;padding-bottom:20px;">',
		'after_title' => '</h1><div class="hr"><hr /></div><div class="feature_text">',
	));
 
	register_sidebar(array(
		'name'          =>'Footer Contact & Links',
		'before_widget' => '<div id="%1$s" class="widget footerinfo %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h4 class="widgettitle">',
		'after_title' => '</h4>',
	));
 
}

But it’s kind of clunky. Here’s a much better way, let’s dissect this one.

// create widget areas: sidebar, footer
$sidebars = array('Sidebar', 'Footer');
foreach ($sidebars as $sidebar) {
	register_sidebar(array('name'=> $sidebar,
		'before_widget' => '<article id="%1$s" class="row widget %2$s"><div class="sidebar-section twelve columns">',
		'after_widget' => '</div></article>',
		'before_title' => '<h6><strong>',
		'after_title' => '</strong></h6>'
	));
}

OK… so now we’ve made some sidebars, how the hell do I show them on the front end of the site???

<ul id="sidebar">
<?php if ( ! dynamic_sidebar() ) : ?>
	<li>{static sidebar item 1}</li>
	<li>{static sidebar item 2}</li>
<?php endif; ?>
</ul>

OK… but what if I want to use different sidebars on different pages or templates?

<ul id="sidebar">
	<?php dynamic_sidebar( 'right-sidebar' ); ?>
</ul>

OK… so what would that file be called???

sidebar-right-sidebar.php

HMMM that’s kinda cool…will that work on any other files???

Yep..
headers and footers too…

<?php get_header("page"); ?>
<?php get_footer("page"); ?>

And… these files would be called???
header-page.php
footer-page.php

Well that’s a decent chunk to bite off – let’s try some of that

Menus

Registering a menu – as of WordPress 3.0

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

Adding a menu to your theme

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

http://codex.wordpress.org/Navigation_Menus

let’s give that a whirl too

Plugins…

What are they?
Plugins are tools to extend the functionality of WordPress.
http://codex.wordpress.org/Plugins

Where can I find some of these?
http://wordpress.org/extend/plugins/browse/popular/

Some of my go to’s
Advanced Custom Fields
Easy Content Types
Google Analytics for WordPress
Gravity Forms
NextGEN Gallery
Per Page Sidebars
Regenerate Thumbnails
WP Super Cache
WordPress SEO

Wrapping up / next week

Reverie
Foundation

March 4, 2013#

Grab This

<?php echo get_template_directory_uri(); ?>
<?php /* Start loop */ ?>
<?php while (have_posts()) : the_post(); ?>
      <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
      <?php the_content(); ?>
<?php endwhile; /* End the loop */ ?>
<?php echo "testing"; ?>
add_theme_support('post-thumbnails');
// set_post_thumbnail_size(150, 150, false);
 
// Add post formarts supports. http://codex.wordpress.org/Post_Formats
add_theme_support('post-formats', array('aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat'));
March 1, 2013#

i really love bikes…

thanks to my buddy brad for sharing this video. the message resonates with me and with many conversations i seem to find myself having with people lately. there seems to be a sense that there’s something out there bigger than the things we may have found ourselves chasing. i don’t know what the answer is but i do know this – there is a clarity gained from time spent on a bicycle that i’ve not yet found anywhere else.