Getting an attachment from a URL

Specifically, to get a different size of the image.

        $attachment_id = get_attachment_id_from_src($solutions_metabox->get_the_value('image'));
        $image_url = wp_get_attachment_image_src($attachment_id,'solutions');

Safari and Hash URLs

Just discovered this strange behaviour in Safari (and Safari mobile). If you are using a cross-page url with a hash tag, first it must be formatted thus:

http://domain.tld/path/to/page/#hashtag

Note the slash before the hash. That’s apparently key to getting the hash recognized in Safari. Doesn’t seem to break in other browsers this way.
Next, the javascript to capture this is different:

//no good:
var hash = window.location.hash.replace('tab-', '');

//good:
var hash = location.hash.replace('tab-', '');

Again, this seems to work in other browsers.

Make all external links target to blank

Stupid little javascript workaround for when you are too lazy to do it in the html. Pretty fast, saves pain.

requires this little function:

function strripos(haystack, needle, offset) {
  //  discuss at: http://phpjs.org/functions/strripos/
  // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // bugfixed by: Onno Marsman
  // bugfixed by: Brett Zamir (http://brett-zamir.me)
  //    input by: saulius
  //   example 1: strripos('Kevin van Zonneveld', 'E');
  //   returns 1: 16

  haystack = (haystack + '')
    .toLowerCase();
  needle = (needle + '')
    .toLowerCase();

  var i = -1;
  if (offset) {
    i = (haystack + '')
      .slice(offset)
      .lastIndexOf(needle); // strrpos' offset indicates starting point of range till end,
    // while lastIndexOf's optional 2nd argument indicates ending point of range from the beginning
    if (i !== -1) {
      i += offset;
    }
  } else {
    i = (haystack + '')
      .lastIndexOf(needle);
  }
  return i >= 0 ? i : false;
}

and the jQuery bit:

jQuery(document).ready(function($) {	
    // add target="_blank" to all *external* 
//create array of all *internal* urls that should NOT go to a separate window
    var internal_urls = Array('domain.tld','127.0.0.1','domain.tld');
    $('a').attr('target',function(){
        var url = $(this).attr('href');
        var target = $(this).attr('target');
        if(url == '#' || strripos(url,'http',0)===false){
            return '_self';
        } else {
            var i=0;
            while (internal_urls[i]){
                if(strripos(url, internal_urls[i], 0)){
                    return target;
                }
                i++;
            }
            return '_blank';
        }
    });
});

Bootstrapping genesis

This was kind of a cool thing I was doing to have two different sidebar layouts on pages vs. posts/cpts, but the client decided to go with one layout overall, so now I’m saving it here.

/*** Bootstrappin **/

add_filter( 'genesis_attr_site-inner', 'msdlab_bootstrap_site_inner', 10);
add_filter( 'genesis_attr_breadcrumb', 'msdlab_bootstrap_breadcrumb', 10);
add_filter( 'genesis_attr_content-sidebar-wrap', 'msdlab_bootstrap_content_sidebar_wrap', 10);
add_filter( 'genesis_attr_content', 'msdlab_bootstrap_content', 10);
add_filter( 'genesis_attr_sidebar-primary', 'msdlab_bootstrap_sidebar', 10);

/*** Bootstrappin **/

function msdlab_bootstrap_site_inner( $attributes ){
    $attributes['class'] .= ' container';
    return $attributes;
}

function msdlab_bootstrap_breadcrumb( $attributes ){
    $attributes['class'] .= ' row';
    return $attributes;
}

function msdlab_bootstrap_content_sidebar_wrap( $attributes ){
    $attributes['class'] .= ' row';
    return $attributes;
}

function msdlab_bootstrap_content( $attributes ){
    $layout = genesis_site_layout();
    switch($layout){
        case 'content-sidebar':
        case 'sidebar-content':
            if(is_page()){
                $attributes['class'] .= ' col-md-7 col-sm-12';
            } else {
                $attributes['class'] .= ' col-md-9 col-sm-12';
            }
            break;
        case 'content-sidebar-sidebar':
        case 'sidebar-sidebar-content':
        case 'sidebar-content-sidebar':
            break;
        case 'full-width-content':
            $attributes['class'] .= ' col-md-12';
            break;
    }
    return $attributes;
}

