CPT Bootstrap Carousel - Version 1.0

Version Description

  • Initial release
Download this release

Release Info

Developer tallphil
Plugin Icon 128x128 CPT Bootstrap Carousel
Version 1.0
Comparing to
See all releases

Version 1.0

Files changed (2) hide show
  1. cpt-bootstrap-carousel.php +130 -0
  2. readme.txt +55 -0
cpt-bootstrap-carousel.php ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /*
3
+ Plugin Name: CPT Bootstrap Carousel
4
+ Plugin URI: http://www.tallphil.co.uk/bootstrap-carousel
5
+ Description: A custom post type for choosing images and content which outputs <a href="http://twitter.github.io/bootstrap/javascript.html#carousel" target="_blank">Bootstrap Carousel</a> from a shortcode. Requires Bootstrap javascript and CSS to be loaded separately.
6
+ Version: 1.0
7
+ Author: Phil Ewels
8
+ Author URI: http://phil.ewels.co.uk
9
+ License: GPLv2
10
+ */
11
+
12
+ // Custom Post Type Setup
13
+ add_action( 'init', 'cptbc_post_type' );
14
+ function cptbc_post_type() {
15
+ $labels = array(
16
+ 'name' => 'Carousel Images',
17
+ 'singular_name' => 'Carousel Image',
18
+ 'add_new' => 'Add New',
19
+ 'add_new_item' => 'Add New Carousel Image',
20
+ 'edit_item' => 'Edit Carousel Image',
21
+ 'new_item' => 'New Carousel Image',
22
+ 'view_item' => 'View Carousel Image',
23
+ 'search_items' => 'Search Carousel Images',
24
+ 'not_found' => 'No Carousel Image',
25
+ 'not_found_in_trash' => 'No Carousel Images found in Trash',
26
+ 'parent_item_colon' => '',
27
+ 'menu_name' => 'Carousel'
28
+ );
29
+ $args = array(
30
+ 'labels' => $labels,
31
+ 'public' => true,
32
+ 'exclude_from_search' => true,
33
+ 'publicly_queryable' => false,
34
+ 'show_ui' => true,
35
+ 'show_in_menu' => true,
36
+ 'query_var' => true,
37
+ 'rewrite' => true,
38
+ 'capability_type' => 'page',
39
+ 'has_archive' => true,
40
+ 'hierarchical' => false,
41
+ 'menu_position' => 21,
42
+ 'supports' => array('title','excerpt','thumbnail', 'page-attributes')
43
+ );
44
+ register_post_type('cptbc', $args);
45
+ }
46
+
47
+
48
+ // Add theme support for featured images if not already present
49
+ // http://wordpress.stackexchange.com/questions/23839/using-add-theme-support-inside-a-plugin
50
+ function cptbc_addFeaturedImageSupport() {
51
+ $supportedTypes = get_theme_support( 'post-thumbnails' );
52
+ if( $supportedTypes === false )
53
+ add_theme_support( 'post-thumbnails', array( 'cptbc' ) );
54
+ elseif( is_array( $supportedTypes ) ) {
55
+ $supportedTypes[0][] = 'cptbc';
56
+ add_theme_support( 'post-thumbnails', $supportedTypes[0] );
57
+ }
58
+ }
59
+ add_action( 'after_setup_theme', 'cptbc_addFeaturedImageSupport');
60
+
61
+ // FRONT END
62
+
63
+ // Shortcode
64
+ function cptbc_shortcode($atts) {
65
+ $atts = (array) $atts;
66
+ return cptbc_frontend($atts);
67
+ }
68
+ add_shortcode('image-carousel', 'cptbc_shortcode');
69
+
70
+ // Display latest WftC
71
+ function cptbc_frontend($atts){
72
+ $id = rand(0, 999); // use a random ID so that the CSS IDs work with multiple on one page
73
+ $args = array( 'post_type' => 'cptbc', 'orderby' => 'menu_order', 'order' => 'ASC');
74
+ $loop = new WP_Query( $args );
75
+ $images = array();
76
+ while ( $loop->have_posts() ) {
77
+ $loop->the_post();
78
+ if ( '' != get_the_post_thumbnail() ) {
79
+ $title = get_the_title();
80
+ $content = get_the_excerpt();
81
+ $image = get_the_post_thumbnail( get_the_ID(), 'full' );
82
+ $images[] = array('title' => $title, 'content' => $content, 'image' => $image);
83
+ }
84
+ }
85
+ if(count($images) > 0){
86
+ ob_start();
87
+ ?>
88
+ <div id="cptbc_<?php echo $id; ?>" class="carousel slide">
89
+ <ol class="carousel-indicators">
90
+ <?php foreach ($images as $key => $image) { ?>
91
+ <li data-target="#cptbc_<?php echo $id; ?>" data-slide-to="<?php echo $key; ?>" <?php echo $key == 0 ? 'class="active"' : ''; ?>></li>
92
+ <?php } ?>
93
+ </ol>
94
+ <div class="carousel-inner">
95
+ <?php foreach ($images as $key => $image) { ?>
96
+ <div class="item <?php echo $key == 0 ? 'active' : ''; ?>">
97
+ <?php echo $image['image']; ?>
98
+ <div class="carousel-caption">
99
+ <h4><?php echo $image['title']; ?></h4>
100
+ <p><?php echo $image['content']; ?></p>
101
+ </div>
102
+ </div>
103
+ <?php } ?>
104
+ </div>
105
+ <a class="left carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="prev">‹</a>
106
+ <a class="right carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="next">›</a>
107
+ </div>
108
+ <?php }
109
+ $output = ob_get_contents();
110
+ ob_end_clean();
111
+
112
+ // Restore original Post Data
113
+ wp_reset_postdata();
114
+
115
+ return $output;
116
+ }
117
+
118
+ // Call the carousel in javascript, else it won't start scrolling on its own
119
+ function cptbc_footer_js() {
120
+ ?>
121
+ <script type="text/javascript">
122
+ jQuery(function(){
123
+ jQuery('.carousel').carousel()
124
+ });
125
+ </script>
126
+ <?php
127
+ }
128
+ add_action('wp_footer', 'cptbc_footer_js');
129
+
130
+ ?>
readme.txt ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === CPT Bootstrap Carousel ===
2
+ Contributors: tallphil
3
+ Donate Link: http://phil.ewels.co.uk
4
+ Tags: carousel, slider, image, bootstrap
5
+ Requires at least: 3.0.1
6
+ Tested up to: 3.5.1
7
+ Stable tag: 1.0
8
+ License: GPLv2 or later
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ A custom post type for choosing images and content which outputs Bootstrap Image Carousel (slider) from the [image-carousel] shortcode.
12
+
13
+ == Description ==
14
+
15
+ A custom post type for choosing images and content which outputs a [carousel](http://twitter.github.io/bootstrap/javascript.html#carousel) from [Twitter Bootstrap](http://www.getbootstrap.com) using the shortcode `[image-carousel]`.
16
+
17
+ The plugin assumes that you're already using Bootstrap, so you need to load the Bootstrap javascript and CSS separately.
18
+
19
+ * [Download Twitter Bootstrap](http://twitter.github.io/bootstrap/index.html)
20
+ * [Bootstrap WordPress Theme](http://320press.com/wpbs/)
21
+ * [Bootstrap CDN](http://www.bootstrapcdn.com/) _(hotlink CSS and javascript files)_
22
+ * [Bootstrap Carousel in action](http://twitter.github.io/bootstrap/examples/carousel.html)
23
+
24
+ I may consider adding an option to load the Bootstrap files in the future if there is demand. Let me know if you'd like it!
25
+
26
+ If you'd like to contribute to this plugin, you can find it [hosted on GitHub](https://github.com/tallphil/cpt-bootstrap-carousel).
27
+
28
+ == Installation ==
29
+
30
+ 1. Upload the `cpt-bootstrap-carousel` folder to the `/wp-content/plugins/` directory
31
+ 1. Activate the `cpt-bootstrap-carousel` plugin through the 'Plugins' menu in WordPress
32
+ 1. Make sure that your theme is loading the [Twitter Bootstrap](http://www.getbootstrap.com) CSS and Carousel javascript
33
+ 1. Place the `[image-carousel]` shortcode in a Page or Post
34
+ 1. Create new items in the `Carousel` post type, uploading a Featured Image for each.
35
+
36
+ == Frequently Asked Questions ==
37
+
38
+ = Nothing is showing up at all =
39
+
40
+ 1. Is the plugin installed and activated?
41
+ 1. Have you added any items in the `Carousel` post type?
42
+ 1. Have you placed the `[image-carousel]` shortcode in your page?
43
+
44
+ = My images are showing but they're all over the place =
45
+
46
+ 1. Is your theme loading the Bootstrap CSS and Javascript? _(look for `bootstrap.css` in the source HTML)_
47
+
48
+ = The carousel makes the content jump each time it changes =
49
+
50
+ 1. You need to make sure that each image is the same height. You can do this by setting an `Aspect ratio` in the `Edit Image` section of the WordPress Media Library and cropping your images.
51
+
52
+ == Changelog ==
53
+
54
+ = 1.0 =
55
+ * Initial release