• To actually blog!
  • Update this theme, since it has been neglected
  • Start my beer blog http://beer.x3graphics.com ( yes I posted once before this one )
  • Maybe meet a special girl, haha (I know pretty sad but I would like to)
  • Gain a few pounds, gym maybe a bit
  • Quit Smoking…. eh maybe, we will see
  • Finish my Foundation WordPress theme
  • Start a paid WP theme based on my Foundation Theme
  • And finally…start learning node.js

Ok so I work at a company that deals with tobacco…and that means I have to have some kind a age verification service on most sites. I came across age-gate a while ago and I just started to play with the code:

First mod: Fix get current year.


Since I use this plugin so much I plan on updating it as I go. Since I am not the author of this plugin I hope he updates it as I go, if not, I hope you update too. If you need any help with this plugin hit me up

Getting LESS css to work with Wordpress

If you haven’t heard or LESS, or Sass, maybe you have been living under a rock or something. But both have been around for a little while now and have become one of the many new web trends. Basically it is your programmable stylesheet.

“LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.” – lesscss.org

Today I am going to show you how you can add LESS to your custom WordPress theme.

  1.  Download LESS JS
    Go to lesscss.org, click the download button and save the file to your themes js folder.
  2. Next we need to modify your functions.php file to include the less.js file
    function my_lesscss() {
    //First we register the script
    //wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script( 'lesscss', get_template_directory_uri() . '/js/less-1.3.0.min.js', false, '1.3', false );
    //wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); we already defined all these so we just need to call our handle
    //add_action( $tag, $function_to_add, $priority, $accepted_args );
    add_action('wp_enqueue_scripts', 'my_lesscss');
  3. Next we need to include our css/less file. I am currently using Twitter’s Bootstrap. My LESS files are in a less directory inside a bootstrap directory inside my theme folder (themes/mytheme/bootstrap/less/)
    function my_lesscss() {
    //First we register the script
    //wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script( 'lesscss', get_template_directory_uri() . '/js/less-1.3.0.min.js', false, '1.3', false );
    //wp_register_style( $handle, $src, $deps, $ver, $media );
    wp_register_style( 'lesscss', get_template_directory_uri() . '/bootstrap/less/bootstrap.less', flase, '2.1', 'screen');
    //wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); we already defined all these so we just need to call our handle
    add_action('wp_enqueue_scripts', 'my_lesscss');
    add_action('wp_enqueue_style', 'my_lesscss');
  4. And finally one last piece. We need to modify the rel attribute. By default, WordPress puts rel=”stylesheet”. This will not work for us, we need to modify it to make it work with LESS. Thanks to this post I came across I was able to do this, slightly modified.
    function enqueue_less_styles($tag, $handle) {
    global $wp_styles;
    $match_pattern = '/\.less$/U';
    if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
    $handle = $wp_styles->registered[$handle]->handle;
    $media = $wp_styles->registered[$handle]->args;
    $href = $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
    $rel = isset($wp_styles->registered[$handle]->extra['alt']) && $wp_styles->registered[$handle]->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
    $title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';$tag = "";
    return $tag;
    add_filter( 'style_loader_tag', 'enqueue_less_styles', 5, 2);
  5. And hopefully that all worked for you. Now keep in mind you would only want to do this for development. For production, you would want to link to a css file and not your less files.

I came across a great little tool today for mobile and tablet design, Adobe Shadow, from Adobe Labs. It’s pretty much a sync application, and with the Google Chrome Addon will sync to your device, over a local network, to whatever you have open in Chrome. You can edit your page with dev tools, and it will automatically update your device. Currently it supports iOS, Android, and Kindle Fire.

Pretty easy to get it up and running (about 10-15 minutes)

  1. Install the software from Adobe Labs
  2. Install the Chrome Extension
  3. Install the app on your device
  4. Start Adobe Shadow
  5. Start the app on your device, I had to add my IP address manually
  6. Enter the pass-code into the Chrome extension
  7. Enjoy


Well it has been a couple years since I updated my website. I have been pretty busy having my regular gig, side work and other personal projects, and having a life, but now it is finally done.

My last website was created in Drupal, which I do like, but I believed that WordPress would better suit my needs. After customizing a basic responsive theme and adding a few plugins, I think it is just about complete. I am sure I will make more updates to adhere to my personality.

My goal this time around is to actually make regular posts, whether it be a blog post or a tutorial. Yes, I know tutorials are empty right now but that is going to change soon.

Anyways I hope you like the new site and future updates.