Using CSS to Create Resizable Columns in WordPress with Thesis Theme…Part Deux!

CSS variable declaration and use

About three years ago, I wrote a post about dynamically resizing the content column in WordPress.org when using the Thesis theme.

The method described in that post worked fine until Thesis 2.4 was released last August. At that time, I noticed that my columns were no longer the full width of the window, and did not change size as I expanded or shrank the window. I sent an email to Thesis support and was told that a Box called Fix CSS would likely fix my problem. I installed it, but to no avail. Upgrading to Thesis 2.6 last month also had no effect.

Last week I decided to send another email and got a little more information. The creator of Thesis responded. Part of the message is below.

“Thesis 2.6 has ‘clarified’ the way you can use variables. Here’s how it works…

DO NOT:
Modify the Skin CSS, Editor CSS, or CSS Variables that come with your Thesis Skin. Whenever a Skin is updated, these three items will be overwritten, and you will lose any changes you’ve made to them.

DO:
Isolate ALL your CSS changes to the Custom CSS interface. Your modifications will be safe here during future Skin updates.
Create inline variables inside your Custom CSS interface, as seen in the image below:

picture of Custom CSS screen in Thesis

You can REFERENCE existing CSS Variables in your Custom CSS code, and you can also create and reference your own variables (like those shown in the image above) here as well.”

Now I had to implement the same steps as before in the previous post, but using this new method.

While the changes causing the builtin variables to revert to their original values may have been implemented in 2.6, my code had quit working at 2.4. So there’s a mystery! First, I removed the custom code and deleted the new variables from the Skin CSS so that it would be as it would directly downloaded the Thesis website.

Then, I basically set up new variables in the Custom CSS using the syntax shown in the screenshot above. I hit a snag here, however. For whatever reason, the CSS engine no longer supported the CSS calc() function! Also, I discovered that some of the CSS class names I originally used seemed not to affect the style of the column any longer.

The code below, which I appended to the bottom of my Custom CSS, does several things. First, it declares variables for the Custom CSS page in Thesis. Secondly, it implements those custom variables on the appropriate CSS classes and overrides the Skin CSS in all places where the variables $w_total and $w_content were used. Lastly, it declares a CSS variable to store the value in the builtin $w_sidebar Thesis variable. This will be useful in the next step, in which I will use a workaround for the lack of a working CSS calc() function.

$w_total_new = 80%;
$w_total_min = 897px;
$w_content_min = 585px;

.container, .columns > .content{
	max-width: $w_total_new;
	width: auto;	
}

.landing .container{	
	min-width: $w_content_min;
}

.full_width{
	min-width: $w_total_new;
}

.columns > .sidebar {	
	max-width: $w_sidebar;
}

:root{
	--sidebar: $w_sidebar;	
}

Since the modified $w_content variable in the original post used calc(), we’ll have to use the magic of JavaScript and jQuery to change the CSS after the page is loaded.

First, I grab the CSS variable called “–sidebar” by combining the window.getComputedStyle() method and the CSSStyleDeclaration.getPropertyValue() method interface.

I then trim the returned value to eliminate whitespace, and concatenate the string “-=” with the sidebar value which, incidentally, is currently 312px by default.

Then, I set the CSS to 100% for the classes listed. I then subtract (hence the “-=”) the sidebar width.

This:

$w_content = calc(100% - $w_sidebar);

Becomes this:

var sidebar = '-=' + window.getComputedStyle(document.body).getPropertyValue('--sidebar').trim();
if (sidebar==='-=') {
	sidebar = '-=' + window.getComputedStyle($('.sidebar')[0]).getPropertyValue('max-width').trim();
}
$('.landing .container, .columns > .content').css('width', '80%').css('width', sidebar);	 

Lastly, I wrapped it in a jQuery function that runs only after the window (including the CSS files) is fully rendered. The completed code below may be put in a Custom HTML widget in WordPress.

