Add ability to load CSS when using do_shortcode.

README.md

@@ -44,6 +44,18 @@ Metafizzy's javascript Isotope plugin is licensed under MIT and free to use for
 
 To implement Isotope Posts on your site, simply head over to the Isotope Posts settings page in your WordPress admin area, create a loop of posts with your preferred options and then save it. Next, grab the unique shortcode for the loop you just saved (e.g. `[isotope-posts id="YOUR_UNIQUE_ID"]`) and embed it in a page in your site.
 
+### How do I make this thing work in a template file?
+
+You can use `do_shortcode` to directly embed an Isotope Posts loop in a template file (instead of pasting it into the WYSIWYG editor for a given page on your site).
+
+However, in order to ensure that the Isotope Posts plugin has the smallest possible footprint on your site, the plugin only loads the required Isotope CSS file on pages where it finds an Isotope Posts shortcode inside `the_content` (i.e. embedded in the WYSIWYG editor).
+
+In order to manually add the required CSS when you use `do_shortcode` within your theme files, set an additional attribute on your shortcode as follows:
+
+`[isotope-posts id="YOUR_UNIQUE_ID" load_css="true"]`
+
+**NOTE:** You do NOT need to add the `load_css` attribute to your shortcode if you are simply pasting it into a page's WYSIWYG editor.
+
 ### What kind of Isotope options are available?
 
 Isotope Posts takes advantage of a number of the original javascript plugins's options. On the plugin settings page you have the option to:
@@ -79,6 +91,9 @@ Yes, but no translations are available quite yet.
 
 ## Changelog
 
+### 2.0.4
+* Add ability to manually load public CSS when using `do_shortcode`
+
 ### 2.0.3
 * Ensure scripts and styles only load when the shortcode is present (for real this time...)
 

isotope-posts.php

@@ -12,7 +12,7 @@
  * Plugin Name:       Isotope Posts
  * Plugin URI:        http://mandiwise.com/wordpress/isotope-posts/
  * Description:       Allows you to use Metafizzy's Isotope to display feeds of WordPress posts using simple shortcodes. Works with custom post types and custom taxonomies too.
- * Version:           2.0.3
+ * Version:           2.0.4
  * Author:            Mandi Wise
  * Author URI:        http://mandiwise.com
  * Text Domain:       isotope-posts

public/assets/css/public.css

@@ -69,6 +69,7 @@
 #filters li a {
 	text-decoration: none;
 	padding: 0.5em 1em;
+   display: block;
 }
 
 .iso-container {
@@ -82,14 +83,10 @@
 
 #iso-loop li {
 	margin: 0;
-	padding: 0 15px;
+	padding: 0 1em;
 	max-width: 290px;
 }
 
-h2.iso-title {
-	margin-bottom: 0.5em !important;
-}
-
 h2.iso-title a {
 	text-decoration: none;
 }

public/class-isotope-posts.php

@@ -18,7 +18,7 @@ class Isotope_Posts {
 	 *
 	 * @var     string
 	 */
-	const VERSION = '2.0.3';
+	const VERSION = '2.0.4';
 
 	/**
 	 * Unique identifier for the plugin.
@@ -219,10 +219,12 @@ public function load_plugin_textdomain() {
 	 */
 	public function enqueue_styles() {
 
+		wp_register_style( $this->plugin_slug . '-plugin-styles', plugins_url( 'assets/css/public.css', __FILE__ ), array(), self::VERSION );
+
 		global $post;
 
 		if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'isotope-posts') ) {
-			wp_enqueue_style( $this->plugin_slug . '-plugin-styles', plugins_url( 'assets/css/public.css', __FILE__ ), array(), self::VERSION );
+			wp_enqueue_style( $this->plugin_slug . '-plugin-styles' );
 		}
 	}
 
@@ -235,6 +237,7 @@ public function isotope_loop( $atts ) {
 
       extract( shortcode_atts( array(
          'id' => '',
+			'load_css' => 'false',
       ), $atts ) );
 
       /*
@@ -269,7 +272,11 @@ public function isotope_loop( $atts ) {
       // Get the current page url.
       $page_url = get_permalink();
 
-      // Enqueue and localize the Isotope scripts
+      // Enqueue and localize the Isotope styles and scripts
+		if ( $load_css == 'true' ) {
+			wp_enqueue_style( $this->plugin_slug . '-plugin-styles' );
+		}
+
 		wp_enqueue_script( 'jquery' );
 		wp_enqueue_script( $this->plugin_slug . '-isotope-script', plugins_url( 'assets/js/isotope.pkgd.min.js', __FILE__ ), array(), '2.0.0' );
 		wp_enqueue_script( $this->plugin_slug . '-imagesloaded-script', plugins_url( 'assets/js/imagesloaded.pkgd.min.js', __FILE__ ), array( 'jquery' ), '3.1.8' );

readme.txt

@@ -53,6 +53,16 @@ Metafizzy's javascript Isotope plugin is licensed under MIT and free to use for
 
 To implement Isotope Posts on your site, simply head over to the Isotope Posts settings page in your WordPress admin area, create a loop of posts with your preferred options and then save it. Next, grab the unique shortcode for the loop you just saved (e.g. `[isotope-posts id="YOUR_UNIQUE_ID"]`) and embed it in a page in your site.
 
+= How do I make this thing work in a template file? =
+
+You can use `do_shortcode` to directly embed an Isotope Posts loop in a template file (instead of pasting it into the WYSIWYG editor for a given page on your site).
+
+However, in order to ensure that the Isotope Posts plugin has the smallest possible footprint on your site, the plugin only loads the required Isotope CSS file on pages where it finds an Isotope Posts shortcode inside `the_content` (i.e. embedded in the WYSIWYG editor). In order to manually add the required CSS when you use `do_shortcode` within your theme files, set an additional attribute on your shortcode as follows:
+
+`[isotope-posts id="YOUR_UNIQUE_ID" load_css="true"]`
+
+**NOTE:** You do NOT need to add the `load_css` attribute to your shortcode if you are simply pasting it into a page's WYSIWYG editor.
+
 = What kind of Isotope options are available? =
 
 Isotope Posts takes advantage of a number of the original javascript plugins's options. On the plugin settings page you have the option to:
@@ -88,6 +98,9 @@ Yes, but no translations are available quite yet.
 
 == Changelog ==
 
+= 2.0.4 =
+* Add ability to manually load public CSS when using `do_shortcode`
+
 = 2.0.3 =
 * Ensure scripts and styles only load when the shortcode is present (for real this time...)