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

            });

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

$('.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');

}

});

Detect Shortcode


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

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:


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

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


<div class="whatever"> for [html class="whatever"] and </div> for [/html]

0

1

2

<div class="whatever"> for [html class="whatever"] and </div> for [/html]

. the html:


[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]

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]

[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]

[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):


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

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 {

}

.image-pinwheel .row:first-child .inner.left {

}

.image-pinwheel .inner.right {

}

.image-pinwheel .row:first-child .inner.right {

}

@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:


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

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

[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:


.new-pinwheel {
    background-color: #ffffff;
    background-position: 50% 47%;
	background-image: url('https://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;
}
}

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-color: #ffcd00

}

/* top left */

.new-pinwheel .row:first-child .inner.left {

background-color: #4271a1;

}

/* bottom right */

.new-pinwheel .inner.right {

background-color: #ff3399;

}

/* top right */

.new-pinwheel .row:first-child .inner.right {

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:


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

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></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:


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

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:


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

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)


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

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 […]

Shortcode for Themeblvd Floating Widget Area

On the edit page enter: [jma_widget id=my-id] get the id (which is “slug-like”) from the Widget Areas Page.


function jma_widget($atts){
	ob_start();    
	$x = '';
	extract( shortcode_atts( array(
		'id' => '',
		), $atts ) ); 
	echo themeblvd_widgets($id);
	$x = ob_get_contents();
	ob_end_clean();
	return str_replace("\r\n", '', $x);
}
add_shortcode('jma_widget','jma_widget');

0

1

2

3

4

5

6

7

8

9

10

11

12

13

function jma_widget($atts){

ob_start();

$x = '';

extract( shortcode_atts( array(

'id' => '',

), $atts ) );

echo themeblvd_widgets($id);

$x = ob_get_contents();

ob_end_clean();

return str_replace("\r\n", '', $x);

}

add_shortcode('jma_widget','jma_widget');

Add to text edit screen.


function jma_quicktags() {
	
	if (wp_script_is('quicktags')){ ?>
		<script language="javascript" type="text/javascript">

		QTags.addButton( 'JMA_widget', 'widget', '[jma_widget id=my_id]', '' );
	    </script>
<?php }
}
add_action('admin_print_footer_scripts','jma_quicktags');

0

1

2

3

4

5

6

7

8

9

10

11

function jma_quicktags() {

if (wp_script_is('quicktags')){ ?>

QTags.addButton( 'JMA_widget', 'widget', '[jma_widget id=my_id]', '' );

</script>

<?php }

}

add_action('admin_print_footer_scripts','jma_quicktags');

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.


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

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


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

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:


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

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

[…]