Collapse-Pro-Matic Cookie Based Expand

This is a demo of how to use a cookie to auto-collapse a expand element that is expanded by default. The idea is to set up an expand element this is expanded by default, but if a user collapses it once, it will no longer load auto-expanded for that user until the cookie expires.

For example the following expand element should be auto-expanded until it is manually collapsed. After this, the element will remain collapsed when the page is revisited.

[expand title="test" expanded="once" cookiename="my_cookie"]hidden content[/expand]
test
hidden content

Custom Print Templates for Print-Pro-Matic

Note: This post assumes a basic understanding of WordPress templates and that a child-theme is being used.

To create a custom print template we first need to define a query var to trigger the template.
Add the following to the child-theme’s function.php file:

function printpromatic_query_var( $vars ) {
	$vars[] = 'print_view';
	return $vars;
}
add_filter( 'query_vars', 'printpromatic_query_var' );

Now WordPress will look for something like /?print_view=true at the end of any url.

Next step is to tell print-pro-matic to use the current page with the print_view query variable tacked on the back as the target url. Simply set the url attribute using the %print_view% placeholder as its value:

[print-me url="%print_view%"/]

Finally we need to check for this print_view query var and either a) use a custom print-only template file or b) modify the current page template to switch to a print-only view.

Redirect to Print-Only Template

If a print-only template exists simply redirect to this template file by adding the following code to the child-theme’s function.php file:

function printpromatic_print_template($original_template) {
    if ( get_query_var( 'print_view' ) ) {
		$new_template = locate_template( array( 'print-template.php' ) );
        return $new_template;
    }
	return $original_template;
}
add_filter( 'template_include', 'printpromatic_print_template' );

Modify the Existing Template

This method involves modifying the current page template to change what it displays based on the presence of the print_view query var.

In the page template being used, we need to check if the query_var is present:

$print_view = get_query_var( 'print_view' );

Now we need to simply wrap the existing template elements in an if statement:

//normal
if( empty($print_view) ){
   ...
}
//print only
else{
   ...
}

Collapse-O-Matic CSS Tricks .colomat-close

When an expand element is expanded it has the .colomat-close class assigned. This class is removed when the expand element is collapsed. So, if you want to adjust how an active/expanded trigger is displayed, simply define your custom css as follows:

/*inactive/collapsed */
.collapseomatic {

}

/*active/expanded */
.collapseomatic.colomat-close {

}

Simple Demo

Using the trigclass attribute we can further assign the design of the triggers for only specific expand elements.

CSS

.collapseomatic.my_special_class {
    color: green;
}

.collapseomatic.my_special_class.colomat-close {
    color: red;
    border: 2px dotted red;
}

Shortcode

[expand title="Trigger Text" trigclass="my_special_class"]Hidden Content[/expand]

Result

Trigger Text
Hidden Content

T(-) Countdown w/ T(-) Countdown Events

T(-) Countdown

[tminus t="+40 seconds" style="naboo" event_id="1932" omitweeks="true" launchtarget="countdown"]Launch![/tminus]

Hello world

Years
0
0
Months
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
4
0

T(-) Countdown Control

[tminus cid="1031" style="naboo" event_id="1932"]

[tminus cid="1031" style="naboo" event_id="1932"]

This is the fireworks div that can be targeted

Collapse-O-Matic Content Filtering

Without Filter Attribute (default off)

Plain Text

[expand title="plain text"]This is just some blibber blabber text[/expand]

plain text
This is just some blibber blabber text

Text with Shortcode

[expand title="text with shortcode"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]

text with shortcode
This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]

With Filter Attribute False

Plain Text

[expand title="plain text" filter="false"]This is just some blibber blabber text[/expand]

plain text
This is just some blibber blabber text

Text with Shortcode

[expand title="text with shortcode" filter="false"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]

text with shortcode
This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]

With Filter Attribute True

Plain Text

[expand title="plain text" filter="true"]This is just some blibber blabber text[/expand]

plain text

This is just some blibber blabber text

Text with Shortcode

[expand title="text with shortcode" filter="true"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]

text with shortcode

This is text with a shortcode [tminus_launch_date cid=”1921″ format=”Y-m-d”]

Print-O-Matic Icon Inline-Block CSS

This is how you modify the print-icon to have it show up in a simple menu. If we start with a simple right-aligned menu:

<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | [print-me]</p>

See how the icon jumps to it’s own line?

Expand All | Collapse All |

Let’s fix that.

Step one, assign a some new CSS rules for an id element:

#my_print_id {
    display: inline-block;
}
#my_print_id:before,  #my_print_id:after{
    content: none;
}

Step two, insert a roll-your-own* version of the shortcode like so:

<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | <span class="printomatic pom-small" id="my_print_id"><input type="hidden" id="target-my_print_id" value="article"></span></p>

BAM, it’s working*:

Expand All | Collapse All |

*Note: the roll-your-own method shown above only works for print-o-matic versions 1.5.7 and older. This will not work with print-pro-matic or versions 1.6.0 or newer.

Now lets’s try something new. We have added tag and class attributes to version 1.6.0 so we can now do something like:

The Jedi Way

.my_print_class {
    display: inline-block;
}
.my_print_id:before, .my_print_id:after{
    content: none;
}

And we add our shortcode with the new tag and class attributes:

<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | [print-me printstyle="pom-small" class="my_print_class" tag="span"]</p>

Expand All | Collapse All |

T(-) Countdown Link Test

Countdown to March 21
Years
0
0
Months
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0