Code – Clean Super Sites

100% Height Sidebar

Say you want the background and/or border of the sidebar to extend the full height of the page…


.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; 
  padding-bottom: 5000px; 
  .... 
}

.container {

overflow: hidden;

....

}

#sidebar {

margin-bottom: -5000px;

padding-bottom: 5000px;

....

}

Accordion Sidebar Menu

Shows all the children under the current root item and all other root items.


function jma_sidebar_addon() {
	global $post;
	$ancestors = get_ancestors( $post->ID, 'page' );
	$ancestor_id = array_pop($ancestors);
	$ancestor_id = $ancestor_id? $ancestor_id: $post->ID;
	$root_pages = get_pages(array('parent' => 0));
	echo '<ul>';
	foreach ($root_pages as $root_page) {
		$jma_classes = '';
		$show_kids = false;
		$has_kids = false;
		if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){
			$jma_classes .= ' show-children';
			$show_kids = true;
		}
		$children = get_pages('child_of='.$root_page->ID);
		if( count( $children ) != 0 ){
			$jma_classes .= ' has-cildren';
			$has_kids = true;
		}
		echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' .  $root_page->post_title . '</a>';
		if( $show_kids && $has_kids ){
			echo '<ul>';
				wp_list_pages(array("child_of" => $ancestor_id,  "link_before" => "", "title_li" => "", "sort_column" => "title"));
			echo '</ul>';	      	
		}
		echo '</li>';	   
	}
	echo '<ul>';
}
add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon');

function jma_sidebar_addon() {

global $post;

$ancestors = get_ancestors( $post->ID, 'page' );

$ancestor_id = array_pop($ancestors);

$ancestor_id = $ancestor_id? $ancestor_id: $post->ID;

$root_pages = get_pages(array('parent' => 0));

echo '<ul>';

foreach ($root_pages as $root_page) {

$jma_classes = '';

$show_kids = false;

$has_kids = false;

if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){

$jma_classes .= ' show-children';

$show_kids = true;

}

$children = get_pages('child_of='.$root_page->ID);

if( count( $children ) != 0 ){

$jma_classes .= ' has-cildren';

$has_kids = true;

}

echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' . $root_page->post_title . '</a>';

if( $show_kids && $has_kids ){

echo '<ul>';

wp_list_pages(array("child_of" => $ancestor_id, "link_before" => "", "title_li" => "", "sort_column" => "title"));

echo '</ul>';

}

echo '</li>';

}

echo '<ul>';

}

add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon');

This is the code for an accordion based on the portfolio_item post type (php):


function sidebar_portfolio_tax(){
	global $post; 
	$terms= get_the_terms($post->id, 'portfolio');
	if(is_array($terms))
		foreach($terms as $term){
			$this_term_ids[] = $term->term_id;
		}
	ob_start();
	$services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included
	echo '<div class="panel-group event-accordion" id="accordion">';
	foreach ($services as $service) {
		$args = array(
			'post_type' => 'portfolio_item',
			'tax_query' => array(
				array(
					'taxonomy' => 'portfolio',
					'field' => 'id',
					'terms' => $service->term_id
				)
			), 
			'orderby' => 'title',
			'order' => 'ASC',
			'posts_per_page' => -1
			
		);
		$x = new WP_Query($args);
		if($x->have_posts()){
			$in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category
			echo '<div class="panel">';// panel-default
			echo '<div class="">';//panel-heading
			echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">';
			echo $service->name;
			echo '</a>';
			echo '</div><!--panel-heading-->';
			echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">';
			while ( $x->have_posts() ) : $x->the_post();
					echo '<li>'; 
					echo '<a href="';
					the_permalink();
					echo '">';
					the_title();
					echo '</a>';
					echo '</li>';
			endwhile;
			wp_reset_postdata();
			echo '</ul></div><!--panel-default-->';
		}
	}
	echo '</div><!--panel-group-->';
	$x = ob_get_contents();
	ob_end_clean();
	return $x;
}

