0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | if(!function_exists('jma_yt_detect_shortcode')){ function jma_yt_detect_shortcode( $needle = '', $post_item = 0 ){ if($post_item){ if(is_object($post_item)) $post = $post_item; else $post = get_post($post_item); }else{ global $post; } if(is_array($needle)) $pattern = get_shortcode_regex($needle); elseif(is_string($needle)) $pattern = get_shortcode_regex(array($needle)); else $pattern = get_shortcode_regex(); preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches ); if(//if shortcode(s) to be searched for were passed and not found $return false array_key_exists( 2, $matches ) && count( $matches[2] ) ){ $return = $matches; }else{ $return = false; } return $return; } } |
Left Tabs with Flyouts
Set shortcode (bootstrap) to pills:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | .tabs-left .tb-tabs-framed .tab-content { border-top-width: 1px; margin-left: 149px; } .tabs-left .nav-tabs, .tabs-left .nav-pills { width: 150px; float: left; } .tabs-left .nav-tabs>li, .tabs-left .nav-pills>li { border-left-width: 1px; float: none; border-top: solid 1px #ffffff; } .tabs-left .nav-pills>li { width: 110px; margin-left: 0; position: relative; -webkit-transition: width 0.3s; /* Safari */ transition: width 0.3s; } .tabs-left .nav-pills>li.active { width: 140px; } .tabs-left .nav-pills>li.active:after { content:''; right:-25px; top:0; position: absolute; width: 0; height: 0; border-style: solid; border-width: 22px 0 22px 25px; border-color: transparent transparent transparent #207298; } .tabs-left .nav-pills>li>a { border-radius: 0; background:#f3c235; color:#111111; } .tabs-left .nav-pills>li.active > a { background:#207398; color: #ffffff; } .tabs-left .tab-pane td , .tabs-left .tab-pane th { padding: 3px } |
Pinwheel Image
The markup (using Jumpstart shortcode for bootstrap elements and putting over bg image in the builder) substitute
0 1 2 | <div class="whatever"> for [html class="whatever"] and </div> for [/html] |
. the html:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | [raw] [column size="5/12" wpautop="false"] [html class="inner left"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="1/6" wpautop="true"] <!--Column 2...--> [/column] [column size="5/12" wpautop="false"] [html class="inner right"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="5/12" wpautop="false"] [html class="inner left"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="1/6" wpautop="true"] <!--Column 2...--> [/column] [column size="5/12" wpautop="false"] [html class="inner right"]This is an example page. It's different from a blog post because it wil[/html] [/column] [/raw] |
the css (add bg images for each spoke):
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | #custom-main > .image-pinwheel { background-color: #ffffff; background-position: 50% 15%; } .image-pinwheel .inner { border-top: solid 1px #999999; padding: 15px; padding-left: 60px; position:relative; background-position: left 15px; background-repeat: no-repeat; } .image-pinwheel .inner.left { background-image: url('./images/bottom-left-pinwheel.png'); } .image-pinwheel .row:first-child .inner.left { background-image: url('./images/top-left-pinwheel.png'); } .image-pinwheel .inner.right { background-image: url('./images/bottom-right-pinwheel.png'); } .image-pinwheel .row:first-child .inner.right { background-image: url('./images/top-right-pinwheel.png'); } @media(min-width:768px){ .image-pinwheel .inner { width: 80%; min-height: 200px; } .image-pinwheel .inner.left { margin-left: 20px; margin-top: 20px; float: left; } .image-pinwheel .row:first-child .inner.left { margin-left: 0; } .image-pinwheel .inner.right { float: right; } .image-pinwheel .row:first-child .inner.right { margin-right: 20px; } .image-pinwheel .inner:after { content: ''; position: absolute; width: 30px; height: 1px; border-top: solid 1px #999999; } .image-pinwheel .row .left.inner:after { top: -11px; right: -25px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .image-pinwheel .row:first-child .left.inner:after { top: 11px; right: -25px; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .image-pinwheel .row .right.inner:after { top: -11px; left: -25px; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .image-pinwheel .row:first-child .right.inner:after { top: 11px; left: -25px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } } |
Second Option html:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="new-pinwheel"> [raw] [column size="1/2" wpautop="false"] [html class="inner left"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="1/2" wpautop="false"] [html class="inner right"]This is an example page. It's different from a blog post because it wil[/html] [/column] [html class="spacer"][/html] [column size="1/2" wpautop="false"] [html class="inner left"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="1/2" wpautop="false"] [html class="inner right"]This is an example page. It's different from a blog post because it wil[/html] [/column] [/raw] </div> |
css:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | .new-pinwheel { background-color: #ffffff; background-position: 50% 47%; background-image: url('http://narcissistabusesupport.com/wp-content/uploads/2016/06/frontpage-heart-300x262.png'); background-repeat: no-repeat; } .new-pinwheel .inner { color: #ffffff; padding: 15px; padding-left: 60px; position:relative; background-position: left 15px; background-repeat: no-repeat; } /* bottom left */ .new-pinwheel .inner.left { background-image: url('./images/bottom-left-pinwheel.png'); background-color: #ffcd00 } /* top left */ .new-pinwheel .row:first-child .inner.left { background-image: url('./images/top-left-pinwheel.png'); background-color: #4271a1; } /* bottom right */ .new-pinwheel .inner.right { background-image: url('./images/bottom-right-pinwheel.png'); background-color: #ff3399; } /* top right */ .new-pinwheel .row:first-child .inner.right { background-image: url('./images/top-right-pinwheel.png'); background-color: #97cf00; } @media(min-width:768px){ .new-pinwheel .inner { width: 65%; min-height: 200px; } .new-pinwheel .row { margin-left: 0; margin-right: 0; } .new-pinwheel .row > div { padding: 0 } .new-pinwheel .spacer { min-height: 100px; } /* bottom */ .new-pinwheel .inner { float: left; } /* top */ .new-pinwheel .row:first-child .inner { float: right; } /* right */ .new-pinwheel .row .inner.right { margin-top: 100px; } .new-pinwheel .inner:after { content: ''; position: absolute; border-style: solid; width: 0; height: 0; } /* bottom left */ .new-pinwheel .row .left.inner:after { top: 0; right: -20px; border-width: 40px 20px 0 0; border-color: #ffcd00 transparent transparent transparent; } /* top left */ .new-pinwheel .row:first-child .left.inner:after { bottom: -20px; top: auto; right: 0; border-width: 0 40px 20px 0; border-color: transparent #4271a1 transparent transparent; } /* bottom right */ .new-pinwheel .row .right.inner:after { top: -20px; left: 0; border-width: 20px 0 0 40px; border-color: transparent transparent transparent #ff3399; } /* top right */ .new-pinwheel .row:first-child .right.inner:after { top: auto; bottom: 0; left: -20px; border-width: 0 0 40px 20px; border-color: transparent transparent #97cf00 transparent; } } |
Nivo Slider From ACF Gallery
Use this to create the html for the slider:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | function jma_nivo($input = array() ){ $defaults = array( 'class' => '', 'acf_field' => 'gallery', 'image_size' => 'tb_grid', 'thumb_size' => 'tb_thumb', 'post_id' => '', 'image_ids' => '', ); foreach($defaults as $var => $default){ $args[$var] = isset($input[$var]) && $input[$var]? $input[$var]: $default; } extract($args); if(!$post_id){ global $post; $post_id = $post->ID; } $return = ''; if($image_ids || $acf_field){ $return = '<div class="jma-port-slider">'; $return .= '<div class="jma_nivo ' . $class . ' metaslider metaslider-nivo ml-slider" style="overflow: hidden">'; if($image_ids) $image_ids = explode(',', $image_ids); else $image_ids = get_field($acf_field, $post_id, false); if($image_ids){ foreach($image_ids as $image_id){ $image_attributes = wp_get_attachment_image_src( $image_id, $image_size ); $thumb_attributes = wp_get_attachment_image_src( $image_id, $thumb_size ); if($image_attributes) $return .= '<img src="' . $image_attributes[0] . '" data-thumb="' . $thumb_attributes[0] . '" />'; } } $return .= '</div><!--jma-nivo--></div>'; } return $return; } |
then this for shortcode (notice you can add the params to the shortcode directly). image ids will over-write gallery id and show the images directly:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function nivo_slider($atts){ ob_start(); $x = ''; extract( shortcode_atts( array( 'class' => '', 'acf_field' => 'gallery', 'image_size' => 'tb_grid', 'thumb_size' => 'tb_thumb', 'post_id' => '', 'image_ids' => '', ), $atts ) ); echo jma_nivo(array( 'class'=> $class, 'acf_field'=> $acf_field, 'image_size'=> $image_size, 'thumb_size' => $thumb_size, 'post_id'=> $post_id, 'image_ids' => $image_ids, )); $x = ob_get_contents(); ob_end_clean(); return str_replace("\r\n", '', $x); } add_shortcode('nivo_slider','nivo_slider'); |
or this to add to content:
0 1 2 3 4 5 6 7 8 9 10 11 12 | function jma_nivo_slider_content($content){ $new = jma_nivo(array('class'=> 'new')); return $content . $new; } function jma_site_filters_hooks(){ if(is_singular('portfolio_item') ){ add_filter('the_content', 'jma_nivo_slider_content'); } } add_action('template_redirect', 'jma_site_filters_hooks'); |
and this to add the files for nivo slider (http://www.jqueryscript.net/slider/nivo-slider.html)
0 1 2 3 4 5 6 7 | function jma_nivo_files() { wp_enqueue_style( 'include_nivo_css', plugins_url('/nivo-slider.css', __FILE__) ); wp_enqueue_script( 'include_nivo_js', plugins_url('/jquery.nivo.slider.js', __FILE__), array( 'jquery' ) ); wp_enqueue_script( 'jma_nivo_js', plugins_url('/jma_meta_js.js', __FILE__), array( 'jquery', 'include_nivo_js' ) ); } add_action( 'wp_enqueue_scripts', 'jma_nivo_files' ); |
and […]
Grid of Taxonomies
Some options to add a grid of taxonomy pages. The first doesn’t include pageing the second requires adding a second post type to hold the pages.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | // no pageing with this one function jma_series_grid ($atts){ ob_start(); extract( shortcode_atts( array( ), $atts ) ); $series_array = get_terms( 'series' ); foreach ($series_array as $series) {//get values from add fields to tax plugin $series_im_array = get_tax_meta($series->term_id,'image_field_id'); $series_text = get_tax_meta($series->term_id,'wysiwyg_field_id'); $series_date = get_tax_meta($series->term_id,'date_field_ids'); echo '<div class="grid-item col-sm-4 series-grid-item">'; echo '<a href="'; echo get_term_link( $series, 'series' ); echo '">'; echo wp_get_attachment_image( $series_im_array['id'], 'tb_grid'); echo '</a>'; echo '<h3 class="news-title"><a href="'; echo get_term_link( $series, 'series' ); echo '">'; echo $series->name; echo '</a></h3>'; echo '</div>'; } // Reset the global $the_post as this query will have stomped on it wp_reset_postdata(); $x = ob_get_contents(); ob_end_clean(); return $x; } add_shortcode('series_grid', 'jma_series_grid'); function jma_new_series_grid ($atts){ ob_start(); extract( shortcode_atts( array( 'post_type' => 'series_page',//default post type 'tax' => false,//a comma seperated list of taxonomies ), $atts ) ); if($tax){ $tax = explode(',', $tax); $tax_query = array( array( 'taxonomy' => $post_type, 'field' => 'term_id', 'terms' => $tax, ), ); }else{ $tax_query =null; } $args = array( 'post_type' => $post_type, 'tax_query' => $tax_query[0], 'orderby' => 'name', 'order' => 'ASC', 'posts_per_page' => 2 ); if ( get_query_var('paged') ) {//for pageing $args['paged'] = get_query_var('paged'); } else if ( get_query_var('page') ) { $args['paged'] = get_query_var('page'); } else { $args['paged'] = 1; } $the_query = new WP_Query( $args ); // The Loop if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); echo '<div class="grid-item col-sm-4 series-grid-item">'; echo '<a href="'; echo the_permalink(); echo '">'; echo the_post_thumbnail( 'tb_grid'); echo '</a>'; echo '<h3 class="news-title"><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>'; echo '</div>'; } echo '<div class="clear"></div>'; echo themeblvd_pagination( $the_query->max_num_pages ); $x = ob_get_contents(); ob_end_clean(); return $x; } else { echo 'sorry no results';// no posts found } /* Restore original Post Data */ wp_reset_postdata(); } add_shortcode('new_series_grid', 'jma_new_series_grid'); |
WooCommerce MiniCart
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | //shortcode for mini-cart function jma_woo_minicart($atts){ ob_start(); global $woocommerce; echo '<a class="cart-contents" href="' . ' $woocommerce->cart->get_cart_url()' . '" title="View your shopping cart">'; echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count) . ' - ' . $woocommerce->cart->get_cart_total() . '</a>'; $x = ob_get_contents(); ob_end_clean(); return $x; } add_shortcode('jma_woo_minicart','jma_woo_minicart'); // Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php) function woocommerce_header_add_to_cart_fragment( $fragments ) { global $woocommerce; ob_start(); ?> <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a> <?php $fragments['a.cart-contents'] = ob_get_clean(); return $fragments; } add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment'); |
Versatile html Shortcode Wrapper
Sometimes as I code a page I find it necessary to use some specific html to get the job done. the problem is that when I hand the site over to the client and they start editing in the Visual editor there is a danger that they will inadvertently over-write my html (which isn’t visible […]
Display Posts by Category [shortcode]
Suppose we want to display a list of post links in the sidebar that are in “child” categories of the “News” category (ie “Boating News” followed by its posts, “Fishing News” followed by its posts, in this case from the last 90 days because of the filter). We could include this code in functions.php:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | add_filter('widget_text', 'do_shortcode');//FOR WIDGET SHORTCODE function filter_where($where = '') { //posts in the last 90 days $where .= " AND post_date > '" . date('Y-m-d', strtotime('-90 days')) . "'"; return $where; } function jma_news_posts($atts){ ob_start(); extract( shortcode_atts( array( 'parent_cat_id' => 3, 'number_displayed' => 3, ), $atts ) ); add_filter('posts_where', 'filter_where'); $children = get_categories( array('child_of' => $parent_cat_id) ); foreach ($children as $child) { echo '<h3 class="news-title"><a href="'; echo get_category_link( $child->cat_ID ); echo '">'; echo $child->cat_name; echo '</a></h3>'; $x = new WP_Query('category_name=' . $child->slug . '&posts_per_page=' . $number_displayed); echo '<ul class="news-bar">'; while ( $x->have_posts() ) : $x->the_post(); echo '<li class="sidebar-recent-posts">'; echo '<a class="side-post-title" href="'; the_permalink(); echo '">'; the_title(); echo '</a></li>'; endwhile; echo '</ul>'; } // Reset the global $the_post as this query will have stomped on it wp_reset_postdata(); $x = ob_get_contents(); ob_end_clean(); return $x; } add_shortcode('add_news_with_kids','jma_news_posts'); |
[…]