ThemeShaper.com Probably Unhacked

Update: I’ve done a mass hardening (that sounds gross) on everything here at the ThemeShaper ranch and—and it looks like we’re cool now. Let’s hope things stay that way. Hey!—at least I learned something about WordPress security, right?

I’m not sure when but some time ago ThemeShaper.com was hacked. I’m fairly sure it wasn’t a random sort of script-based bot attack but targeted directly at this site. I know this because the idiot that did this uploaded a hacked version of Thematic to a downloads folder on my site and altered the links on the Thematic landing page to point to it. Crap.

You’ll know you have a hacked version if you’ve got an sv_ss.php file in thematic/library/languages/.

If you’ve recently downloaded Thematic or are worried at all there’s a simple fix. Download Thematic again from the WordPress.org Themes directory and thank God there’s a free central repository for these sort of things.

Again, crap. And my apologies. I like making ‘the WordPress news’ but not for something like this. But I would like to assure you this is not a hack resulting from anything wrong with Thematic. Just one of those things that tends to happen to popular WordPress-based sites. It could happen to anyone.

I just wish it didn’t happen to me. Or you guys.

Now, as for the hack. I don’t know how it happened. It’s been suggested to me that it came through a weak plugin. I usually keep everything up to date here on ThemeShaper so, well, I don’t know. We’ll see, I guess. I do know that last night I discovered my wp-admin and wp-includes directories were 2 megabytes larger than they should be. I deleted them and replaced them. Here’s hoping that put an end to this.

If it doesn’t, and my site disappears suddenly, well, crap, it didn’t work.

Hey, at least the front page isn’t ThemeShaper recommended hosting right? Right?

Sigh. And it’s my birthday today too. What a day.

Neutica+: An Advanced Child Theme for the Thematic Theme Framework

Thematic expert, Allan Cole, has released another beautiful Thematic Child Theme. This time it’s an advanced Child Theme called, Neutica+.

Thematic expert, Allan Cole, has released another beautiful Thematic Child Theme. This time it’s an advanced Child Theme called, Neutica+. Behold the enormous screenshot.

neutica-screenshot

Neutica+ Features:

  • A strict grid based design mixed with clean typography heavily influenced by the work of Josef Müller-Brockmann
  • A theme options page for easy customization of colors, layout, post formating, etc
  • Optional Featured posts section which pulls random ‚Äústicky‚Äù posts
  • 3 widgetized sidebar areas
  • 5 additional & optional, in-post, ad-spaces for banners & widgets
  • Crispy clean and valid XHTML Markup with Microformats courtesy the of Thematic theme framework
  • Valid CSS that has been browser proofed for Firefox, Safari, & most Internet Explorer browsers (including the dreaded IE6!)

You absolutely have to check this one out. It just plain deserves to be seen. Go take a look at the Neutica+ Child Theme for Thematic.

The Photo Lover Thematic Child Theme

Dave Smith of Gite Guru has launched a new Thematic Child Theme called Photo Lover specifically targeting those with a love of photography and imagery.

Dave Smith of Gite Guru has launched a new Thematic Child Theme called Photo Lover specifically targeting those with a love of photography and imagery.

screenshot_580wide

Photo Lover features:

  • Random background image pulled from a ‘backgrounds’ folder within the theme folder
  • Content showing on semi transparency over the background image
  • A show / hide image function to remove the content layer so that the background image can be seen in all it’s glory

Make sure you check out the Photo Lover Theme for Thematic.

Can I Make a ‘Premium’ Theme My Own? And Then Release It?

Can you make a ‘Premium’ Theme your own? And then release it? For free? Or for a fee? The answer is simple. Yes.

That is, if the ‘Premium’ WordPress Theme in question—premium meaning you have to pay for it—is licensed under the GPL. The GPL is the GNU General Public License; a document included with a bunch of different open source projects, like WordPress, that covers the terms of the release and makes sure that it always remains open source. Anyway, what does this mean for ‘Premium’ Themes, you ask.

It means you can take a ‘Premium’ WordPress Theme you bought and do whatever you want with it—except release it again as a ‘closed source’ project. The really cool thing? This gives you the freedom to take that project and improve on it.

Here’s an example. You’re a designer and you love working with Photoshop. But it doesn’t have an instant rainbows-and-unicorns button. Adobe won’t put it in. If Photoshop were an open source project you could take the code and add in the technology to instantly add rainbows and unicorns to every one of your photos—and then give your customized Photoshop [RaU Edition] to anyone who wanted it. Presumably, anyone who loved rainbows and unicorns as much as you.

Same thing with GPL WordPress Themes.

But is it right? Not everyone thinks so. Some people have suggested it’s sleazy (mostly in response to people buying a Theme and immediately turning around to release it for free). What follows is my answer to the question. It’s something I posted earlier on the WordPress Tavern forums and here now where everyone reading ThemeShaper can easily find it.

Ian Stewart’s 4 Ideas About Modifying Premium Themes and Releasing Them

  1. Redistributing unmodified GPL code over the internet is not sleazy. Redistributing unmodified GPL code is what the GPL is all about—even if the author of that code is charging for it and depending on that income.

  2. Redistributing unmodified GPL code over the internet is pointless and stupid. If you’re doing it as a matter of free open source principles, sure, I could see that—but you’re muddying up the web. It doesn’t add any value to the code and unless you plan on keeping up with updates to that code you’re actually doing everyone who sees that redistributed code a huge disservice. Way to go.

  3. I say “everyone who sees that redistributed code” because that will be a small amount of people. A small amount of people who will be rightfully wary of downloading that code. The vast majority of people will choose to download that code from the original author. Anyone want to start downloading WordPress from “www.crazywpdownloadsite.com”? I thought so. Remember that “trust” and “authority” are huge things on the web. People selling GPL WordPress Themes: stop worrying about this.

  4. Now that we know that people redistributing unmodified GPL WordPress Themes over the internet are stupid we need to recognize how awesome it is that people can modify GPL WordPress Themes and redistribute them online. Theme-sellers: this is how you got started selling themes. Every single one of you. Remember when you were nervously trying to lock up the code for your first theme options pages behind a restrictive license? The code that you essentially copy-pasted from the same 2 online tutorials I and countless others did? I’m looking at all of you. Anyway, where would you be if that code wasn’t given to you in the first place? Where would you be if you didn’t fork the Default Theme? Or Sandbox? Or Classic Theme? Where would you be if Matt didn’t fork b2? Don’t worry about people forking your code. The freedom to redistribute modified code is incredibly awesome and, no exaggeration, is quite literally making the world a better place.

What Now?

You can find a whole whack of people releasing their Premium Themes under the GPL License on the official WordPress Commercial Themes Directory. You can find all my commercial Child Themes for Thematic in the ThemeShaper Thematic Theme Store.

Anyone ready to start making WordPress Themes awesome-er?

40+ Thematic Resources, Tutorials and Links

The post Build WordPress Sites Fast With the Thematic Theme Framework by Es Developed is a great resource for anyone wanting to get started with the Thematic Theme. It lists over 40 resources and tutorials that’ll get you where you want to be with rapid WordPress Theme development.

And there’s some great explanation behind why you’d want to use the Thematic Theme. Under the heading Don’t Touch That Theme:

To create your theme, you don’t actually edit any of Thematic’s theme files. Instead, you make changes using a separate child theme.

It’s really powerful since you’re not actually touching any part of Thematic. You just get a nice starting place, without worries about future Thematic updates overwriting your code edits.

You don’t have to rewrite a bunch of code all over again–you’re just adding the bits that you want to be different. This works very much like the custom styles on WordPress.com hosted blogs.

Make sure you check out Build WordPress Sites Fast With the Thematic Theme Framework.

Get The Thematic Feature Site Theme

Want to get the Thematic Child Theme I used to build the last 2 versions of ThemeShaper? Well now you can! I call it the Thematic Feature Site Theme and—just like the Power Blog Theme—it’s another entry in the Thematic Development Series.

feature-site

Just like Power Blog it requires a little bit of code-editing but it’s an awesome starting point. I know because I use it myself. I think you’re going to want to use it too.

Read the big write-up, check out the demo and go get the Thematic Feature Site Theme.

Early Morning Thematic Child Theme

Cristi Antohe has—yet again—released a beautiful and incredibly usable Thematic Child Theme, Early Morning.

thumb_580

It’s light, elegant and pleasantly surprising. This theme is all about blogging. It doesn’t scream at you, instead it takes a step back and lets readers read.

It also has some nice features out of the box:

  • You can upload your own logo
  • It comes with it’s own custom designed Twitter widget, so your visitors can see what you’re doing from your blog
  • It comes with 5 background options that you can select from the Early Morning Theme Options (Green, Turquoise, Brick Red, Gray and Black)

How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts

Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques. Check it out at How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts. It’s part of The ThemeShaper WordPress Theme Tutorial: 2nd Edition.

CSS can be tricky. It can also be incredibly easy. I had a lot of help getting my head wrapped around CSS when I was first starting out and I take great pleasure in helping others the same way I was first helped: with solid code examples to learn from.

Here we’re going to layout a WordPress Theme CSS development arsenal for you:

  • A stylesheet that resets default CSS across all web browsers and makes a sane standard we can work from
  • Another stylesheet that rebuilds our typographical foundations in a smart way
  • A stylesheet just for WordPress classes (keeping the first two pure so we can use them for non-WordPress projects)
  • A series of 6 fluid stylesheets that will create ALL the common blog and website layouts you expect—and each one ready to adapt into a fixed width layout.

All the code we’ll talk about is open-source, under the GPL, and browse-able at the Your Theme Project Page. View the raw source for any one of these files and copy-paste at your leisure.

First things first, make a “style” directory in your Theme folder. That’s where we’ll be putting everything. Your CSS quiver, as it were. Ready to hit the target?

Reset CSS

Our Reset CSS is adapted from Eric Meyer’s famous Reset CSS with some minor, minor changes. Basically what it does is take all the typographical defaults of every browser and … obliterates them. You’re left with a squashy, gray mess.

It’s beautiful.

What this does is equalize the rendering of every browser, leaving you free to ignore countless individual quirks particular to each one.

Using it is simple. Add the following lines to your style.css, at the very top, immediately after the initial comments section.

/* Reset default browser styles */
@import url('styles/reset.css');

Reload, your page and check it what reset.css does in multiple browsers (if you can). It’s wonderfully gross, isn’t it?

Rebuild CSS

Our Rebuild CSS is my own personal invention adapted from an early version of the Blueprint CSS typography stylesheet and refined in the Thematic Project. What it does is swing back some vertical rhythm in our pages, but in a really smart way.

What I’ve tried to do with this iteration of my typography-rebuild CSS is combine the best of both worlds for web typography: using Pixels for font height, with relative line-height for the main declaration on the body element, and Ems for all subsequent vertical margins (like for paragraphs and lists).

What does this mean? It’s really easy to set your font height later—without doing any math work—and have all of your typographical elements follow suit with an appropriate vertical rhythm (the vertical space between type elements like paragraphs and lists).

Using rebuild.css is also really easy. Just add the following lines immediately after your reset.css import.

/* Rebuild default browser styles */
@import url('styles/rebuild.css');

The Basic WordPress Styles

There are some elements in WordPress that you’re just going to have to style every time. What I’ve done is taken those styles and put them in there own little corner called wp.css.

Right now, what we’ve got in there are styles for floating all the images—including handling captions and image galleries. And! preset styles for simple pull-quotes. All you need to do is add a class of left or right to the blockquote tag and you’re ready to roll.

Can you guess how we’re going to use wp.css?

/* Basic WordPress Styles */
@import url('styles/wp.css');

All The Layouts You’ll Ever Need

For your new theme, I’ve taken the rock-solid, indestructible layouts that shipped with the Sandbox Theme and adapted them for your new HTML structure. There are 6 in total. Each is a fluid layout (that stretches to fill the width of your browser window) but each one is easily adaptable to a fixed width layout.

Using anyone of these layouts is simple. Immediately after your basic WordPress styles import, import one of these layouts. Here’s how to import the 3 column layout, with the content in the center.

/* Import a basic layout */
@import url('styles/3c-b.css');

The simplest method of turning any one of these layouts into a fixed-width layout is to add a width and centering margin to the #wrapper div.

#wrapper {
  margin: 0 auto;
  width: 960px;
}

Bonus: Styling The Menu

If you’ve never taken an unordered list (that’s the smart markup generated by wp_page_menu) and styled it to look like a menu before it can seem kinda weird. As a bonus, here’s the CSS I use when I start out creating menus for WordPress Themes.

#access {
	margin: 0 0 1.5em 0;
	overflow: auto;
}
.skip-link {
	position:absolute;
        left:-9000px;
}
.menu ul {
	list-style: none;
	margin: 0;
}
.menu ul ul {
	display: none;
}
.menu li {
	display: inline;
}
.menu a {
	display: block;
	float: left;
}

It’s pretty simple but it’ll put you on sure footing. Good luck!

How To Create a WordPress Theme

This post concludes the WordPress Themes Tutorial series that shows you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

  1. WordPress Theme Tutorial Introduction
  2. Theme Development Tools
  3. Creating a Theme HTML Structure
  4. Template and Directory Structure
  5. The Header Template
  6. The Index Template
  7. The Single Post, Post Attachment, & 404 Templates
  8. The Comments Template
  9. The Search Template & The Page Template
  10. The Archive, Author, Category & Tags Template
  11. The Sidebar Template
  12. Reset-Rebuild Theme CSS & Define Your Layouts

If you have any suggestions for posts that will fit in this series or complement what we’ve done so far I’d be glad to hear them. Let me know in the comments.