[Plugin: jQuery Collapse-O-Matic] Roll your own Elements ideas
-
Having lots of fun with the Jquery-collapse-o-matic plugin, and I wanted to share a few uses I’ve put it to.
1. Collapsible comments
Replace comment area with something like the following:<span id="commentCollapse" class="collapseomatic"> <?php if ( comments_open() ) : comments_popup_link('Leave a comment ↓', '1 comment ↓', '% comments ↓'); endif; ?> </span> <span id="swap-commentCollapse" class="collapseomatic" style="display: none;">Collapse ↑</span> <?php edit_post_link('Edit →', '| ', '' ); ?></p> <div class="content_collapse_wrapper"><div id="target-commentCollapse" class="collapseomatic_content force_content_collapse"> <?php comments_template( '', true ); ?> </div></div>
CSS code to remove arrow image
#commentCollapse.collapseomatic { background: none !important; color: #852D2B; }
2. Collapsible post titles in a list, with thumbnails
PHP code for a custom template page, pulled from a category matching the page name. Put after main page content loop. Formatting changes if a thumbnail is included.<?php $args = array( 'category_name' => get_permalink(), //category displayed is the SAME as the page link 'orderby' => 'the_time', //what to order it by 'order' => 'DESC' //order descending ); $my_query = new WP_Query($args); //create a new wordpress query if ($my_query->have_posts()) : while ($my_query->have_posts()) : //get all posts that match args, defines above $my_query->the_post(); ?> <div id="post-list-item"> <?php //check if the post has a thumbnail if(has_post_thumbnail()) :?> <div class="has-thumb"> <!--create a has thumb div modifying how the background of the collapse-o-matic works--> <?php else :?> <?php endif;?> <p class="event-date"><?php the_time('F j, Y'); ?></p> <h4 class="collapseomatic" title="<?php the_title(); ?>" id="<?php the_ID(); ?>"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?><?php the_title(); ?></h4> <!-- Returns title with Collapse-o-matic formatting --> <div class="content_collapse_wrapper"><div id="target-<?php the_ID(); ?>" class="collapseomatic_content force_content_collapse"><?php the_excerpt(); ?></div></div> <!-- Returns post content in collapse-o-matic div --> <?php //check if the post has a thumbnail if(has_post_thumbnail()) :?> </div><!--end has-thumb--> <?php else :?> <?php endif;?> <div class="event-divider clear"></div> <!-- thin line divider --> </div><!--end post item--> <?php endwhile; else: ?> <p><?php _e('No posts listed'); ?></p> <?php endif; ?>
And the CSS…
.collapseomatic { background-position: 0px 8px; } .has-thumb .collapseomatic { background-position: 58px 8px; } h4.collapseomatic { margin: 0; padding: 0 0 0 22px; } .has-thumb h4.collapseomatic { padding: 0 0 0 0px; } .collapseomatic_content { margin: 0px; margin-left: 0 !important; padding: 0px; background: #ffffff; border: 0px; } .has-thumb .collapseomatic_content { margin: 5px 0 10px 0 !important; } #post-list-item .collapseomatic img.attachment-thumbnail { height: 50px !important; width: 50px !important; padding: 0 10px 0 0 !important; }
3. Add a custom excerpt area
First, using the more fields plugin, add a custom field with the value “nocollapseExcerpt”.Then, add this PHP code after the collapseomatic title and before the collapseomatic content used (post content or excerpt) on the template.
<?php $NCExcerpt_values = get_post_custom_values('nocollapseExcerpt'); //Returns custom field data for the nocollapseExcerpt key for post foreach ( $NCExcerpt_values as $key => $value ) { ?> <p><?php echo "$value"; //Print the value of the key nocollapseExcerpt ?></p> <?php } ?>
4. Start with content expanded
Add the class
colomat-close
to your collapseomatic title, like:<h4 class="collapseomatic colomat-close" title="<?php the_title(); ?>" id="<?php the_ID(); ?>"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?><?php the_title(); ?></h4> <!-- Returns title with Collapse-o-matic formatting, with EXPAND BY DEFAULT (colomat-close) -->
Have fun!
http://wordpress.org/extend/plugins/jquery-collapse-o-matic/
- The topic ‘[Plugin: jQuery Collapse-O-Matic] Roll your own Elements ideas’ is closed to new replies.