wordpress

A Side Column is very nice and useful thing. I like it a lot ..and … You are expecting a BUT, right ?

But on articles with intricate layout things get squashed and mangled. And after the initial widgets area you waste useful space. The second column is normally top heavy. Adding more data or widgets does not help much, because nobody looks after 1 page-scroll the right side.

So the solution is to keep the Side Column, but allow the user to Fold and Unfold it. And that is the task at hand. I will explain how I did it with my theme Blogstream, you then can abstract the instructions for your case. BTW, very nice and clean theme and once I’m finished with the tweaks and minify the style.css it will become lean and fast 😉

So lets start …

The first thing is the obligatory research with the browser DevTools. The goal is to find the element/s and/or class/es which you can tweak to hide the column. I had partial success , so I reached out to the creator of the theme, who was nice enough to reply back with the additional info.

So this was going to suck … earlier in my tests I saw that html elements DOM manipulation won’t work as I wanted … I have to manipulate the CSS class rules. Those two :

.col-2cl .main-inner { padding-right: 0; }
.col-2cl .s1 { display: none; }

Have not done that before … but I conjectured there have to be something like DOM for CSS … and yes there is.

The sucky part about CSSDOM (that’s what it is called, clever 😉 ) is that there is no XPATH-thingy for search, everything is linear search through LoL of CSS-Stylesheets and rules.

So I had to find those two rules amongst tens of stylesheets and hundreds of rules per sheet. I was about to forget about it and skedaddle …. it will be slooow. But then again where is the fun. So I persisted and decided to go ahead and do it.

I would not only had to write the code, but also had to integrate it in WordPress.

From before I’ve looked at plugin called WP Coder. Again, a lot of coolness, the plugin allows you to write HTML,JS,CSS and files and then embed them with the short-code in only specific places.
I on the other hand needed the code to be on every page … 1,2,3 … and why not put the short code in the footer.

But before that I had to write the code and test it somehow on Word Press. So I wrote the JS code to toggle the Side column and named it “side_bar” in WP Coder. Then created a test page and embed the short code : . Now I could test w/o breaking the whole site.

• The code is saved @ /wp-content/uploads/wp-coder/script-1.js

The Code

Lets review the code before I explain how I tested it.

The loopy find_css_rule() function goes trough all the style sheets and rules to find the css-selectors. If it finds them the function returns the indexes, so I can refer back directly. And btw it is not that slow.

That out of the way, the rest is easy. One function to check the state of the Side column, two to Fold/Unfold and finally toggle_sidebar() to unite them all.

All the Functions are specific to my case, but once the search problem is solved the rest is easy, so don’t despair.

function find_css_rule(selector) {
	let s = 0
	for (let sheet of document.styleSheets) {
		let r = 0
		for (let rule of sheet.cssRules) {
			if (rule.selectorText == selector) {
				console.log("Sheet:"+s+", rule:"+r)
				return [s,r]
			}	
			r += 1		
		}
		s += 1
	}
}

function is_sidebar_folded(rule) {
	return rule.style.display == 'none' ? true : false
}

function fold_sidebar(ruleP, ruleD) {
	ruleP.style.paddingRight = '10px'
	ruleD.style.display = 'none'
}

function unfold_sidebar(ruleP, ruleD) {
	ruleP.style.paddingRight = '340px'
	ruleD.style.display = ''
}

function toggle_sidebar() {
	let padding = find_css_rule('.col-2cl .main-inner')
	let display = find_css_rule('.col-2cl .s1')
	if (! (padding && display)) {
		console.error('Could not find the side bar classes !')
		return
	}
	//use the idxs for direct access
	let ruleD = document.styleSheets[display[0]].cssRules[display[1]]
	let ruleP = document.styleSheets[padding[0]].cssRules[padding[1]]

	if (is_sidebar_folded(ruleD)) {
		unfold_sidebar(ruleP,ruleD)
	} else {
		fold_sidebar(ruleP,ruleD)
	}
}

Two final things to mention. I on purpose use verbose function names, so I can lower the probability of name conflict. And second I split the task to many but small Functions. The reason ? It easier for testing, but most importantly follows the KISS principle.

The test

So how did I tested it ?

Now the test page has the code, so I went in Preview mode and launched DevTools (Inspect) and in the Console typed :

• find_css_rule(‘.col-2cl .main-inner’)

worked flawlessly … then tried several times toggle_sidebar() … charming.

That done I added a link to the Test page for the sake of it

• <a href=”#” onclick=”toggle_sidebar()”>toggle</a>

that worked too … now I was ready to set it up site-wide by setting up the short-code in the footer

Slowly …

• Appearance / Theme Editor / Open footer.php

carefully somewhere at the end I added the following :

<?php
    echo do_shortcode('[WP-Coder title="side_bar"]');
?>

updated the file and was ready for the last step i.e. setting up button or something so I can visually toggle the Side column.

The obvious choice is to put something in the upper right corner of the first column. The problem is that is the article header space which is simple H1 tag, so I quickly created a table to host the header and my triple arrow character in Inspect mode.

Once I made it work I was ready to mess up page.php this time. Again with caution, I just found :

<header class="entry-header group">
	<h1 class="entry-title"><?php the_title(); ?></h1>
</header>

and replaced it with this :

<header class="entry-header group">
	<table width="100%"><tr>
	<td><h1 class="entry-title"><?php the_title(); ?></h1></td>
	<td align=right>
		<a href="#" onclick="toggle_sidebar()" style="font-size: 35px;text-shadow:0 2px 3px #999c9f; color:#0e7fe3;">⇶</a>
	</td>
	</tr></table>
</header>

Updated the file, tested it … and finito.

TODO

This direct change is a bit jumpy … so I have to figure out how to make a smooth transition.

Also it will be nice the triple arrow to be more animated.

But will leave that for a time when I have more time.

BTW to see the result you have to go to a Page on this site, for now I’m keeping post.php unchanged.