[sermon_sort_field] Individual Lists

(@lukedahlenburg)

I’ve been playing with various parts of the code so that I can have individual shortcodes to display the sermon sort fields (book, preacher and series) and I’ve come up with the following. I’m not expert, but a copy and paste from the code below should do the trick. I’m sure there’s a better way to do this tho. Feel free to correct my code.

It’s made using Bootstrap with some css changes for the styling and dropdown.

Here’s the steps…

1) Add the following to your functions.php file. This creates the individual shortcodes for the sermon series, preacher and book as well as styles them.

// Added styles to sermon series lists

// List all series
add_shortcode('list_sermonsx', 'wpfc_list_sermonsx_shortcode'); //preferred markup
add_shortcode('list-sermonsx', 'wpfc_list_sermonsx_shortcode'); //left for compatibility
function wpfc_list_sermonsx_shortcode( $atts = array () ){
	extract( shortcode_atts( array(
		'tax' => 'wpfc_sermon_series', // options: wpfc_sermon_series, wpfc_preacher, wpfc_sermon_topics, wpfc_bible_book
		'order' => 'ASC', // options: DESC
		'orderby' => 'name', // options: id, count, name, slug, term_group, none
	), $atts ) );

	$terms = get_terms($tax);
 $count = count($terms);
 if ( $count > 0 ){
     $list = '<div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-chevron-right rotate"></i>Series<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">';
     foreach ( $terms as $term ) {
       $list .= '
<li><a>taxonomy ) ) . '" title="' . $term->name . '">' . $term->name . '</a></li>
';
     }
     $list .= '</div></div>';
	 return $list;
 }
}

// List all preacher
add_shortcode('list_preacherx', 'wpfc_list_preacherx_shortcode'); //preferred markup
add_shortcode('list-preacherx', 'wpfc_list_preacherx_shortcode'); //left for compatibility
function wpfc_list_preacherx_shortcode( $atts = array () ){
	extract( shortcode_atts( array(
		'tax' => 'wpfc_preacher', // options: wpfc_sermon_series, wpfc_preacher, wpfc_sermon_topics, wpfc_bible_book
		'order' => 'ASC', // options: DESC
		'orderby' => 'name', // options: id, count, name, slug, term_group, none
	), $atts ) );

	$terms = get_terms($tax);
 $count = count($terms);
 if ( $count > 0 ){
     $list = '<div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-chevron-right rotate"></i>Preacher<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">';
     foreach ( $terms as $term ) {
       $list .= '
<li><a>taxonomy ) ) . '" title="' . $term->name . '">' . $term->name . '</a></li>
';
     }
     $list .= '</div></div>';
	 return $list;
 }
}

// List all book
add_shortcode('list_bible_bookx', 'wpfc_list_bible_bookx_shortcode'); //preferred markup
add_shortcode('list-bible-bookx', 'wpfc_list_bible_bookx_shortcode'); //left for compatibility
function wpfc_list_bible_bookx_shortcode( $atts = array () ){
	extract( shortcode_atts( array(
		'tax' => 'wpfc_bible_book', // options: wpfc_sermon_series, wpfc_preacher, wpfc_sermon_topics, wpfc_bible_book
		'order' => 'ASC', // options: DESC
		'orderby' => 'name', // options: id, count, name, slug, term_group, none
	), $atts ) );

	$terms = get_terms($tax);
 $count = count($terms);
 if ( $count > 0 ){
     $list = '
      <div class="input-group-btn">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-chevron-right rotate"></i>Book</button>
        <ul class="dropdown-menu" role="menu">';
     foreach ( $terms as $term ) {
       $list .= '
<li><a>taxonomy ) ) . '" title="' . $term->name . '">' . $term->name . '</a></li>
';
     }
     $list .= '</div>';
	 return $list;
 }
}

2) Add the following css to make it look fancy. Stick it in your style.css or wherever you want. Note: You’ll need the chevron-right.png. I used Glyphicons. Brilliant. You should too. The reason i’m using the right one and then rotating it is to simply reduce images on the site. This is the only place that I need it to face down.

/* Dropdown nav for filters. Hacked Bootstrap for this */
.btn {
	color: #555;
	padding: 10px;
	font-size: 16px;
	text-align:left;
	width: 80%;
	background: #fff;
	display: block;
	border: 1px solid #e5e5e5;
	margin: 0 0 -1px !important;

   -webkit-transition: all .2s ease-in-o55ut;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;

	-moz-border-radius: 0px !important;
   -webkit-border-radius: 0px !important;
   -khtml-border-radius: 0px !important;
   border-radius: 0px !important;

}

.rotate {
	-ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

[class^="icon-"], [class*=" icon-"] {
 display: inline-block;
 margin-top: 1px;
 *margin-right: .3em;
 line-height: 14px;
 vertical-align: text-top;
 background-repeat: no-repeat;
}
.icon-chevron-right {
	width: 25px;
	height: 22px;
	float: right;
	margin-top: 2px;
	margin-right: -6px;
	opacity: .25;
	background: url('img/chevron-right.png');
}

.dropdown-menu {
	font-size: 16px;
	border: 1px solid #e5e5e5;
	border-top:none;
	background: #fff;
	list-style-type: none;
	width: 76%;
	z-index: 100;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;

    padding: 5px;
    margin-top:-1px;
    text-align: left;
    list-style: none;
    background-color: #fff;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px;
    clear: both;
    white-space: nowrap
}

.dropdown-menu>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5
}

.open>.dropdown-menu {
    display: block
}

.dropdown-menu-right {
    right: 0;
    left: auto
}

.dropdown-menu-left {
    right: auto;
    left: 0
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    float: left
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
	margin-bottom:1em;
}

select.input-group-sm>.form-control, select.input-group-sm>.input-group-addon,
select.input-group-sm>.input-group-btn>.btn {
    height: 30px;
    line-height: 30px
}

select[multiple].input-group-sm>.form-control, select[multiple].input-group-sm>.input-group-addon,
select[multiple].input-group-sm>.input-group-btn>.btn, textarea.input-group-sm>.form-control,
textarea.input-group-sm>.input-group-addon, textarea.input-group-sm>.input-group-btn>.btn {
    height: auto
}

.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell
}

.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle
}

.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap
}

.input-group-btn>.btn {
    position: relative
}

.input-group-btn>.btn+.btn {
    margin-left: -1px
}

3) Add the Bootstrap tabs js. I use the one hosted at maxcdn. I’ve placed mine in: archive-wpfc_sermon.php as I only need it for this part of the site. Probably not best practice. Perhaps footer.php would be best. Haven’t tried that.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

4) Finally, use the shortcodes where you want to show it. You can place it directly into the html, as I’ve done, by doing the following. No reason, that’s just the way I’ve setup the file. Mostly due to learning as I go.

<?php echo do_shortcode('[list-sermonsx]'); ?>
<?php echo do_shortcode('[list-preacherx]'); ?>
<?php echo do_shortcode('[list-bible-bookx]'); ?>

That should be it. I’ve tried it on two sites and It works fine, but I may have missed something. I’m sure that all you find folks will let me know where I’ve gone wrong! If you want to see a live example head to: churchatpv.org.au/sermons

https://ww.wp.xz.cn/plugins/sermon-manager-for-wordpress/

The topic ‘[sermon_sort_field] Individual Lists’ is closed to new replies.