More additions to Twenty Fifteen! Why not gather these all together into a single child theme? Well, why not? You can see it all on GitHub, though I haven’t yet caught up with myself.

I haven’t said what we’re doing yet. So you have a website with Twenty Fifteen, and you don’t have too much in your sidebar – the menu, which isn’t too long, and maybe a few widgets. What if you made the sidebar collapse down nice and short so you could fix it in place? It is wonderfully simple to do.

You’ll need a folder in your wp-content/themes/ directory called “fancyfifteen” to use these files as-is. It will have three files in it: functions.php, aqa-sidebar-accordion.js, and style.css.

functions.php:

There are three chunks of code in functions.php: the first brings in the stylesheets for both Twenty Fifteen and Fancy Fifteen, the second adds HTML to widget titles that we will later use for drop-down/collapse-up arrows, and the third brings in the JavaScript that actually does the accordioning. You can leave out the middle section if you don’t want the arrows.

aqa-sidebar-accordion.js:

Progressive enhancement! If the site visitor has JavaScript turned off, all widgets will be open. Otherwise they will all close up. The commented-out line would then reopen the first one, provided it has a title; that seemed to be the most efficient way to have the first widget auto-open. The way I wrote this JavaScript, any widget without a title won’t collapse (ever). You could use that fact to have, say, a search bar that is always visible.

For style.css, visit GitHub. There’s nothing tremendously interesting there – it just mimics the built-in support for drop-down submenus. If you decided to leave out the middle chunk of functions.php and forgo arrows, you only need the top comment block of style.css — but you definitely need that! It’s got the information WordPress needs to understand the theme and its relationship to Twenty Fifteen.

Next time we’ll discuss actually fixing the sidebar in place. The trick is to allow scrolling if the contents are longer than the page, but avoid the economy-sized scrollbar Internet Explorer slaps on anything styled overflow:scroll.

Accordion-playing bird from Pixabay.