Code – Page 2 – Clean Super Sites

Bootstrap Left-side Tabs

The css modifications to get tabs to the left for a standard framed tab block

.tabs-left .tb-tabs-framed .tab-content {

border-top-width: 1px;

margin-left: 149px;

}

.tabs-left .nav-tabs {

width: 150px;

float: left;

}

.tabs-left .nav-tabs>li {

border-left-width: 1px;

float: none;

}

.tabs-left .nav-tabs>li.active {

border-bottom-color: inherit!important;

border-right-color: #fff;

}

Button Filtering

function jma_frontend_locals( $args ) {

$args['read_more'] = 'Read more >> ';

return $args;

}

add_filter( 'themeblvd_frontend_locals', 'jma_frontend_locals' );

function jma_get_button_class( $class ) {

$class = 'inline-btn';

return $class;

}

function jma_template_redirect() {

if(is_page(10))

add_filter( 'themeblvd_get_button_class', 'jma_get_button_class' );

}

add_action( 'template_redirect', 'jma_template_redirect' );

Change out Icons

function jma_thumbnail_link_icon_name($class)

{

return str_replace(array('film'), array('youtube'), $class);

}

add_filter('themeblvd_thumbnail_link_icon_name', 'jma_thumbnail_link_icon_name');

//framework/general/media.php

//to change all three for left to right.... I think...

function jma_thumbnail_link_icon_name($class)

{

return str_replace(array('film', 'plus-square', 'long-arrow-alt-right'), array('youtube', 'if-you-wanted-to-replace-the-plus-sq-also', 'and-this-one-too'), $class);

}

add_filter('themeblvd_thumbnail_link_icon_name', 'jma_thumbnail_link_icon_name');

Check for Children

Want to be able to use one condition which includes or excludes pages based on weather they are children of a specific page? Add this code to functions.php:

function is_kid( $pid,$includeparent = 0 ) { // $pid = The ID of the page we're looking for pages underneath

//$includeparent = 1 to include the parent page, 0 to exclude

global $post; // load details about this page

if ( is_page($pid) )

return $includeparent; // we're at the page

$anc = get_post_ancestors( $post->ID );

foreach ( $anc as $ancestor ) {

if( is_page() && $ancestor == $pid ) {

return true;

}

return false; // we aren't at the page, and the page is not an ancestor

}

then use this in your page template:

if (is_kid($page_id,1)) //1 to include the parent page, 0 to exclude

{

code here

}

In the event we are dealing with some situation where it is not convenient to add the clearfix class (which is available frequently including in JumpStart), we can add the styling to the div that needs clearfix. So if we had markup like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie co

</div>

</div>

</div>

we could add this css to clear:

.wrapping-div-that-i-cant-change:before,

.wrapping-div-that-i-cant-change:after {

content: " ";

display: table;

}

.wrapping-div-that-i-cant-change:after {

clear: both;

}

Complex Query Over-rides

function jma_spout_args( $query, $args ) {

if ( isset( $args['query'] ) && $args['query'] == 'spouts' ) {

$query = array(

'post_type' => 'product',

'post__in' => array( 126,128 )

);

}

return $query;

}

add_filter('themeblvd_posts_args', 'jma_spout_args', 10, 2);

CSS Columns

Need to style code into columns. This is for simple auto-generated paragraph in a post or page.

.postid-1121 .entry-content > p {

width: 48%;

margin-left: 4%;

float: left;

}

.postid-1121 .entry-content > p:nth-of-type(2n+1) {

clear: both;

margin-left: 0;

}

or for three col:

.postid-1121 .entry-content > p {

width: 30%;

margin-left: 5%;

float: left;

}

.postid-1121 .entry-content > p:nth-of-type(3n+1) {

clear: both;

margin-left: 0;

}

or four:

.postid-1121 .entry-content > p {

width: 22%;

margin-left: 4%;

float: left;

}

.postid-1121 .entry-content > p:nth-of-type(4n+1) {

clear: both;

margin-left: 0;

}

CSS3 Drop Shadows

This is simple stuff, but good code to keep handy. This covers all current major browsers and add backward compatibility for ie. The first number is horizontal shift (right is positive), 2nd number is verticle shift (down is positive), 3rd is radial blur and forth is, in this case hexadecimal color (#3d424d is a dark […]

Custom Bullet Icons for Lists

I prefer this method because it gives me more control over bullet position.

<li><a href="http://address.pdf">Title</a></li>

</ul>

and the css (adjust padding based on the size of the image):

ul.pdf-list li {

background: url('../images/pdf-icon.png') no-repeat left center;

padding: 3px 0px 3px 30px;

list-style: none;

}

In this case I used this image (your url path in line 2 above will depend on your site structure): or use bootstrap: http://fortawesome.github.io/Font-Awesome/icons/

<li><i class="fa-li fa fa-check-square"></i>List icons</li>

<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>

<li><i class="fa-li fa fa-square"></i>in lists</li>

</ul>

Custom Grid with Pagination

function pract_grid() {

$args = array(

'post_type'=> 'practitioner',

'meta_key' => 'last_name',

'orderby' => array( 'menu_order' => 'DESC', 'meta_value' => 'ASC' ),

'posts_per_page' => 15

);

if ( get_query_var('paged') ) {

$args['paged'] = get_query_var('paged');

} else if ( get_query_var('page') ) {

$args['paged'] = get_query_var('page');

} else {

$args['paged'] = 1;

}

$x = new WP_Query($args);

if( $x->have_posts() ) {

echo '<div class="jma-custom-grid">';

while ( $x->have_posts() ) {

$x->the_post();

get_template_part( 'content', 'pract_result' );

}

echo '</div>';

themeblvd_pagination( $x->max_num_pages );

}else{

echo 'no results';

}

wp_reset_postdata();

}

add_action('your_favorite_hook', 'pract_grid');

‹1 2 3 4 ›»