Tag Archives: code

Dynamically Resize WordPress Images On-the-Fly

Posted on by John

Creating multiple image sizes in WordPress is quite easy when the image is attached to a post or page. Theme.fm has an excellent write up on how to do this with the add_image_size function. The problem with this method is that it creates a lot of bloat because for every image uploaded it’s sized to this new size even if you’re not going to use it. Also getting the different available sizes from just a url is a pain.

To side step this issue Theme and Plugin developers have resorted to using scripts like TimThumb , which recently have a major vulnerability discovered. Another script that can generate images on the fly is called vt_resized. This script is nice because it uses native WordPress functions to generate the new image. The only is issue is that it does not support WordPress Multisite. Here’s a modified version of the script with crude multisite support.

If you find a bug let me know. Hopefully WordPress will provide a similar function in the WP core in the future.

On Github

WordPress The Loop Shortcode

Posted on by John

I went searching the other night for a WordPress loop shortcode. I was surprised to find that there were none out there, so I made one. Use this shortcode below to create a loop on a page , post , or sidebar (with some tweaks). Insert in your functions.php or you can create a plugin for it. I have a plugin where I put all my shortcodes and that works quite well.

Using CSS Frameworks with Thematic

Posted on by John

Out of the box the WordPress Thematic Theme Framework has several bullet proof css layouts. Sometimes though a project requires a different layout or css.   I recently had a project where I needed to use the YUI CSS Framework. I was able to shove all my code in via Thematic hooks without touching Thematic’s source code. Some people might say this is divitis to the max , which is true, but for the project the benefits out weighed the extra weight of the page. Using this method below you can easily add 960 Grids, Blueprint, or whatever CSS framework you’d like. First in the your child theme’s style.css import you theme’s css framework like you would the out of the box layout styles.

[css] /* Reset browser defaults and Grids*/ @import url(‘http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css’); [/css]

Next we start diving into Thematic’s source code to find the hooks and where we need insert code. So as you can see below I start adding code into these hooks on our child theme’s functions.php file. I don’t recommend using my function naming convention , but I got lazy :) . So with my example all I have to do is change the class on line 3 and I can easily change my layout. Depending on which CSS Framework you use and your layout will depend on which hooks you use. Just start going through the source code and figure out how to start wrapping current elements with your css framework. Also you can use the add_action priority and remove action to do anything you want. If you want to use YUI feel free to use the code below. View my source code on this theme to see it in action. 

Controlling Sidebars in Thematic

Posted on by John

I started using Thematic a couple of weeks ago and have absolutely fallen in love it with. Mucho hooks and filters, which is key to customizing just like WordPress.

I needed a way to control the primary and secondary sidebar and which pages they would show up on without a plugin [Widget Logic] . After digging through the Thematic code and finding this awesome breakdown of Thematic. I discovered that I could shove some logic code in the Thematic hook ‘thematic_abovemainasides’. In fact you can shove the code in other Thematic hooks to control any Thematic widgetized area.

The code below shows the secondary sidebar only on the blog page and single pages, all other pages show the primary sidebar.