function sidebar_portfolio_tax(){

global $post;

$terms= get_the_terms($post->id, 'portfolio');

if(is_array($terms))

foreach($terms as $term){

$this_term_ids[] = $term->term_id;

}

ob_start();

$services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included

echo '<div class="panel-group event-accordion" id="accordion">';

foreach ($services as $service) {

$args = array(

'post_type' => 'portfolio_item',

'tax_query' => array(

array(

'taxonomy' => 'portfolio',

'field' => 'id',

'terms' => $service->term_id

)

'orderby' => 'title',

'order' => 'ASC',

'posts_per_page' => -1

);

$x = new WP_Query($args);

if($x->have_posts()){

$in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category

echo '<div class="panel">';// panel-default

echo '<div class="">';//panel-heading

echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">';

echo $service->name;

echo '</a>';

echo '</div>';

echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">';

while ( $x->have_posts() ) : $x->the_post();

echo '<li>';

echo '<a href="';

the_permalink();

echo '">';

the_title();

echo '</a>';

echo '</li>';

endwhile;

wp_reset_postdata();

echo '</ul></div>';

}

echo '</div>';

$x = ob_get_contents();

ob_end_clean();

return $x;

}

and the css:


.event-accordion ul {
	padding-left: 0;
	margin-bottom: 0;
}
.event-accordion ul li {
	list-style: none;
	border-bottom: solid 1px #eeeeee;
	background-color: #999999;
	text-align: right;
}
.event-accordion ul li:hover {
	background-color: #eeeeee;
}
/* optional chevron
.event-accordion ul li:after {
	font-family:'FontAwesome';
	content: "\f054";
	float: right;
	color: #97c1da;
}*/
.event-accordion .panel {
	margin: 0!important;
	border-width: 0!important;
}
.event-accordion .panel > div {
	text-align: right;
}
.event-accordion a {
	padding: 10px 20px 10px 5px;
	display: block;	
}
.event-accordion .service-cat  {
	min-height: 45px;
	background-color: #a3a3a2;
	color: #ffffff;
	background-repeat: no-repeat;
	/*border-top: solid 1px #ffffff;*/
}
.event-accordion .service-cat:hover {
	background-color: #666666;
}

.event-accordion ul {

padding-left: 0;

margin-bottom: 0;

}

.event-accordion ul li {

list-style: none;

border-bottom: solid 1px #eeeeee;

background-color: #999999;

text-align: right;

}

.event-accordion ul li:hover {

background-color: #eeeeee;

}

/* optional chevron

.event-accordion ul li:after {

font-family:'FontAwesome';

content: "\f054";

float: right;

color: #97c1da;

}*/

.event-accordion .panel {

margin: 0!important;

border-width: 0!important;

}

.event-accordion .panel > div {

text-align: right;

}

.event-accordion a {

padding: 10px 20px 10px 5px;

display: block;

}

.event-accordion .service-cat {

min-height: 45px;

background-color: #a3a3a2;

color: #ffffff;

background-repeat: no-repeat;

/*border-top: solid 1px #ffffff;*/

}

.event-accordion .service-cat:hover {

background-color: #666666;

}

If we want to create an horizontal menu instead:


function aux_menu(){
	global $post; 
	$terms= get_the_terms($post->id, 'portfolio');
	if(is_array($terms))
		foreach($terms as $term){
			$this_term_ids[] = $term->term_id;
		}
	ob_start();
	$services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>';
	echo '<div class="aux-menu clearfix "><div>';
	echo '<ul class="sf-menu sf-menu-with-fontawesome">';
	foreach ($services as $service) {
		$args = array(
			'post_type' => 'portfolio_item',
			'tax_query' => array(
				array(
					'taxonomy' => 'portfolio',
					'field' => 'id',
					'terms' => $service->term_id
				)
			), 
			'orderby' => 'title',
			'order' => 'ASC',
			'posts_per_page' => -1
			
		);
		$x = new WP_Query($args);
		if($x->have_posts()){
			$active = in_array($service->term_id, $this_term_ids)? ' current': '';
			echo '<li class="menu-item level-1 ' . $service->slug . $active . '">';
			echo '<button class="menu-btn sf-with-ul" >';
			echo $service->name;
			echo '</button>';
			echo '<ul class="sub-menu non-mega-sub-menu">';
			while ( $x->have_posts() ) : $x->the_post();
					echo '<li class="menu-item level-2">'; 
					echo '<a class="menu-btn" href="';
					the_permalink();
					echo '">';
					the_title();
					echo '</a>';
					echo '</li>';
			endwhile;
			wp_reset_postdata();
			echo '</ul><!--sub-menu-->';
			echo '</li><!--menu-item level-1-->';
		}
	}
	echo '</ul></div></div><!--aux-menu-->';
	$x = ob_get_contents();
	ob_end_clean();
	echo $x;
}

function aux_menu(){

global $post;

$terms= get_the_terms($post->id, 'portfolio');

if(is_array($terms))

foreach($terms as $term){

$this_term_ids[] = $term->term_id;

}

ob_start();

$services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>';

echo '<div class="aux-menu clearfix "><div>';

echo '<ul class="sf-menu sf-menu-with-fontawesome">';

foreach ($services as $service) {

$args = array(

'post_type' => 'portfolio_item',

'tax_query' => array(

array(

'taxonomy' => 'portfolio',

'field' => 'id',

'terms' => $service->term_id

)

'orderby' => 'title',

'order' => 'ASC',

'posts_per_page' => -1

);

$x = new WP_Query($args);

if($x->have_posts()){

$active = in_array($service->term_id, $this_term_ids)? ' current': '';

echo '<li class="menu-item level-1 ' . $service->slug . $active . '">';

echo '<button class="menu-btn sf-with-ul" >';

echo $service->name;

echo '</button>';

echo '<ul class="sub-menu non-mega-sub-menu">';

while ( $x->have_posts() ) : $x->the_post();

echo '<li class="menu-item level-2">';

echo '<a class="menu-btn" href="';

the_permalink();

echo '">';

the_title();

echo '</a>';

echo '</li>';

endwhile;

wp_reset_postdata();

echo '</ul>';

echo '</li>';

}

echo '</ul></div></div>';

$x = ob_get_contents();

ob_end_clean();

echo $x;

}

Then style it including current distinctions and going to vertical accordion […]

Add Hooks to Alyeska (all Theme Blvd themes) Pages

I love the Theme Blvd Themes. Plenty of user friendly features, like drag and drop templates and easy to use sliders. One thing I was missing was action hooks at the top and bottom of the page content. There is a themeblvd_content_top hook, but it is outside of entry-content. I wanted something closer in. Here […]

Add Light box (magnific popup) to ajax in Jumpstart

Inside the sucess function:


$('.gallery').each(function(){
                var gallery = $(this);
                gallery.addClass('themeblvd-gallery clearfix');
                gallery.find('.gallery-item a').each(function(){

                    // Account for any parameters being added to
                    // URL, like with W3 Total Cache, for example.
                    var url = this.href.split('?'),
                        url = url[0],
                        css_class = 'tb-thumb-link';

                    // Add bootstrap thumbnail class
                    if ( themeblvd.gallery_thumb_frame == 'true' ) {
                        css_class += ' thumbnail';
                    }

                    // Append lightbox and hover effect if thumb links to an image
                    if ( url.match(/\.(jpe?g|png|bmp|gif|tiff?)$/i ) ) {

                        css_class += ' image';

                        if ( themeblvd.magnific_popup == 'true' ) {
                            css_class += ' lightbox-gallery-item mfp-image image-button visible';
                        }
                    } else {
                        css_class += ' post';

                    }

                    $(this).addClass(css_class);
                });
            });

            $('.themeblvd-gallery').each(function() {
                remove_delay = 160;
                main_class = 'themeblvd-mfp-'+themeblvd.lightbox_animation;

                $(this).find('.themeblvd-lightbox').each(function(){
                    $(this).removeClass('themeblvd-lightbox').addClass('lightbox-gallery-item visible');
                });

                $(this).magnificPopup({
                    disableOn: themeblvd.lightbox_mobile_gallery,
                    delegate: 'a.lightbox-gallery-item.visible',
                    gallery: { enabled: true },
                    removalDelay: remove_delay,
                    mainClass: main_class,
                    image: {
                        cursor: null,
                    },
                    iframe: {
                        // Add bottom bar for iframes in gallery
                        markup: '<div class="mfp-iframe-scaler">'+
                        '<div class="mfp-close"></div>'+
                        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                        '<div class="mfp-bottom-bar">'+
                        '<div class="mfp-title"></div>'+
                        '<div class="mfp-counter"></div>'+
                        '</div>'+
                        '</div>'
                    },
                    callbacks: {
                        markupParse: function(template, values, item) {
                            values.title = item.el.attr('title');
                        }
                    }
                });

            });

$('.gallery').each(function(){

var gallery = $(this);

gallery.addClass('themeblvd-gallery clearfix');

gallery.find('.gallery-item a').each(function(){

// Account for any parameters being added to

// URL, like with W3 Total Cache, for example.

var url = this.href.split('?'),

url = url[0],

css_class = 'tb-thumb-link';

// Add bootstrap thumbnail class

if ( themeblvd.gallery_thumb_frame == 'true' ) {

css_class += ' thumbnail';

}

// Append lightbox and hover effect if thumb links to an image

if ( url.match(/\.(jpe?g|png|bmp|gif|tiff?)$/i ) ) {

css_class += ' image';

if ( themeblvd.magnific_popup == 'true' ) {

css_class += ' lightbox-gallery-item mfp-image image-button visible';

}

} else {

css_class += ' post';

}

$(this).addClass(css_class);

});

$('.themeblvd-gallery').each(function() {

remove_delay = 160;

main_class = 'themeblvd-mfp-'+themeblvd.lightbox_animation;

$(this).find('.themeblvd-lightbox').each(function(){

$(this).removeClass('themeblvd-lightbox').addClass('lightbox-gallery-item visible');

});

$(this).magnificPopup({

disableOn: themeblvd.lightbox_mobile_gallery,

delegate: 'a.lightbox-gallery-item.visible',

gallery: { enabled: true },

removalDelay: remove_delay,

mainClass: main_class,

image: {

cursor: null,

iframe: {

// Add bottom bar for iframes in gallery

markup: '<div class="mfp-iframe-scaler">'+

'<div class="mfp-close"></div>'+

'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+

'<div class="mfp-bottom-bar">'+

'<div class="mfp-title"></div>'+

'<div class="mfp-counter"></div>'+

'</div>'+

'</div>'

callbacks: {

markupParse: function(template, values, item) {

values.title = item.el.attr('title');

}

});

Add Prev and Next to Jumpstart

The themeblvd_content_bottom hook is not shown in documentation, but it’s there and works for this.


function jma_add_prev_next(){
	if(is_single()): ?>
	<div class="prev-next-navigation"> 
             <?php previous_post_link('%link', 'Previous Post'); ?><br /> 
             <?php next_post_link('%link', 'Next Post'); ?> 
    </div><?php  
	endif;
}
add_action('themeblvd_content_bottom', 'jma_add_prev_next');

function jma_add_prev_next(){

if(is_single()): ?>

<?php previous_post_link('%link', 'Previous Post'); ?><br />

<?php next_post_link('%link', 'Next Post'); ?>

</div><?php

endif;

}

add_action('themeblvd_content_bottom', 'jma_add_prev_next');

Back Button

A jquery back button:


jQuery(document).ready(function($){
    $('button.back').click(function(){
        parent.history.back();
        return false;
    });
});

jQuery(document).ready(function($){

$('button.back').click(function(){

parent.history.back();

return false;

});

Your html would be:


<button class="back">Back</button>

Plus whatever css you want to use to style the button.

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;
}

.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;

}


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' );

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' );

1 2 3 ›»