From 8861682d6aa1b8739dae84bb779cf4d511285e85 Mon Sep 17 00:00:00 2001 From: Mandi Wise Date: Thu, 7 Aug 2014 10:56:21 -0700 Subject: [PATCH] Add ability to load CSS when using do_shortcode. --- README.md | 15 +++++++++++++++ isotope-posts.php | 2 +- public/assets/css/public.css | 7 ++----- public/class-isotope-posts.php | 13 ++++++++++--- readme.txt | 13 +++++++++++++ 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ce4afd9..9815898 100755 --- a/README.md +++ b/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...) diff --git a/isotope-posts.php b/isotope-posts.php index 45a8966..2182125 100755 --- a/isotope-posts.php +++ b/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 diff --git a/public/assets/css/public.css b/public/assets/css/public.css index 41ebe6c..a81229b 100755 --- a/public/assets/css/public.css +++ b/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; } diff --git a/public/class-isotope-posts.php b/public/class-isotope-posts.php index 5d0e9dd..4b56ef8 100755 --- a/public/class-isotope-posts.php +++ b/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' ); diff --git a/readme.txt b/readme.txt index ffcd670..9601d12 100755 --- a/readme.txt +++ b/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...)