Skip to content

Instantly share code, notes, and snippets.

@pmgllc

pmgllc/media-queries.php

Created September 4, 2013 20:27
Show Gist options
  • Save pmgllc/6442406 to your computer and use it in GitHub Desktop.
Save pmgllc/6442406 to your computer and use it in GitHub Desktop.
Download ZIP
"Mobile first" methodology. Place the CSS query in function.php to call a mobile stylesheet to save bandwidth. That is the no-mq.css file. If viewed on a device larger than 480px, then it also calls a CSS file that includes a more traditional responsive stylesheet with media queries at the end, but geared for desktops at the top. I've also inclu…
Raw
media-queries.php
<?php
/** Add in new media query stylesheets for functions.php */
// Add custom.css file in <head>
add_action('genesis_meta', 'pmg_add_customcss');
function pmg_add_customcss( ) {
$pmg_css_link = '
<link href="'.get_bloginfo( 'stylesheet_directory' ).'/no-mq.css" rel="stylesheet">
<!--[if (gte IE 9) | (IEMobile)]><!-->
<link href="'.get_bloginfo( 'stylesheet_directory' ).'/mq.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 480px)">
<!--<![endif]-->';
echo $pmg_css_link;
}
/** Call smaller grid loop images (many implications)
/**
* Grid Loop Arguments
*
* Specify all the desired grid loop and query arguments
*
* @author Bill Erickson
* @author Gary Jones
* @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
*
* @return array $arguments
*/
function child_grid_loop_arguments() {
if ( wp_is_mobile() ) {
$grid_args = array(
'features' => 0,
'feature_content_limit' => 0,
'feature_image_size' => 0,
'feature_image_class' => '',
'grid_content_limit' => 100,
'grid_image_size' => 'mobile',
'grid_image_class' => 'alignnone post-image',
'more' => __( '+ read more', 'genesis' ),
);
$query_args = array(
'posts_per_page' => 6,
);
return array(
'grid_args' => $grid_args,
'query_args' => $query_args,
);
}
else {
$grid_args = array(
'features' => 0,
'feature_content_limit' => 0,
'feature_image_size' => 0,
'feature_image_class' => '',
'grid_content_limit' => 120,
'grid_image_size' => 'post-image',
'grid_image_class' => 'alignnone post-image',
'more' => __( '+ read more', 'genesis' ),
);
$query_args = array(
'posts_per_page' => 6,
);
return array(
'grid_args' => $grid_args,
'query_args' => $query_args,
);
}
}
@GaryJones
Copy link 

function prefix_grid_loop_arguments() {
    $grid_args = array(
        'features'              => 0,
        'feature_content_limit' => 0,
        'feature_image_size'    => 0,
        'feature_image_class'   => '',
        'grid_content_limit'    => 120,
        'grid_image_size'       => 'post-image',
        'grid_image_class'      => 'alignnone post-image',
        'more'                  => __( '+ read more', 'genesis' ),
    );

    $query_args = array(
        'posts_per_page'        => 6,
    );

    if ( wp_is_mobile() ) {
        $grid_args['grid_content_limit'] = 100;
        $grid_args['grid_image_size']    = 'mobile';
    }

    return array(
        'grid_args'  => $grid_args,
        'query_args' => $query_args,
    );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment