Code

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

}

});


function jma_child_post_meta($setup)
{
    $setup['config']['screen'][] =  'personnel';
    return $setup;
}
add_filter('themeblvd_post_meta', 'jma_child_post_meta');

function jma_child_post_meta($setup)

{

$setup['config']['screen'][] = 'personnel';

return $setup;

}

add_filter('themeblvd_post_meta', 'jma_child_post_meta');

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


/*
 * When the post is saved, saves our custom data.
 *
 * @param int $post_id The ID of the post being saved.
 */

 /*
  * Adds a box to the main column on the Post and Page edit screens.
  */

function jma_add_linkedin_input_box()
{
    $screens = array('volunteer');
    foreach ($screens as $screen) {
        add_meta_box(
             'jma_linkedin_input_section',
             __('Linkedin address', 'jma_textdomain'),
             'jma_linkedin_input_box',
             $screen,
             'normal',
             'high'
         );
    }
}

add_action('add_meta_boxes', 'jma_add_linkedin_input_box');

 /*
  * Prints the box content.
  *
  * @param WP_Post $post The object for the current post/page.
  */

function jma_linkedin_input_box($post)
{
    // Add an nonce field so we can check for it later.
    wp_nonce_field('jma_linkedin_input_box', 'jma_linkedin_input_box_nonce');

    /*
     * Use get_post_meta() to retrieve an existing value
     * from the database and use the value for the form.
     */
    $linkedin_values = array();
    if (get_post_meta($post->ID, '_jma_linkedin_data_key', true)) {
        $linkedin_values = get_post_meta($post->ID, '_jma_linkedin_data_key', true);
    }
    $linkedin_html = isset($linkedin_values['linkedin_text'])? $linkedin_values['linkedin_text']:'';
    echo '<p></p>';

    echo '<label for="linkedin_text">';
    _e('linkedin address.', 'jma_textdomain');
    echo '</label><br/>';
    echo '<input name="linkedin_text" size="80" type="text" value="'.$linkedin_html.'"/>';
}


function jma_save_linkedin_postdata($post_id)
{
    /*
     * We need to verify this came from the our screen and with proper authorization,
     * because save_post can be triggered at other times.
     */

    // Check if our nonce is set.
    if (!isset($_POST['jma_linkedin_input_box_nonce'])) {
        return $post_id;
    }

    $nonce = $_POST['jma_linkedin_input_box_nonce'];

    // Verify that the nonce is valid.
    if (!wp_verify_nonce($nonce, 'jma_linkedin_input_box')) {
        return $post_id;
    }

    // If this is an autosave, our form has not been submitted, so we don't want to do anything.
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return $post_id;
    }

    // Check the user's permissions.
    if ('page' === $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id)) {
            return $post_id;
        }
    } else {
        if (!current_user_can('edit_post', $post_id)) {
            return $post_id;
        }
    }

    /* OK, its safe for us to save the data now. */

    // Sanitize user input.
    $jma_data['linkedin_text'] = sanitize_text_field($_POST['linkedin_text']);

    // Update the meta field in the database.
    update_post_meta($post_id, '_jma_linkedin_data_key', $jma_data);
}

add_action('save_post', 'jma_save_linkedin_postdata');

100

101

102

* When the post is saved, saves our custom data.

* @param int $post_id The ID of the post being saved.

* Adds a box to the main column on the Post and Page edit screens.

function jma_add_linkedin_input_box()

{

$screens = array('volunteer');

foreach ($screens as $screen) {

add_meta_box(

'jma_linkedin_input_section',

__('Linkedin address', 'jma_textdomain'),

'jma_linkedin_input_box',

$screen,

'normal',

'high'

);

}

add_action('add_meta_boxes', 'jma_add_linkedin_input_box');

* Prints the box content.

* @param WP_Post $post The object for the current post/page.

function jma_linkedin_input_box($post)

{

// Add an nonce field so we can check for it later.

wp_nonce_field('jma_linkedin_input_box', 'jma_linkedin_input_box_nonce');

* Use get_post_meta() to retrieve an existing value

* from the database and use the value for the form.

$linkedin_values = array();

if (get_post_meta($post->ID, '_jma_linkedin_data_key', true)) {

$linkedin_values = get_post_meta($post->ID, '_jma_linkedin_data_key', true);

}

$linkedin_html = isset($linkedin_values['linkedin_text'])? $linkedin_values['linkedin_text']:'';

echo '<p></p>';

echo '<label for="linkedin_text">';

_e('linkedin address.', 'jma_textdomain');

echo '</label><br/>';

echo '<input name="linkedin_text" size="80" type="text" value="'.$linkedin_html.'"/>';

}

function jma_save_linkedin_postdata($post_id)

{

* We need to verify this came from the our screen and with proper authorization,

* because save_post can be triggered at other times.

// Check if our nonce is set.

if (!isset($_POST['jma_linkedin_input_box_nonce'])) {

return $post_id;

}

$nonce = $_POST['jma_linkedin_input_box_nonce'];

// Verify that the nonce is valid.

if (!wp_verify_nonce($nonce, 'jma_linkedin_input_box')) {

return $post_id;

}

// If this is an autosave, our form has not been submitted, so we don't want to do anything.

if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {

return $post_id;

}

// Check the user's permissions.

if ('page' === $_POST['post_type']) {

if (!current_user_can('edit_page', $post_id)) {

return $post_id;

}

} else {

if (!current_user_can('edit_post', $post_id)) {

return $post_id;

}

/* OK, its safe for us to save the data now. */

// Sanitize user input.

$jma_data['linkedin_text'] = sanitize_text_field($_POST['linkedin_text']);

// Update the meta field in the database.

update_post_meta($post_id, '_jma_linkedin_data_key', $jma_data);

}

add_action('save_post', 'jma_save_linkedin_postdata');

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.

1 2 3 ›»

Code

100% Height Sidebar

Accordion Sidebar Menu

Add Hooks to Alyeska (all Theme Blvd themes) Pages

Add Light box (magnific popup) to ajax in Jumpstart

Add Post Options to Custom Post Type

Add Prev and Next to Jumpstart

Add simple meta box(s)

Back Button