function msdlab_bootstrap_sidebar( $attributes ){
    $layout = genesis_site_layout();
    switch($layout){
        case 'content-sidebar':
        case 'sidebar-content':
            if(is_page()){
                $attributes['class'] .= ' col-md-4 col-md-offset-1 hidden-sm hidden-xs';
            } else {
                $attributes['class'] .= ' col-md-3 hidden-sm hidden-xs';
            }
            break;
        case 'content-sidebar-sidebar':
        case 'sidebar-sidebar-content':
        case 'sidebar-content-sidebar':
            break;
        case 'full-width-content':
            $attributes['class'] .= ' hidden';
            break;
    }
    return $attributes;
}

WPAlchemy repeating fileds and the wp_editor()

I may have something working. I’m still doing some testing, but I think the problem lies here:
” $editor_id (string) (required) HTML id attribute value for the textarea and TinyMCE. (may only contain lower-case letters)” (http://codex.wordpress.org/Function_Reference/wp_editor)

When you try to pass $mb->get_the_name(), it inputs all kinds of brackets and such, which are disallowed characters. Here’s where I’m at:

https://gist.github.com/foxydot/9075575.js

Using sanitize_key removes those illegal characters. Adding ‘textarea_name’=>$mb->get_the_name() to the settings array re-targets the input to that hidden textbox.

I’m using Extract Mode (I always do, for searchability) and so far it seems to be working.

FontAwesome for bullets hack

.entry-content ul li {
	list-style: none outside none;
	margin-bottom: .25em;
	margin-left: 0.25em;
	text-indent: -0.25em;
}
.entry-content ul li:before {
    font-family: 'FontAwesome';
    content: '\f0DA';
    margin:0 0.25rem 0 0;
    color: #666666;
}

Making Genesis & Bootstrap play nice together

This is going to be a multi-post solution set, I’m sure. I started out with a jQuery solution. It worked ok, but wasn’t really what I wanted:

//bootstrap
    $('.site-inner').addClass('container');
    //$('.wrap').addClass('row');
    $('.content-sidebar .content-sidebar-wrap').addClass('row');
    $('.content-sidebar .content').addClass('col-md-8 col-sm-12');
    $('.content-sidebar .sidebar').addClass('col-md-4');

Then I started digging into the Genesis context filters. This will probably work better and be more portable in the future. (Obviously this is jsut a part of it.)

/*** Bootstrappin **/

add_filter( 'genesis_attr_site-inner', 'msdlab_bootstrap_site_inner', 10);
add_filter( 'genesis_attr_breadcrumb', 'msdlab_bootstrap_breadcrumb', 10);
add_filter( 'genesis_attr_content-sidebar-wrap', 'msdlab_bootstrap_content_sidebar_wrap', 10);
add_filter( 'genesis_attr_content', 'msdlab_bootstrap_content', 10);
add_filter( 'genesis_attr_sidebar-primary', 'msdlab_bootstrap_sidebar', 10);

function msdlab_bootstrap_site_inner( $attributes ){
    $attributes['class'] .= ' container';
    return $attributes;
}

function msdlab_bootstrap_breadcrumb( $attributes ){
    $attributes['class'] .= ' row';
    return $attributes;
}

function msdlab_bootstrap_content_sidebar_wrap( $attributes ){
    $attributes['class'] .= ' row';
    return $attributes;
}

function msdlab_bootstrap_content( $attributes ){
    $layout = genesis_site_layout();
    switch($layout){
        case 'content-sidebar':
        case 'sidebar-content':
            $attributes['class'] .= ' col-md-7 col-sm-12';
            break;
        case 'content-sidebar-sidebar':
        case 'sidebar-sidebar-content':
        case 'sidebar-content-sidebar':
            break;
        case 'full-width-content':
            $attributes['class'] .= ' col-md-12';
            break;
    }
    return $attributes;
}

function msdlab_bootstrap_sidebar( $attributes ){
    $layout = genesis_site_layout();
    switch($layout){
        case 'content-sidebar':
        case 'sidebar-content':
            $attributes['class'] .= ' col-md-4 col-md-offset-1 hidden-sm hidden-xs';
            break;
        case 'content-sidebar-sidebar':
        case 'sidebar-sidebar-content':
        case 'sidebar-content-sidebar':
            break;
        case 'full-width-content':
            $attributes['class'] .= ' hidden';
            break;
    }
    return $attributes;
}

IE8 Javascript Upgrades

So, I’m discovering a number of things that IE8 doesn’t do that are “upgradeable” via javascript. I’m installing the js via a conditional so that I’m not loading it unless necessary.

Make it play nice with responsive design (bootstra) media queries: https://github.com/scottjehl/Respond

Make it understand cover/contain background images (logos): https://github.com/louisremi/jquery.backgroundSize.js (deprecated) or https://github.com/louisremi/background-size-polyfill

Of course, Modernizr.

Gravity forms CSS tricks

http://kevinshoffner.com/wordpress/tipstricks/custom-css-gravity-forms/

Here is a quick list of all of the built-in classes:

Checkboxes and Lists Fields

gf_list_2col

= 2 columned List

gf_list_3col

= 3 columned List

gf_list_4col

= 4 columned

gf_list_5col

= 5 columned

Two Columns of Text Fields side by side

gf_left_half

= The left column

gf_right_half

= The right column

Three Columns side by side

gf_left_third

= Left column

gf_middle_third

= Middle column

gf_right_third

= Right column

Some other miscellaneous styles

gf_scroll_text

= Gets a scroll box into place, for those long sections where you need to give your visitor lots of information
scrolling-text

gf_hide_ampm

= If you want to hide the AM/PM portion of the Time field

gf_list_inline

= Simpliar to the above gf_list classes, but just show up next to each other using the amount of space the content can use on each line, instead of making it fit within 2,3,4,5 columns.

gf_hide_charleft

= Do not display the amount of characters left / character counter

I’ve not found a great use for these, but they are available:

gf_list_height_25

= 25 pixels between list items

gf_list_height_50

= 50 pixels between list items

gf_list_height_75

= 75 pixels between list items

gf_list_height_100

= 100 pixels between list items

gf_list_height_125

= 125 pixels between list items

gf_list_height_150

= 150 pixels between list items

Genesis Widget Formatting

Genesis has a pretty cool filter available to override the default settings for a widget area. You can use this to filter all of the widget area layouts:

function msdlab_register_sidebar_defaults($args){
    $args = array(
            'before_widget' => genesis_markup( array(
                'html5' => '<section id="%1$s" class="widget %2$s">',
                'xhtml' => '<div id="%1$s" class="widget %2$s">',
                'echo'  => false,
            ) ),
            'after_widget'  => genesis_markup( array(
                'html5' => '</div></section>' . "\n",
                'xhtml' => '</div></div>' . "\n",
                'echo'  => false
            ) ),
            'before_title'  => '<h4 class="widget-title widgettitle">',
            'after_title'   => genesis_markup( array(
                'html5' => '</h4>'."\n".'<div class="widget-wrap">',
                'xhtml' => '</h4>'."\n".'<div class="widget-wrap">',
                'echo'  => false,
            ) ),
        );
   return $args;
}

The issue comes when you try to activate it. Because the default widget areas are registered before the filter is defined, it won’t work unless you do something like so:

remove_action( 'genesis_setup', 'genesis_register_default_widget_areas' ); //remove initial setup of default widgets
add_action( 'after_setup_theme', 'genesis_register_default_widget_areas' ); //move them to AFTER the theme files are loaded
add_filter('genesis_register_sidebar_defaults','msdlab_register_sidebar_defaults'); //and here's the filter