Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
UberMenu Post Grid Shortcode & Styling
<?php
/** ADD EVERYTHING BELOW THIS LINE TO YOUR CHILD THEME'S FUNCTIONS.PHP **/
function ubermenu_post_grid( $atts ){
//we're going to need access to the UberMenu object for image functionality
global $uberMenu;
//Merge user-provided attributes with default values
//and extract into individual variables
extract(shortcode_atts(array(
'num' => 4, //maximum number of posts to retrieve
'grid' => 4, //number of columns per row
'category' => '', //optional category to retrieve posts from
'img' => 'on', //'on' or 'off' to display the image or not
'img_width' => 220, //image width in pixels
'img_height'=> 120, //image height in pixels
'excerpt' => 'off', //'on' or 'off' to display the excerpt
'default_img' => false, //URL of a default image to display when no featured image is available
'offset' => 0, //offset for get_posts() (number of posts to skip)
), $atts));
//Setup default query arguments
$query_args = array(
'numberposts' => $num,
'offset' => $offset,
'suppress_filters' => false
);
//If the user has provided a category, parse it into the query args
if( !empty( $category ) ){
//Handle numeric category values
if(is_numeric($category)){
$query_args['category'] = $category;
}
//Handle category names as well
else $query_args['category_name'] = $category;
}
//Retrieve matching posts from the database
$posts = get_posts( $query_args );
//Wrap our grid in an unordered list container
$html = '<ul class="uber-post-grid uber-post-grid-'.$grid.'">';
//Loop through each post and output the image, title, and excerpt
foreach( $posts as $post ){
//Each post becomes a list item
$html.= '<li class="uber-post-grid-item post-'.$post->ID.'">';
//We will wrap the entire item contents with the post's permalink (note anchors can be block level elements in HTML5)
$html.= '<a href="'.get_permalink( $post->ID ).'">';
//Get the image at the right size and append it
$image = '';
if($img == 'on'){
$image = $uberMenu->getPostImage($post->ID, $img_width, $img_height, $default_img );
$html.= $image;
}
//Add the post title
$html.= '<h5>'.$post->post_title.'</h5>';
//Add the excerpt
if($excerpt == 'on')
$html.= '<span class="uber-post-grid-excerpt">'.apply_filters( 'get_the_excerpt', $post->post_excerpt ).'</span>';
$html.= '</a>';
$html.= '</li>';
}
$html.= '</ul>';
//Return the entire list
return $html;
}
add_shortcode( 'ubermenu-post-grid' , 'ubermenu_post_grid' );
/* Adjust overrides and widgets alignment to allow even grid */
#megaMenu ul.megaMenu ul.sub-menu-1 > li.menu-item.ss-override.no-padding-shortcode,
#megaMenu ul.megaMenu ul.sub-menu-1 > li.menu-item.ss-sidebar.menu-item.no-padding-widget > .wpmega-widgetarea > ul.um-sidebar > li.widget{
padding-left:0;
padding-right:0;
width:100%;
}
/* Align nav labels */
#megaMenu ul.megaMenu ul.sub-menu-1 > li.menu-item.ss-override.no-padding-shortcode > a,
#megaMenu ul.megaMenu ul.sub-menu-1 > li.menu-item.ss-override.no-padding-shortcode > span.um-anchoremulator,
#megaMenu ul.megaMenu ul.sub-menu-1 > li.ss-sidebar.no-padding-widget > .wpmega-widgetarea > ul.um-sidebar > li.widget h2.widgettitle{
margin:0 27px;
}
/* Setup Grid container and items to make sizing easy */
#megaMenu ul.megaMenu .uber-post-grid,
#megaMenu ul.megaMenu .uber-post-grid-item{
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/* Align grid container properly */
#megaMenu ul.megaMenu .uber-post-grid{
display:block;
margin:10px 0 10px 0;
float:left;
padding-left:27px;
}
/* Space grid items */
#megaMenu ul.megaMenu .uber-post-grid-item{
float:left;
padding:0 27px 10px 0;
}
/* Make images responsive */
#megaMenu ul.megaMenu .uber-post-grid .uber-post-grid-item img{
max-width:100%;
}
/* Setup simple grid widths */
#megaMenu ul.megaMenu .uber-post-grid-1 .uber-post-grid-item{ width: 100%; }
#megaMenu ul.megaMenu .uber-post-grid-2 .uber-post-grid-item{ width: 50%; }
#megaMenu ul.megaMenu .uber-post-grid-3 .uber-post-grid-item{ width: 33%; }
#megaMenu ul.megaMenu .uber-post-grid-4 .uber-post-grid-item{ width: 25%; }
#megaMenu ul.megaMenu .uber-post-grid-5 .uber-post-grid-item{ width: 20%; }
/* Post titles */
#megaMenu ul.megaMenu .uber-post-grid h5,
#megaMenu ul.megaMenu .uber-post-grid a{
font-size:12px;
text-transform:none;
text-decoration: none
}
#megaMenu ul.megaMenu .uber-post-grid h5{
font-weight:bold;
line-height:18px;
}
/* Post Excerpts */
#megaMenu ul.megaMenu .uber-post-grid-excerpt{
font-size:90%;
}
/* Stretch everything to 100% for no-padding items */
@media only screen and (max-width: 767px) {
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 > li.menu-item.ss-override.no-padding-shortcode,
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 > li.menu-item.ss-sidebar.menu-item.no-padding-widget > .wpmega-widgetarea > ul.um-sidebar > li.widget{
padding:0;
width:100%;
}
}
/* #Mobile (Landscape) - 480px - 767px
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#megaMenu ul.megaMenu .uber-post-grid-2 .uber-post-grid-item,
#megaMenu ul.megaMenu .uber-post-grid-3 .uber-post-grid-item,
#megaMenu ul.megaMenu .uber-post-grid-4 .uber-post-grid-item,
#megaMenu ul.megaMenu .uber-post-grid-5 .uber-post-grid-item{ width: 50%; }
}
/* #Mobile (Portrait) - < 480px
================================================== */
@media only screen and (max-width: 479px) {
#megaMenu ul.megaMenu .uber-post-grid-2 .uber-post-grid-item,
#megaMenu ul.megaMenu .uber-post-grid-3 .uber-post-grid-item,
#megaMenu ul.megaMenu .uber-post-grid-4 .uber-post-grid-item,
#megaMenu ul.megaMenu .uber-post-grid-5 .uber-post-grid-item{ width: 100%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment