If you’re still not following me on Facebook or Twitter, you probably haven’t heard that I’m speaking at another WordPress DC meetup.
It will be on Tuesday, August 9th at 7 PM located at Fathom Creative‘s office in DC. More details on location, parking, etc. can be found on the meetup page (linked previously).
Similar to my last presentation at WordPress DC, I will be discussing CSS. Unlike last time, however, the CSS tips I’ll be going over aren’t necessarily WordPress-specific, and can apply to nearly any type of site. The official description:
You’ll learn some useful and practical CSS tips and tricks. These could include tips on speeding up development time, general optimizations, and other cool things. Also, these aren’t necessarily limited to WordPress, but could apply to nearly any HTML/CSS based site. Beginner to intermediate CSS knowledge would be nice but not absolutely required.
These are in the same format as my previous slides (but less crammed so it’s easier to see on the TV).
This will be the premiere of the limited edition Theme Lab t-shirts! Okay, they’re not really limited editions, I can print more if needed. I’ll be bringing various shirts in S/M/L sizes. A picture of them is below.

I’ll figure out some way to give them away at the meetup.
Also speaking at the same WordPress DC meetup is Andy Stratton, who I got to know pretty well at WordCamp Raleigh earlier this year. I saw his presentation there called Diet Pills, SEO and Theme Frameworks, which he’ll also be presenting here. Trust me, it’s one you won’t want to miss.
Looking at the meetup page, it looks like spots are filling up pretty quickly. If you want in, you should RVSP ASAP.
Related posts:
TimThumb, an image resizing script commonly used in WordPress themes (especially paid ones), is being exploited through a zero day vulnerability. If you think your WordPress theme may use the TimThumb script, please pay attention.
The easiest way to fix it would be to delete any instance of timthumb.php on your sites. It is also commonly named thumb.php (this is what WooThemes uses). I’d imagine this also applies to inactive themes.
As outlined in the previously linked post on Mark Maunder’s blog, the next best quick fix would be to remove all the “Allowed Sites” in the array.
Before:
$allowedSites = array (
'flickr.com',
'picasa.com',
'img.youtube.com',
'upload.wikimedia.org',
);
Change to:
$allowedSites = array();
Also make sure the following constant is set to false, otherwise removing the “allowed sites” won’t really matter, since every site would be allowed if it wasn’t:
define( 'ALLOW_EXTERNAL', false );
You might be thinking, “lolz, Flickr or Wikipedia is gonna hack my site? Yeah right!” Wrong.
The problem is flickr.com.lamehackersite.info would be just as “allowed” as flickr.com, which is where the real vulnerability lies.
Some WordPress theme providers that bundle TimThumb in their themes to resize images include WooThemes and ElegantThemes, two very popular commercial theme vendors that have tons of sites using themes with the vulnerable TimThumb script.
As far as WooThemes goes, it appears they’re aware of the issue according to the following tweet:
To address the timthumb issue, we have a post and fixes coming very soon.
^RR
Let’s not forget theme marketplaces (*cough* ThemeForest *cough*) where countless authors have produced countless themes used on countless sites, a lot of which probably use the TimThumb script. I’d imagine this would be a much messier situation than with a single vendor.
In the name of transparency, there are three themes on Theme Lab that use the TimThumb script. They have been updated to the latest version (with allowed sites removed).
If you use any of these themes, please update the /scripts/timthumb.php file ASAP. This advice can also apply to any other theme that uses the timthumb script, obviously.
Why only three? Because I discovered a better way to include thumbnail functionality in WordPress themes.
add_image_size Please!WordPress has a great, built-in API for resizing images that can effectively replace the need for timthumb on WordPress sites. It’s called add_image_size.
For some live examples on how to use this in your own themes, check out the Green Tea, Cool Blue, or SongSpace themes here at Theme Lab.
This feature has been built into WordPress since version 2.9, which was released on December 19, 2009 (well over a year and a half ago).
Mark Jaquith posted a great tutorial on including this feature in your themes, so I can’t think of many other excuses for not including this in new themes.
I noticed that the TimThumb developer, Ben Gillbanks, was getting directly and indirectly “bashed” pretty hard in the comments of the original vulnerability post.
Yes, it turns out the TimThumb script isn’t the most secure script in the world, but at least the developer is sticking around and supporting it for free.
I believe the script was released with nothing but the best intentions, and to see this “bashing” take place against someone who is doing all he can to help the situation is a bit bewildering, to say the least.
Over the years I’ve seen him respond to lots of TimThumb support requests on Twitter, something he’s certainly not obligated to do for a free script, but he does it anyway.
After all the profit that’s been made from the script (like commercial themes using it to make sure their fancy Jquery slider images are resized nicely) you’d think you’d see a little gratitude, but what else is new?
Obviously this is a pretty messy situation, a lot of users probably won’t have any idea they’re vulnerable until they’re hacked. It’s important to understand how widely used this script has been bundled with WordPress themes over the years.
Jayvie has also posted his thoughts on the issue in his post titled Timthumb zero day vulnerability: time to get back to basics.
What do you have to say about it? Let me know in the comments.
Related posts:
After I released the most recent Theme Lab redesign, I had a number of comments on the “bio dropdown” box I have up in my navigation bar. I coded it with just a few lines of CSS along with a background image.
In this CSS tip post, I’ll go over how you can have a similar hover effect on your own sites.
In this example, I’ll be using a text widget in the Twenty Eleven theme, the new default as of WordPress 3.2.
Basically, once you hover over the div that contains the widget, a “hidden” div will appear which will be our bio dropdown box.
Note in the picture to the left, the gray bio box will not appear unless you hover the div containing the “Bio Hover” heading.
It’s not that important to have a unique CSS selector to style the div you want to put your bio dropdown box in. Basically this is because if you don’t have the accompanying markup in that div, nothing would show up anyway in the event of a hover state.
Although in the case of Twenty Eleven, we could get away with just styling the “aside” class, chances are you only want a bio dropdown box on one of your divs anyway, so we’ll get more specific.

Luckily with WordPress, it spits out a ton of unique CSS selectors you can use. In this example, it spits out #test-3 which we’ll use from now on.
Note: This may vary depending on your WordPress installation. Use something like Chrome Developer Tools to easily find the selector.
In this example, the HTML markup can be placed directly into the WordPress text widget. This is what you’d put in:
<div class="bio-dropdown">
<img class="photo" alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" />
<p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p>
</div>
Unless you want to steal my identity, you’ll probably want to replace the photo with a picture of yourself. You can also optionally remove it.
Since we’re using a WordPress widget, the outlying markup is already generated for us. This is what it is in total.
<aside id="text-3" class="widget widget_text">
<h3 class="widget-title">Bio Hover</h3>
<div class="textwidget">
<div class="bio-dropdown"><img class="photo" alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" /><p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p></div>
</div>
</aside>
If you’re doing this on a raw HTML site, you’ll need some sort of wrapper (like this one is the aside) for the bio dropdown with something else in it, otherwise there’s nothing to hover over to drop down.
Real-life example: My bio dropdown div is inside an li tag in my navigation menu.
The first two lines really set up the rest of it, so I put this in its own section.
#text-3 { position: relative; }
.bio-dropdown { display: none; }
Note: If you’re not a fan of display: none; or think it hurts your SEO or something, you can also use something along the lines of position: absolute; left: -100000em; which will basically move it so far off the page, noone would ever see it anyway.
The following CSS code handles the look and feel of the bio dropdown box.
#text-3:hover .bio-dropdown {
display: block; z-index: 99;
position: absolute; top: 25px;
background: #ccc; padding: 10px 10px 0 10px;
font-size: 11px; line-height: 18px; color: #666;
}
This is where we finally use the #text-3 selector along with the :hover pseudoclass to make the bio dropdown box show up only when you hover over the text widget.
display: block; makes the bio dropdown box visible. The z-index: 99; ensures that the box will be displayed over everything else, unobstructed.Note: About the first line, if you’re using the position: absolute; left: -100000em; technique instead of display: none; like I explained above, using display: block here wouldn’t be necessary (since divs are already assumed to be block level elements anyway). Instead you’d have to use left: 0; to move the div back onto the page.
And for the image, just a simple float and right margin.
.bio-dropdown .photo { float: left; margin-right: 10px; }
I can’t think of a good way to integrate this into a dynamic WordPress menu (wp_nav_menu) without filtering the crap out of something. The easiest way may be to hard code your navigation and get over it (which I do on all of my sites).
If you have any techniques on how to insert markup into a WordPress menu item, which is required for this, I’d love to hear about it in the comments. I’m sure it’s possible but it goes beyond the scope of this CSS tip post.
Yes, I realize you probably wouldn’t want to put a bio dropdown in your sidebar, you’d put it in a place with limited space that doesn’t have room for it to be fully displayed (like a cramped navigation bar).
Fortunately, you can use this teqhnique just about anywhere. I just wanted to go over a basic technique on how to display a whole div on hover.
It’s not too complicated and you don’t need any fancy Javascript stuff to do it, although if you wanted some high-tech fading effect, you’d probably have to use some Javascript.
Related posts:
December 5th, 2009. This was the date I last redesigned Theme Lab, which coincidentally was also done by James McDonald. Here’s a screenshot below for posterity purposes.

Probably the most prominent feature in the new design is the homepage design, which is notably different than the blog-style homepage of the previous design.
At the top are the three latest posts, then below a few featured articles to the left of a subscription area. Below are the latest five themes displayed in an interesting non-slidery way.
Most of the rest of the features of the site are more are less the same, including threaded comments, tag pages for different types of themes, etc.
There’s a bit less emphasis on social media stuff, especially on the single post pages where I’d have share icons for MySpace, Technorati, and other sites you probably don’t even use.
There’s still a simple Facebook/Twitter link on the left side of the content area on single posts though. If you really feel the need to share a link on MySpace, however, feel free to do that as you normally would, but without the aid of a social networking icon link here.
On every non-post page (except the homepage) I have a listing in the sidebar for “Recommended Products,” which are basically just affiliate links to paid WordPress themes and plugins I would recommend to others.
On single posts, this area is replaced with a “Related Posts” section.
So that’s about it. There may be a few kinks here and there, if you notice anything feel free to let me know in the comments (that are still threaded, by the way).
Oh and also, if you’re using IE6, this site probably looks like garbage because I use a lot of transparent PNG images, and I don’t intend on fixing it either. View it in a modern browser.
Let me know what you think in the comments! Oh yeah, and hire James McDonald for all your design needs, and hopefully me to code it.
Related posts:
As the title says. Yes, it’s really been that long. This year has been relatively quiet compared to previous years. In the past year, four free WordPress themes were released along with two free CSS templates. There was also one “donation” theme.
Like I outlined in my Thank You theme post, I’ve been a bit busy the past year off at school, hence the lack of posts. In the rest of the post, I’ll outline some future plans for the site.
First of all, a new site design is in the works. In fact, it’s already been designed. You can probably spot a few teasers on James McDonald’s Dribbble page, who was also the designer of the current theme you see here.
There are a few more theme releases in the works, which may or may not be commercial.
It’s that time of the year again. As some of you might remember, I attended WordCamp Raleigh last year as well and had a great time (and even got video interviewed!).
This year looks like it’ll be a great follow-up with a great lineup of speakers. If you’re going to be there, let me know. I’d love to meet you and/or see you again. I should be arriving Friday and will stay until Sunday.
If you haven’t registered yet, and would like to, there are still tickets available as of publishing this post at $45 each. Below is a link to register.
P.S. If you don’t know what I look like, see the video interview linked to above. My appearance hasn’t changed that much since a year ago.
Related posts:
It’s been a while. Two months and 15 days to be exact. What have I been up to? I don’t really go much into my personal life here, but starting at a new college this past year has consumed a lot of my time.
I’m participating in my school’s Relay for Life program. For those who don’t know, it’s a fundraiser for the American Cancer Society, culminating in a 12-hour event throughout the night. There are 5 days until the event.
I don’t ask for much here, but I wanted to make a quick solicitation here for donations. In return, I’ve developed a pretty simple Twenty Ten child theme that I’ve entitled, Thank You.
Being coded in almost all CSS makes it really easy to customize the colors. Also make sure to utilize the WordPress 3.0 menus with descriptions, otherwise the menus will look weird.
It’s pretty simple, just go to my personal Relay for Life page and click the “Donate” button. You’ll be taken to a page which will let you donate by credit card, directly to the American Cancer Society. There is a minimum donation of $5 (set by them, not me).
There is also an option to mail in your donation but credit card would probably be more convenient. Any donation is greatly appreciated.
P.S. To any Jersey Shore fans, the “DTF?” on my shirt stands for “Down to fight?” and not what you’re probably thinking.
After you’ve donated, simply e-mail me directly at lelandf@gmail.com or my contact form with the full name you donated under. I get a notification of all new donations so I’ll know who donated what.
I’ll respond with the child theme as an attachment. I’ll be trying my best to monitor my email box throughout the day.
You should think of this theme as a simple token of my appreciation for donating, not like you’re purchasing a premium theme with support expected.
I have tested this theme pretty thoroughly with theme unit tests and such. And keep it mind it’s a Twenty Ten child theme, so the core theme should always be up-to-date with the latest WordPress standards.
Of course, if there’s some grievous error within the theme, just let me know via comment or email and I’ll look into it. Anything customization related, however, I really can’t offer support for it.
GPL. Once you have hold of the theme, you can do pretty much whatever you want with it.
I’m not a big fan of apology posts, and only like to post if I have something actually worth posting. All I have to say is, expect some more activity this summer when I have more time.
And keep following me on Twitter, as I still do check it every day, despite my evident lack of regular tweets.
Most importantly, thanks so much for supporting this cause. If you have any questions or comments feel free to shoot me an email or leave a comment below.
Related posts:
Just yesterday, Lisa Sabin-Wilson of WordPress for Dummies fame, announced a new venture called Allure Themes.
She was nice enough to grant me an interview here on Theme Lab to offer more insight on her decision to launch a commercial theme business, and more.
Read on to see the rest of the interview with Lisa. My questions will be in bold with the responses below.
Already being an established book author with WordPress for Dummies, as well as a succesful custom theme designer at E.Webscapes, why take the plunge into the commercial theme market? Why now, especially with the market being as saturated as it is?
I’m always interested in new challenges and trying things I’ve never done before. I’ve always done custom design work, but never experienced what it takes to release product for mass consumption – I saw this as an opportunity to try something new. Certainly not *new* by the standards of the overall commercial theme market – just new for me.
In terms of the market being saturated? Many argue that the custom design market is saturated with amazing competition, yet I do pretty good for myself in that arena, and nearly every custom design provider I know is turning away more work than they take because there is SO much work out there.
I don’t think it is for me, or anyone else to say that any market is saturated until it proves itself so through natural selection. That said, I’m a firm believer that there is always room for dessert.
I answered an interview question for Ryan Imel over at WPCandy recently on the future of WP Themes in 2011 and part of my answer included the emergence of themes targeted towards particular markets and niche areas – I see Allure doing exactly that with themes designed for women.
You described Allure Themes as a commercial theme provider providing themes “just for women.” How will the themes cater to women exactly?
Hard to explain, really – it’s a design style that may appeal to some women. As a custom theme provider, I do fill custom requests for people using existing frameworks or themes. A large portion of those clients of mine come to me with commercial themes and say “Make it girly” or “Pretty this up for me” – that kind of thing.
We’re talking colors, design elements, flourishes and special touches that create a particular look and feel that some women want.
We are talking “sun room” not “man cave”. Does that make sense? Note: since our announcement, some people assume this means Pink. While there will be pink – and periwinkle and black and purple and green and….you get it.
We have niche theme sites for bands, politicians, but none (as far as I know) for women, which makes it a relatively untapped market. How are you expecting this niche market to respond overall?
With themed designs that are geared toward areas that are important to women. Some examples? Mommy blogging, pregnancy blogging, health and beauty, women entrepreneurs, women in sports – I could go on, but you get the idea. The style I have in mind may not appeal to all female bloggers and site owners out there – but I do have a clear picture of what many are looking for just through the mountain of custom design requests from women that I take through E.Webscapes. This is not to say that existing commercial themes don’t fill this need; Allure just provides another option with a targeted focus.
It seems like iThemes will play an important role in terms of supporting the themes from Allure Themes. Why choose iThemes for this role? Can you give us any more insight on the role iThemes will play in the development and support of Allure Themes?
iThemes has a proven and successful history of providing and supporting commercial products in the WordPress community. They know what they are doing and are very good at what they do. Over the years, I have developed a solid relationship with the team at iThemes and have 100% faith in their abilities. Having iThemes on board is my dream team and Allure users know, from day one, that there is a solid, experienced team in place to support the themes, answer their questions and build community.
How does the organizational chart look? Because I am one person and they are a full team of people – iThemes brings stability to Allure from day one. iThemes is providing the backbone for support, sales, marketing and affiliate program management. Basically, they focus on all the back end stuff which leaves me free to focus on the creative design and development.
Do you plan on using a framework for your themes, similar to what StudioPress does with Genesis and its child themes? Or will they be standalone themes? Why?
Yes, and no.
I am definitely going the way of parent/child themes at Allure because it absolutely makes the most sense for both myself, and our users. A parent/child theme set up is the best of both worlds for everyone – making it easy for me, the developer, to operate within a solid foundation and provide upgrades to our users that won’t break their own customizations and hard work. It’s a win-win.
That said, WordPress is my framework and Allure will not seek to re-invent that wheel. I intend to keep it simple, work within a clean parent theme that provides a solid, basic foundation for our users that will be there when they need us, and politely steps out of their way when they don’t.
You are also the author of BuddyPress for Dummies, which begs the question, are there any plans for offering BuddyPress themes as well as WordPress? What about other platforms?

Interesting you are not the only person to ask that question – funny how one little book can pigeon-hole a person, isn’t it?
Of course I want Allure to provide the features and functionality that our users seek. Over the past year at E.Webscapes, we’ve seen a literal explosion of BuddyPress site requests and have been doing quite a lot of BuddyPress work for our clients there, so I do see this as an ever growing, emerging need; especially as BuddyPress becomes more and more brilliant with each new release. Providing a BuddyPress Addon for Allure is definitely something I intend to pursue after I get the party started with the initial launch.
You’re part of the secretive MassivePress project, will the launch Allure Themes have anything to do with launch of MassivePress?
MassivePress launches this week and we are all very excited about it. By “we”, I mean our founders: myself, Jason Schuller, Cory Miller, Michael Torbert, Carl Hancock and Grant Griffiths — just a fabulous group of people, with amazing talent to boot! I can’t say enough about these guys – I love ‘em. I guess that’s why I am very happy to be a part of the core MassivePress group.
I can’t go into much more detail about MassivePress until its launch, at which point I will be more than happy to yap about it. But, in terms of Allure… I can say, without divulging too much; Allure is a stand out example of what our mission and purpose for MassivePress is all about. Our pre-launch web site has been online since November (to be replaced by our official site later this week with our launch). I’m not giving away any secrets when I quote our words found there: “A coalition of like-minded WordPress entrepreneurs who think we can do more together than apart.” Stay tuned.
Anything else you’d like to say about Allure Themes or anything else?
My email has been popping since the announcement of Allure on Wednesday morning – so let me answer some of the questions that have cropped up most often:
Launching Allure does not mean that E.Webscapes is going away. E.Webscapes continues to be a strong business and one that intend to continue building. On the contrary, I see Allure and E.Webscapes working together in perfect harmony.
Yes, Allure will port to popular theme frameworks and make child themes for iThemes Builder, Headway and Genesis available on AllureThemes.com. It makes sense to provide a full array of choice to our user base. (eventually, after our initial launch)
Yes, Allure will be fully 100% GPL across the board, no questions asked. iThemes, and myself, fully respect the GPL and intend to operate within.
Ok, one more – follow us on Twitter: @AllureThemes
Thanks so much for your time and interest, Leland – hopefully we bump into one another at another WordCamp sometime this year!
The interview above is unedited, aside from myself adding a few links. I’d like to thank Lisa for taking the time to do this interview, especially so soon after her announcement. This will definitely be an interesting commercial theme venture to keep an eye on in the future.
Oh, and if Twitter isn’t your thing, you can also subscribe to Allure Themes’ newsletter to keep up with the latest updates.
What do you think of Allure Themes?
Related posts:
To honor the anniversary of WordPress today, Ben Welch-Bolen of Site5 hosting has created a little thank you site with a free WordPress Anniversary Theme. On the site, you can download the theme, and leave a small thank you message.
The theme itself is pretty good looking (click the screenshot above for a live preview) and has a number of useful features.
Pretty cool to see a dedicated WordPress appreciation site like this, plus the free theme makes it all the sweeter.
Related posts:
Imagine this scenario, you find a really cool snippet of code on one of the many WordPress tutorial sites out there and paste it in your theme’s functions.php file.
The code snippet works as advertised, and you then release your theme for sale on a well-known theme marketplace. Let’s pick a random one out of a hat and go with… ThemeForest.
Suddenly your theme becomes really popular, may be because of the massive list of apparently useful “features” you have listed on your theme’s sales page. With your theme’s success, also comes a number of support queries, mostly to do with plugins breaking while using your theme.
How did this happen, you wonder? Maybe it’s because you blindly pasted random globs of WordPress code into your functions.php file without actually thinking about or anticipating any potential compatibility issues.
So, I was trying to find a snippet of code that would pull all the attached images from a post and then display them on that post automatically. I eventually found a piece of code on Stack Overflow, pasted it in my functions file, and it appeared to solve the problem.
The first line of code was the following:
add_filter('the_content', 'strip_shortcodes');
Oh well, it worked, I didn’t think anything of it. I later tried to embed a contact form with a shortcode. Surprise, it didn’t work and I spent about an hour trying to figure out why. If I actually read through the code I was pasting, I would’ve known.
This was for a client site, not a released theme, so luckily I didn’t have to deal with a deluge of support queries due to my stupid mistake.
Here’s a quote from Carl Hancock (developer of Gravity Forms) on this very topic:
Supporting the popular Gravity Forms plugin means we see more than our fair share of poorly coded themes. One of the primary support related issues we run into are themes that aren’t developed using best practices, which results in Gravity Forms styling issues and in some cases conflicts that result in Gravity Forms not functioning properly.
The biggest culprit in these situations are themes that include code snippets copy-n-pasted from tutorial sites. Theme developers seem to think that just because the code snippet was on a tutorial site, it must be good. Unfortunately that isn’t always the case and these poor decisions result in headaches and support issues for users.
Want to limit the potential for running into issues with plugins caused by a poorly developed theme? Stick to reputable theme developers such as Press75, iThemes, Headway Themes, Organic Themes, WooThemes, and StudioPress to name a few. Be weary of theme marketplaces where the experience and skill set of the author may be lacking. In most cases you get what you pay for.
A lot of these issues can likely be avoided by following WordPress coding standards. For example, you should be prefixing your function names to avoid any potential conflicts.
In the case of styling issues with Gravity Forms, you may want to avoid certain blanket styles on form and input elements, and instead use WordPress default ID selectors for the bulk of your form stylings.
These includes #searchform, #s, #searchsubmit in the search box. Also #commentform #author, #url, #email, #comment, #submit for the comment form.
If you’re a theme developer, and not too well-versed at PHP, be careful when copying and pasting these code snippets into your theme. Even if you’re not that great at PHP, you can at least read through the code and try to make some sense of it before using it.
Like if you find that your shortcodes aren’t functioning properly, a line of code that mentions “strip_shortcodes” might have something to do with that.
Sometimes I get the feeling that WordPress theme developers just paste random snippets in their functions.php file, just so they can list another “feature” on their theme’s sales pages.
While I’m not a big fan of this sort of idea, it gets into a whole other argument on the role of themes and plugins on WordPress sites, which I’ll save for a future post.
Related posts: