changing over my medium-sized health blog (2000 pages) to newspaper was almost painless
… unless …. the missing toggle and accordion function.
so here my solution
A) use plugin shortcodes-ultimate from Vlad A…
to make it much easier to call the toggles (and to be able to reuse my old websites source without any changes) I get the shortcode-call rewritten using a simple 3-liner php-function
I have all kind of tiny little php-functions that I collected over the years, to use all of them in my several pages I created my “own plugin” that carries those functions. You might just add following code to the newspapers child-theme functions.php
// for newspaper adding some toggle functions
function toggle_function( $atts , $content=null) {
extract( shortcode_atts( array(
'title' => '',
'class'=>'',
'style'=>'',
), $atts ) );
/* für shortcodes ultimate */
$ss = '[su_accordion][su_spoiler style="fancy" open="no" title="' . $title . '"]' . do_shortcode($content) . '[/su_spoiler][/su_accordion]';
return do_shortcode($ss);
}
add_shortcode( 'toggle', 'toggle_function' );
add_shortcode( 'toggle1', 'toggle_function' );
add_shortcode( 'toggle2', 'toggle_function' );
add_shortcode( 'toggle3', 'toggle_function' );
add_shortcode( 'toggle_framed', 'toggle_function' );
add_shortcode( 'toggleZ', 'toggle_function' );
by creating my own shortcode [toggle] [toggle1] [toggle2] [toggle3] …. I am able to have nested toggles
you just call them via
[toggle title="this is the toggles title"]
.... here is the text inside the toggle ....
[/toggle]
B) use plugin accordion shortcodes from Phil Buchanan
I actually use B in newspaper and had to use A for some different theme which messed up Phil’s plugin but was OK with Vlads plugin. I think that Vlads Shortcodes ultimate is easier and better integrated
use following functions.php addition
function toggle_function( $atts , $content=null) {
extract( shortcode_atts( array(
'title' => '',
'class'=>'',
'style'=>'',
), $atts ) );
/* für accordion shortcode */
$ss = '[accordion title="" open1st="0" openAll="0" style="toggle"][accordion_item title="' . $title . '"]' . do_shortcode($content) . '[/accordion_item][/accordion]';
return do_shortcode($ss);
}
add_shortcode( 'toggle', 'toggle_function' );
add_shortcode( 'toggle1', 'toggle_function' );
add_shortcode( 'toggle2', 'toggle_function' );
add_shortcode( 'toggle3', 'toggle_function' );
add_shortcode( 'toggle_framed', 'toggle_function' );
add_shortcode( 'toggleZ', 'toggle_function' );
here are some hints for some CSS that you add to your childs styles.css
/* Accordion Styles */
.accordion { margin: 18px 0px;border: solid lavender 6px;}
.accordion-title {margin:0;padding: 14px 14px 14px 20px;color:royalblue;cursor:pointer;font-weight:900;border-radius: 5px;overflow: hidden; border:1px solid gray;background:#f9f9f9;}
.accordion-title:hover {color:red;cursor: -webkit-grab; cursor: grab;font-weight:900;}
.accordion-title:before{content:”+ | “;width:49px;height:100%;border-width:0 0px 0 0;border-style:solid;text-align:left;}
.accordion-title:first-child {border: none;}
.accordion-title.open {cursor: default;}
.accordion-title.open:before {content:”- | “;width:49px;height:100%;border-width:0 0px 0 0;border-style:solid;text-align:left;}
.accordion-content {padding:20px 6px 15px 6px;background-color:whitesnow;}
/* Accordion Styles ende */
Hi HeliR,
Thank you for sharing with us your solutions.
Thank you!