<script>
(function($) {
$(window).load(function() {	
	var sidebar = '-=' + window.getComputedStyle(document.body).getPropertyValue('--sidebar').trim();
	if (sidebar==='-=') {
		sidebar = '-=' + window.getComputedStyle($('.sidebar')[0]).getPropertyValue('max-width').trim();
	}
	$('.landing .container, .columns > .content').css('width', '100%').css('width', sidebar);	 
	$('img').each(function(){ 
		var image = $(this); 
		if(image.context.naturalWidth === 0 || image.readyState === 'uninitialized'){  
		$(image).unbind('error').hide();
      }	
	});	
});
})(jQuery);
</script>

Voila! The content column is once again resizable!

Nota bene: This has only been tested on the Social Triggers skin for Thesis. Other skins may use different CSS classes, so YMMV.

Using PHP to Search for Text in Website Source Code

HTML5 validation error on Thesis 2.2.1

As I’ve mentioned before, I use the Thesis premium theme on my WordPress site, and I generally have no problems at all. However, the newest Thesis update came out, and I am getting an HTML5 validation error.

Usually when this sort of thing happens, whether it be with a theme or with a plugin, I’ll try to fix what is causing the error and then report the fix to the author. The validation error I am getting is below.

HTML5 validation error on Thesis 2.2.1
The validation error and the rendered HTML.

The Thesis codebase is fairly complicated and is not easy to decipher if you’ve never seen it before. Even though I’d hacked on it a few times before, I’d never come across the code that generated this bit of HTML.


My blog runs on a shared server, and I don’t have SSH enabled currently, so there was no way I could use grep to search for the text, and the cPanel search utility only looks at filenames.

After some searching, I found an article that had code for finding filenames in all subfolders from a path on your site. This code would not search the text itself, but would allow for recursive folder searching.

function rsearch($folder, $pattern) {
    $dir = new RecursiveDirectoryIterator($folder);
    $ite = new RecursiveIteratorIterator($dir);
    $files = new RegexIterator($ite, $pattern, RegexIterator::GET_MATCH);
    $fileList = array();
    foreach($files as $file) {
        $fileList = array_merge($fileList, $file);
    }
    return $fileList;
}

Also, I was able to find another post that explained text searching in a file.

$path_to_check = '';
$needle = 'match';

foreach(glob($path_to_check.'*.txt') as $filename)
{
  foreach(file($filename) as $fli=>$fl)
  {
    if(strpos($fl, $needle)!==false)
    {
      echo $filename.' on line '.($fli+1).': '.$fl;
    }
  }
}

By combining and modifying these, I was able to put together a relatively simple file that will search through all files matching a pattern (in this case, PHP files) and printing instances of the text that contains the search term.

$path_to_check = "(your folder)";
$pattern = "/.*php/";
$needle = $_GET['needle'];

function rsearch($folder, $pattern, $needle) {
    $dir = new RecursiveDirectoryIterator($folder);
    $ite = new RecursiveIteratorIterator($dir);
    $files = new RegexIterator($ite, $pattern, RegexIterator::GET_MATCH);
    //$fileList = array();
    foreach($files as $file) {    	
        //$fileList = array_merge($fileList, $file);
        foreach($file as $filename) {
           foreach (file($filename) as $fli=>$fl) {
               //echo $filename."

\n\n"; if(strpos($fl, $needle)!==false) { echo $filename.' on line '.($fli+1).': '.$fl."

\n\n"; } } } } //return $fileList; return 0; } //var_dump(rsearch($path_to_check,$pattern,$needle)); if (strlen($needle) > 0) { rsearch($path_to_check,$pattern,$needle); } echo "Search complete.";

The search term currently is entered using the querystring (such as search.php?needle=yoursearchterm), and the path is currently hard coded. The pattern uses a regular expression. I did find that this has the potential to use all of your allotted memory, so use it sparingly. Also, don’t leave this on your site in PHP form, but rename to TXT when not in use so that no one can use it without your knowledge – it could be used to find passwords for databases and other sensitive information.

Incidentally, I did find the code that generates the CSS above; it’s in the wp-content/themes/thesis/lib/core/skin.php file:

echo
	"\n";

Due to the amount of time it would take for me to suss out how to move this into the head without breaking the site, I’m just going to report this one. It should be fixed in the next minor release.

%d bloggers like this: