Handsome Fox Creative Studio - Blog

Merry Christmas!

IN #

Merry Christmas

Quickly Toggle Hidden Files Mac OS X

IN # #

Working with hidden files often in OS X? but not often enough to keep them on all the time? Me too. Here's a little edit to your bash profile to quickly toggle the visibility of hidden files with one word in terminal.

$ vi ~/.bash_profile

Press i to insert, use down key to reach the bottom, and add the following:

alias showhidden="defaults write com.apple.finder AppleShowAllFiles TRUE; killall Finder"
alias nohidden="defaults write com.apple.finder AppleShowAllFiles FALSE; killall Finder"

Exit insert mode with Esc save and close with ZZ

Restart your bash profile with:

$ source ~/.bash_profile

And now you have some beautiful simple commands:

$ showhidden
$ nohidden

Add or Remove WWW in WordPress

IN , # #

www is technically a sub-domain - but it usually shares the same /httpdocs/ or /public_html/ or /www/ folder on hosts as non-www, it also is configurable in many different places and varies from host-to-host, so it gets confusing at times.

As such, this question comes up daily on the Wordpress Support Forums and being that I'm tired of writing personalized responses to them - here's a quick and easy break down:

Site Address and Wordpress Address

When you're in Dashboard > Settings > General ensure you're changing both the "WordPress Address (URL)" and "Site Address (URL)" to include or exclude your www.

If you've locked yourself out of /wp-admin/ because of a www change and are seeing a white screen or experiencing a redirect loop: head to your database via phpMyAdmin, look for *_options and change the siteurl and home values to have or remove www.

If you have a Wordpress Network / Multisite setup - there's a few more steps for this:

  • in wp-config.php make sure the DOMAIN_CURRENT_SITE is set to your www preference
  • in *_blogs and *_site make sure everything's set to your www preference
  • in all *_*_options make sure home and site_url are also at your www preference

Check Your Web Host (control panel, plesk)

Changing www in Wordpress isn't always enough, sometimes your server needs adjustments. Any of the above hosting managers (often in the "domains" section) will have a question about your domain if you "want www prefix" to prepend to your domain. Select what you'd like!

You can see if www is enabled on your current domain's server/host/setup by going to your WordPress's readme.html file (which is an independent file that doesn't have anything to do with PHP, database, or your entered url's) Simply visit via your Wordpress install location (example: http://WWW.yoursite.com/wordpress/readme.html)

Force www Preference with .htaccess

If it's just being a pain, or perhaps your site is running www or non-www fine but the opposite is still rendering, make a redirect with .htaccess to immediately redirect users permanently (Search engines will respect this as they're 301's)

# Redirect non-www urls to www
RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.yoursite\.com/$
RewriteRule (.*) http://www.yoursite.com/$1 [R=301,L]
# Redirect www urls to non-www
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.yoursite\.com$
RewriteRule ^(.*)$ http://yoursite.com/$1 [R=301,L]

The three areas above, used independently or together (depending on your setup and host) should resolve your www headache.

Much More Modern & Micro Mobile Menu

IN # # #

Watch carefully - at department stores, restaurants, arenas, on the bus - you'll notice something. Something alarming. Every single freaking person is on a smart phone. Yes, everyone. Jess got a text from her Grandma yesterday. Her Grandma! If your website isn't responsive, easy, and quick to use on a mobile phone that all of these people have, you're doing something wrong.

I've used a few different ways of creating off-canvas navigations, making the website feel more like an app where the navigation is hidden "behind" the current viewport, and the active screen is animated, sliding out of the way. I like this, I do, but it's cumbersome - it often requires modernizer, lots of jQuery window calculations and event binding, CSS animations, and lots more. Typically it calls for building a second navigation, which defeats the "responsive" idea. Adding on, it's no longer the norm of popular apps to have off-canvas sliders, it's not a good direction.

Things are changing, getting simpler, and cleaner. Myself, I'm on a minimal binge - in both design and code, so I've written a new, much smaller and simpler responsive navigation:

The HTML

<header>
  <input id="hamburger" type="checkbox" />
  <label for="hamburger" id="hamburger-icon"></label>
  <nav>
    Your navigation here
  </nav>
</header>

The CSS

header input, header label { display: none }
header nav { /* your desktop navigation css */ }

@media screen and (max-width: 960px) {
    header label {
      display: block;
      width: 20px;
      height: 20px;
      background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODggODgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDg4IDg4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMzAzNzNiICFpbXBvcnRhbnQ7IH08L3N0eWxlPg0KPGc+DQoJPHJlY3QgeT0iMTIuMyIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9Ijg4LjQiIGhlaWdodD0iOSIvPg0KPC9nPg0KPGc+DQoJPHJlY3QgeT0iNDEuNSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9Ijg4LjQiIGhlaWdodD0iOSIvPg0KPC9nPg0KPGc+DQoJPHJlY3QgeT0iNzAuNiIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9Ijg4LjQiIGhlaWdodD0iOSIvPg0KPC9nPg0KPC9zdmc+DQo=");
    }
    header nav {
      display: none;
      position: absolute;
      background: white;
      /* your mobile navigation css */
    }
    header input:checked ~ header nav {
      display: block;
    }
}

Copy/paste this and it looks like crap, so lets focus on the functionality of it here.

The desktop and mobile nav are differentiated by our @media query. Normal desktop looks like a normal nav, when we're less than 960px wide, we're display a <label> as a navigation drawer, which when clicked, alters the input's :checked pseudo element and determines the visibility / drawer status of <nav>.

It doesn't get much more simpler than this for a responsive navigation.

Opengraph Image From Featured, Inline, or Attached

IN , # #

For opengraph and similar social sharing protocols, you'll want to include graphics with your post and pages whenever possible for blatantly obvious reasons. Often these images are scraped from the webpage and made selectable by the share'r, which is why you're able to specify which image you'd like to show when shared.

Sometimes (and with some Wordpress setups) it's hard to say whether the post will have a featured image, an inline image, an attached image, a gallery of images, or none at all. Furthermore, some featured images are on the webpage but shown with CSS instead of scrap-able <img> tags.

For that problem, I wrote this solution:

function return_a_damn_image() {
  global $post;

  // try to get featured image
  $ftr = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID()), 'medium' );

  // try to get posts from post_content
  preg_match_all('/\!\[(.+?)\]\((.+?)\)/i',$post->post_content, $result); 

  // try to get attached media
  $get_attached_images = get_attached_media('image',get_the_ID());
  foreach ($get_attached_images as $aattacheditem) {
    $attached_img = wp_get_attachment_image_src($aattacheditem->ID,'medium');   
    break;
  }

  // let's see: if featured image
  if (is_single() && isset($ftr[2]))
    $image = $ftr[0];

  // if an image from post_content
  elseif (isset($result[2][0]))
    $image = $result[2][0];

  // if an image from an attached image (gallery)
  elseif (isset($attached_img[2]))
    $image = $attached_img[0];

  // nothin! let's go default image
  else
    $image = get_bloginfo('stylesheet_directory')."/logo.png";  

  return $image; // send image back
}

Where logo.png is your fallback image, if your post/page has nothing else. You can change the order of the if/else conditions to prioritize what you'd like (i.e. attached images to be found before inline images).

It can be used like so:

<meta property="og:image" content="<?= return_a_damn_image() ?>">

Pro tip of the day: Need more images on your text-heavy blog? Getty Images Wordpress plugin.

Made a Hanger

IN #

Apparently one wasn't enough. Found a few faucets in a antique store in Enderby & heckled down a deal for them. Installed one into some weathered lumber, and pieced on some shinny knobs I beat the crap out of to look worn. Going for the artsy fartsy look. Jess will be selling it here on Facebook or here on Etsy.

Hanger

Hanger

Restrict A WordPress User to one page without using a plugin

IN , # #

Don't want a huge plugin to restrict a single wordpress user to a single page?

Either did I, so I wrote this:

Where $restricted_user is the ID of the restricted user and $permitted is the ID of the only page the restricted user can access/edit.

add_action('admin_init','HR_user_lockout');
function HR_user_lockout() {
  global $current_user, $menu, $submenu;
  $restricted_user = 123;
  // check for current user
  if ($current_user->data->ID == $restricted_user) {
    // remove admin menus
    $menu = array();
    $submenu = array();
    // redirect user to only permitted page
    add_action('current_screen','HR_user_redirect');
  }
}
function HR_user_redirect() {
  $screen = get_current_screen();
  $permitted = 67;
  if (
  // EDIT PAGE
  (
  $screen->base == 'post' && $screen->id == 'page' &&
    (
    (!isset($_POST['post_ID']) && $_GET['post'] == $permitted) ||
    (isset($_POST['post_ID']) && $_POST['post_ID'] == $permitted)
    )
  )
  OR
  // MEDIA UPLOAD
  (
    $screen->base == 'upload' && $screen->id == 'upload' ||
    $screen->base == 'media' && $screen->id == 'media' ||
    $screen->base == 'async-upload' && $screen->id == 'async-upload'
  )
  ) {
    // HR user is in the right places
  } else {
    // redirect to permitted page
    wp_redirect(get_bloginfo('wpurl').'/wp-admin/post.php?post='.$permitted.'&action=edit');
  }
}

jQuery Refresh Part of Page

IN , , #

Probably one of the better scripts to keep in your snippet drawer. & it's so simple.

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type='text/javascript'>
      $(document).ready(function() {
        setInterval(function() {
          var url = 'http://full_url_of_this_page.html';
          $('#refresh_zone-wrapper').load(url + ' #refresh_zone'); //note: space between intentional
        }, 2000); // milliseconds 
      });
    </script>

  </head>
  <body>
    <div id="refresh_zone-wrapper">
      <div id="refresh_zone">
        <?= rand(1,9999) ?>
      </div>
    </div>
  </body>
</html>
1 2 3 6