ThemeShaper http://themeshaper.com Shaping WordPress Themes Tue, 16 Mar 2010 13:30:50 +0000 en hourly 1 ThemeShaperhttp://feedburner.google.com I’ve Joined Automattic http://feedproxy.google.com/~r/ThemeShaper/~3/6Yzhq9ZK6Js/ http://themeshaper.com/ian-stewart-joined-automattic/#comments Thu, 04 Mar 2010 12:11:12 +0000 Ian Stewart http://themeshaper.com/?p=2420 Today marks the first day of my employment as a Theme Wrangler with Automattic and it feels great. I’m more than excited to finally let you know what I’ve been up to for the last little bit.

What can I say besides awesome, awesome, awesome? The enormous opportunity for learning and improvement; all the super-talented, friendly people; the chance to work on so many really, really cool projects—it’s almost unbelievable. This is a dream job for me.

So, yes, really excited. To say the least. And I don’t want to say too much right now so I’m going to keep this short. Though I imagine you have one very big question you’d like me to get to.

What’s Going To Happen To ThemeShaper?

Only exciting stuff.

First of all, I’m excited to officially announce that all the commercial Thematic Child Themes I’ve created are now free to download without charge.

Go download them, have fun with them, and make something really cool.

Now, this’ll be a big change for ThemeShaper but here’s an even bigger one: ThemeShaper isn’t just my blog anymore.

This is going to be awesome.

ThemeShaper will become a public-facing blog for the Theme Team now assembling at Automattic. A place where we can help provide the best possible experience for everyone involved in WordPress theming; from the noobiest of beginners to the most powerful of WordPress wizards.

Or like I said above, this is going to be awesome.

Stay tuned to the ThemeShaper blog for more updates. And if you’ve got some ideas for what you’d like to see here I’d love to hear them. Let me know what you think in the comments.

Similar Posts:
]]> http://themeshaper.com/ian-stewart-joined-automattic/feed/ 99 http://themeshaper.com/ian-stewart-joined-automattic/ Thematic 0.9.6.1 Is Live http://feedproxy.google.com/~r/ThemeShaper/~3/KFXfHK0gpjQ/ http://themeshaper.com/thematic-0961-is-live/#comments Mon, 08 Feb 2010 23:14:44 +0000 Ian Stewart http://themeshaper.com/?p=2389 the latest version of Thematic from WordPress.org]]> Thanks to the always impressive Chris Gossmann we inch ever closer to Thematic version 1. Put your upgrade hats on and check out Thematic 0.9.6.1 As always you can download the latest version of Thematic from WordPress.org.

What’s new in Thematic 0.9.6.1

  • Added two new hooks:

    • thematic_abovecontainer()
    • thematic_belowcontainer()

  • Thematic prevents the creation of the WordPress Generator. This can be filtered using a filter for thematic_hide_generators. Return TRUE and the WordPress Generator will be created.

  • Added some filters to comments.php:

    • The standard text ‘One Comment’ can be filtered using thematic_singlecomment_text.
    • The standard text ‘n Comments’ can be filtered using thematic_multiplecomments_text.
    • The standard text ‘Post a Comment’ can be filtered using thematic_postcomment_text.
    • The standard text ‘Post a Reply to %s’ can be filtered using thematic_postreply_text.
    • The standard text ‘Comment’ for the text box can be filtered using thematic_commentbox_text.
    • The standard text ‘Post Comment’ for the send button can be filtered using thematic_commentbutton_text.

  • Split up thematic_postheader() and thematic_postfooter() into sub-functions. With these new functions it is easier to rearrange the displayed data.

    • thematic_postheader()
    • thematic_postheader_posttitle()
    • thematic_postheader_postmeta()
    • thematic_postmeta_authorlink()
    • thematic_postmeta_entrydate()
    • thematic_postmeta_editlink()
    • thematic_postfooter()
    • thematic_postfooter_posteditlink()
    • thematic_postfooter_postcategory()
    • thematic_postfooter_posttags()
    • thematic_postfooter_postconnect()
    • thematic_postfooter_postcomments()

  • The several parts of the body class can be switched off using the following filters:

    • thematic_show_bodyclass (master switch)
    • thematic_show_bc_wordpress
    • thematic_show_bc_datetime
    • thematic_show_bc_contenttype
    • thematic_show_bc_singular
    • thematic_show_bc_singlepost
    • thematic_show_bc_authorarchives
    • thematic_show_bc_categoryarchives
    • thematic_show_bc_tagarchives
    • thematic_show_bc_pages
    • thematic_show_bc_search
    • thematic_show_bc_loggedin
    • thematic_show_bc_browser

  • <head profile="http://gmpg.org/xfn/11"> can be filtered using thematic_head_profile.

  • Complete rewrite of the widget areas:

    The widget areas are now controlled by the $thematic_widgetized_areas array. This is the basic layout:

    1. $thematic_widgetized_areas = array(
    2.  
    3.                'Primary Aside' => array(
    4.  
    5.                                'admin_menu_order' => 100,
    6.  
    7.                                'args' => array (
    8.  
    9.                                                'name' => 'Primary Aside',
    10.  
    11.                                                'id' => 'primary-aside',
    12.  
    13.                                                'description' => __('The primary widget area, most often used as a sidebar.', 'thematic'),
    14.  
    15.                                                'before_widget' => thematic_before_widget(),
    16.  
    17.                                                'after_widget' => thematic_after_widget(),
    18.  
    19.                                                'before_title' => thematic_before_title(),
    20.  
    21.                                                'after_title' => thematic_after_title(),
    22.  
    23.                                                ),
    24.  
    25.                                'action_hook'    => 'widget_area_primary_aside',
    26.  
    27.                                'function'                            => 'thematic_primary_aside',
    28.  
    29.                                'priority'                              => 10,
    30.  
    31.                                ),
    32.  
    33.                )

    Using this array you can remove unnecessary widget areas with a filter before these are created:

    1. function remove_widget_area($content) {
    2.  
    3.          unset($content['Primary Aside']);
    4.  
    5.          return $content;
    6.  
    7. }
    8.  
    9. add_filter('thematic_widgetized_areas', 'remove_widget_area');

    Note: This will completely remove a widget area. Do not use this functionality with conditional tags to remove a widget area from a certain page / post.

    A widget area can be renamed:

    1. function rename_widget_area($content) {
    2.  
    3.          $content['Primary Aside']['args']['name'] = 'My first Sidebar';
    4.  
    5.          return $content;
    6.  
    7. }
    8.  
    9. add_filter('thematic_widgetized_areas', 'rename_widget_area');

    Display a widget area based on a conditional tag:

    1. // First we create a new function to display the secondary aside only on pages:
    2.  
    3. function childtheme_secondary_aside() {
    4.  
    5.          if (is_page()) {
    6.  
    7.                  if (is_sidebar_active('secondary-aside')) {
    8.  
    9.                           echo thematic_before_widget_area('secondary-aside');
    10.  
    11.                           dynamic_sidebar('secondary-aside');
    12.  
    13.                           echo thematic_after_widget_area('secondary-aside');
    14.  
    15.                  }
    16.  
    17.          }
    18.  
    19. }
    20.  
    21. // … and then … without removing an action or so:
    22.  
    23. function change_secondary_aside($content) {
    24.  
    25.          $content['Secondary Aside']['function'] = 'childtheme_secondary_aside';
    26.  
    27.          return $content;
    28.  
    29. }
    30.  
    31. add_filter('thematic_widgetized_areas','change_secondary_aside');

    Create several widget areas that will be displayed on a certain position based on conditional tags:

    1. function change_secondary_aside($content) {
    2.  
    3.          $content['Secondary Aside']['function'] = 'childtheme_secondary_aside';
    4.  
    5.          $content['Secondary Aside Pages'] = array(
    6.  
    7.                  'admin_menu_order' => 201,
    8.  
    9.                  'args' => array (
    10.  
    11.                           'name' => 'Secondary Aside Pages',
    12.  
    13.                           'id' => 'secondary-aside-pages',
    14.  
    15.                           'description' => __('The secondary widget area for pages.', 'childtheme'),
    16.  
    17.                           'before_widget' => thematic_before_widget(),
    18.  
    19.                           'after_widget' => thematic_after_widget(),
    20.  
    21.                           'before_title' => thematic_before_title(),
    22.  
    23.                           'after_title' => thematic_after_title(),
    24.  
    25.                  ),
    26.  
    27.                  'action_hook'    => 'thematic_secondary_aside',
    28.  
    29.                  'function'                => 'childtheme_secondary_aside',
    30.  
    31.                  'priority'                => 10,
    32.  
    33.          );
    34.  
    35.  
    36.  
    37.          return $content;
    38.  
    39. }
    40.  
    41. add_filter('thematic_widgetized_areas','change_secondary_aside');
    42.  
    43.  
    44.  
    45. function childtheme_secondary_aside() {
    46.  
    47.          if (is_sidebar_active('secondary-aside') && is_sidebar_active('secondary-aside-pages')) {
    48.  
    49.                  echo thematic_before_widget_area('secondary-aside');
    50.  
    51.                  if (is_page()) {
    52.  
    53.                           dynamic_sidebar('secondary-aside-pages');
    54.  
    55.                  } else {
    56.  
    57.                           dynamic_sidebar('secondary-aside');
    58.  
    59.                  }
    60.  
    61.                  echo thematic_after_widget_area('secondary-aside');
    62.  
    63.          }
    64.  
    65. }

  • Fixed:

    • Fixed a bug in thematic_page_title() not displaying a correct title in attachement.php
    • Fixed the widget area ‘Index Insert’.
    • Fixed a bug in thematic_create_robots().
Similar Posts:
]]> http://themeshaper.com/thematic-0961-is-live/feed/ 11 http://themeshaper.com/thematic-0961-is-live/ The Perfect Blog Theme http://feedproxy.google.com/~r/ThemeShaper/~3/_WywduLLXV8/ http://themeshaper.com/the-perfect-blog-theme/#comments Sun, 07 Feb 2010 12:51:09 +0000 Ian Stewart http://themeshaper.com/?p=2392 What is the perfect blog theme? I’ve been thinking about it and I think I have the answer.

For the blogger: The perfect blog theme disappears into the background and doesn’t hinder their writing in any way—in fact, it encourages it.

For the reader: The perfect blog theme disappears into the background and doesn’t hinder their reading in any way—in fact, it encourages it.

Please note what I haven’t included in my answer. It’s important.

Know of any publicly released themes that fit my criteria? I’d really like to know about them. Let me know if you’ve found them, or just let me know your thoughts on the perfect blog theme by leaving a comment.

And don’t be afraid to argue! I’ve been known to be wrong!

Similar Posts:
]]> http://themeshaper.com/the-perfect-blog-theme/feed/ 17 http://themeshaper.com/the-perfect-blog-theme/ An Idea for a New Default Theme for WordPress—Introducing Kirby http://feedproxy.google.com/~r/ThemeShaper/~3/xpRQdiYo4tg/ http://themeshaper.com/new-default-theme-wordpress-kirby/#comments Wed, 06 Jan 2010 20:37:59 +0000 Ian Stewart http://themeshaper.com/?p=2236 In 2010 WordPress will get a new Default Theme, replacing the beloved/hated Kubrick Theme with a new Theme called 2010. I’ve got opinions on the matter. Oh, do I have opinions. I’ve even gone so far as to create a working idea for a new Default WordPress Theme. Read on to find out more.

Principles for a WordPress Default Theme

I’ve set myself some principles for designing a Default Theme.

  1. It should look like a really nice blog theme with a “WordPress” feel
  2. It should be easy to modify and tweak by directly editing template files
  3. It should be easy to Child Theme without directly editing template files

These 3 principles sound pretty simple, right? Well, not really. If you’re just talking about them, yeah maybe. But talking about a WordPress Theme doesn’t make one. Are they so simple when you actually try and make a WordPress Theme that follows these principles?

No. Not really.

First of all, it’s relatively easy to design a WordPress Theme knowing it will only be used by people who have a specific purpose for it. You only download a WordPress Theme if you want to use it, right? Well, how do you design a WordPress Theme that will be forced on people? Most especially, forced on people who are new to WordPress? People who may take one look at the Default Theme and slap their monitors in horror lest they look on something so hideous, so, so limiting ever again?

Plus, who says a Default Theme should look like a “blog” Theme?

And, while knowing that most people start their WordPress-theming with the Default Theme and, increasingly, their web designing with the Default Theme—knowing and suffering under that awful pressure and responsibility—how do you make it easy to tweak simply and make it easy to Child Theme—without turning it into a Framework Theme.

Trust me here. While people may be asking for a Framework as the Default Theme they’re not all asking for the same thing. Something as robust as Thematic will have people running screaming away from it. People that want Framework Themes can download Framework Themes. I’m not so sure every new user should have one forced on them.

Introducing The Kirby Theme

So I made the Kirby Theme. Actions speak louder than words, right? In the same way, code speaks louder than ideas. What better way to show off your ideas for a new Default Theme than to actually code one up? I get a fun project and you get a new Theme.

Download Kirby from the Official Free Themes Directory (or just preview it here).

Will all my ideas for a new Theme be good? Nope. That’s awesome though. Let’s get some of the bad ideas out in the open before we’re stuck with them.

Will some of my ideas be good? I hope so! Download the Theme; read this long rambling post; leave some comments; argue with me. I’ll probably listen to your ideas and might just figure out how to make Kirby better. And your ideas just might help whatever Theme becomes the new Default Theme get better too.

Important note: I’ve never been a fan of my own design work (I’m my worst critic) so I won’t try and sell you too much on what I’ve done here except to say that I’ve kept things intentionally simple. But I will ask that if the design is holding you back please, please look at the structure of this thing. It’s super flexible and easy to modify and I’d hate to see it ignored because of any failings I’ve made visually.

The Layout of The Kirby Theme

Anyone want to argue about fixed-width designs versus fluid layouts? Sigh. I don’t. I’ve had the argument long enough with myself. Once I decided on including a changeable header image I decided I was creating a fixed-width layout.

But while the design is fixed width the markup isn’t. Kirby could look like anything you want it to be if you’re tweaking it. Or modifying it with a Child Theme. Which, frankly, is a great idea (once it gets a little more stable, design-wise, that is). Regardless, however you want to modify it, I’ve included some sample layouts—in kirby/layouts/—that you can use to get you started.

If you’re just tweaking Kirby directly you can choose a new layout simply by editing one line in style.css—@import url('layouts/2c-r.css');—and selecting a new file to import. Why not make a setting where you can choose your layout from a drop down menu? I don’t know. That’s always been a Theme setting that rubbed me the wrong way and I think it adds another level of weirdness when you’re Child Theming. You’ll have to convince me this is a good idea.

And If you didn’t notice, I’m ripping off Kubrick. That default header image is essentially Kubrick’s (only Kirby’s is squared off) and the color scheme is almost identical (Kirby is more contrast-ey). In my opinion there’s no sense in throwing out everything. Like it or not, the big blue header, gray background, and 2-column layout look like WordPress.

The point: A Default Theme can have a fixed width. But don’t worry. With the right markup it can look like anything—even a fluid width site. If the Default Theme was somewhat reminiscent of what’s come before that might not be so bad.

The Header

Like I said, I’ve included a changeable header that you can update via the WordPress backend. Something people new to blogging with WordPress always want. But we also want to have Kirby work great for Child Themes, right? Even ones that aren’t as wide as Kirby. How about we filter those header constants?

  1. define('HEADER_IMAGE_WIDTH', apply_filters('kirby_header_image_width', '940'));
  2. define('HEADER_IMAGE_HEIGHT', apply_filters('kirby_header_image_height', '198'));

The idea here is that anything simple in a Default Theme that can’t be altered with CSS needs to be filtered. That goes for avatars too. It’s such a simple thing and goes a long way towards making a Default Theme usable by people looking to use Child Themes. And if it’s used in a Default Theme it’ll spread out into other Themes and make them more usable too.

Also the Title and Description have been largely left alone. A Default Theme needs to accommodate ridiculously long titles and descriptions. Something I hope Kirby does.

The point: A changeable header is a good idea. Filtering image sizes is probably a good idea too. And you can’t get too fancy with the design.

The Content Area

Whether I failed at it or not I wanted the content to be easy to read. Inspired by the 100% Easy-2-Read Standard and Wilson Miner’s latest redesign I’ve gone big. Potentially horsey 16-pixel big. But nothing ventured, nothing gained.

Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small.

Blogs should be about the content, content that’s easy to read. And a WordPress Default Theme should be a blog theme (yes, even though WordPress is a CMS—which it is, if you didn’t know). That’s all I have to say about that.

Further to the general blogginess of the Kirby Theme, if you fill out your Bio in your user profile you get a nice little About The Author section at the bottom of your posts. Bonus!

The point: WordPress is first and foremost a blogging tool and the Default Theme should still look like a Blog Theme. Readability is important.

The Sidebars

Kirby has 2 sidebars. Even though it looks like there’s only one. Which could be … annoying—if it weren’t awesome. Let me explain.

This is something I learned from the now famous Sandbox Theme and like to think I improved on slightly with the Thematic Theme and now Kirby. Even if your basic Theme look is a 2-column one, having 2 sidebars with a particular HTML structure will allow you to duplicate almost any blog or site layout. 1-column, 2-column, 3-column, or something different. Have you seen all the different Thematic Child Themes? There’s a reason they can all look so different and in most cases it’s not “hooks and filters”—it’s the HTML structure.

If you markup any Theme just so, there are very few layouts you can’t accomplish with a few simple CSS tweaks.

The point: Structure, structure, structure. 2 sidebars are still needed if we want a Default Theme to be flexible—even if it looks like there’s only one sidebar.

The Footer

The footer has four little widget areas for those that long for the fattest of fat footers. Which is kinda cool. Using is_active_sidebar() the markup only appears if you’re actually using them. Again, kinda cool but not the coolest.

Cooler still is the editable footer message imported from Thematic. It’s all shortcoded up for you too so you can do things like easily add a copyright date or a link back to the Theme landing page—or not. It’s editable. You can take all that stuff out of there without worrying about editing theme files.

Why no widget area here? Because I don’t want to encourage anyone to put The Calendar Widget where the design really needs a bit of text. Sometimes limitations are good.

Ooh! I also added a fancier link to WordPress itself, using the lovely description “Semantic Personal Publishing Platform” as the title text. I love that description. Also the simple CSS image replacement is a working example for people looking to replace their site titles with a logo.

The point: People like to edit the stuff in their footers without touching code. Let them. Simple CSS is its own tutorial.

Other Cool Stuff

This Theme should have other cool stuff, shouldn’t it? I’m working on it (I’ve got a Kirby to-do list).

Right now it has a Feature Template that makes the content full-width and moves the sidebars into 2 columns underneath. You could do a lot of stuff with this template. Using The Section Widget Plugin and Query Posts Widget Plugin you could even make your home page look sorta like a magazine. But I’m not sure if this is the best way to go about this sorta thing.

Which brings me to the big problem with designing something intended to be a Default Theme. Where do you start and where do you end with the cool stuff? Originally I intended on adding Thumbnail support (and may yet change my mind on this again) but, well, that’s not really a default thing is it? But, then, what is the default mode of a WordPress blog?

What does a Default Theme have to do? A big question. And, besides being one that needs to be answered, is sure to generate an answer that will annoy as many people as it does please.

In other words, a fun project! WordPress Themers, have a go at it yourself. You might contribute some cool ideas to the next WordPress Default Theme and at the very least you’ll have a new Theme to contribute back to the WordPress ecosystem. No small thing at all.

The point: You can’t just go putting everything in a Default Theme. But it’s worth thinking about and more Themers should give it a shot.

And Remember …

The Kirby Theme: What sucks? What’s awesome? Where have I gone off the rails in my pursuit of a Default Theme? Let me know in the comments. Don’t be shy.

Further Reading

Similar Posts:
]]> http://themeshaper.com/new-default-theme-wordpress-kirby/feed/ 87 http://themeshaper.com/new-default-theme-wordpress-kirby/ Registering New Sidebars for Custom Page Templates The Smart Way http://feedproxy.google.com/~r/ThemeShaper/~3/TsbqSYm7Hxs/ http://themeshaper.com/registering-new-sidebars-for-custom-page-templates-the-smart-way/#comments Sun, 20 Dec 2009 17:55:25 +0000 Ian Stewart http://themeshaper.com/?p=2225 One of the cooler ideas for a new WordPress default Theme that’s come up has been the idea of including a not-so-blog-ish custom home page template with the Theme. Something optional that you could use if wanted your home page to look a little different. Maybe more of a traditional web site look (whatever that is) or a magazine look. Simply create a new page, assign this custom template to it, set it as your home page, and boom! New look.

I thought this was a great idea too. Especially if that custom page template was totally widgetized. Load up whatever dynamic content you want there with the Query Posts Widget or just use Text Widgets. The default styles of the new 2010 Theme can decide which of several widget areas is the ‘featured’ area and if you want something different—without wanting to change the markup—you can move things around with a Child Theme.

Great, right? Wrong.

You’d have to register new widget areas. Widget areas that would be confusingly unavailable if you weren’t using the custom home page template. Unless …

Here’s a really nifty function written up by Chris Gossmann that’ll check to see if a particular custom page template is active. Chris had to write a SQL query to get this to work so be thankful that he survived to tell us about it.

  1. function is_pagetemplate_active($pagetemplate = '') {
  2.  global $wpdb;
  3.  $sql = "select meta_key from $wpdb->postmeta where meta_key like '_wp_page_template' and meta_value like '" . $pagetemplate . "'";
  4.  $result = $wpdb->query($sql);
  5.  if ($result) {
  6.   return TRUE;
  7.  } else {
  8.   return FALSE;
  9.  }
  10. } // is_pagetemplate_active()

OK. Even by itself that function is kinda cool. There’s a few neat things you can do with it. Here’s one. Combine it with the following code for registering a new sidebar in the functions.php file of your WordPress Theme:

  1. function test_template_widgets_init() {    
  2.  if(is_pagetemplate_active('template-active.php')) {
  3.                
  4.   register_sidebar( array (
  5.    'name' => 'Test Widget Area',
  6.    'id' => 'test-widget-area',
  7.    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  8.    'after_widget' => "</li>",
  9.    'before_title' => '<h3 class="widget-title">',
  10.    'after_title' => '</h3>',
  11.   ) );
  12.  
  13.  } // end test for active template
  14. } // test_template_widgets_init()
  15. add_action ( 'init' , 'test_template_widgets_init' );

Can you guess what that does? Using our new conditional function, is_pagetemplate_active(), we’re registering a new widget area only if, in this case, template-active.php is being used by one of our pages. Completely bypassing our earlier problem of widget areas potentially hanging around without a page for them to be displayed on.

What do you think? Pretty cool, huh? I see lots of really neat possibilities here for custom page templates in WordPress Themes and in Child Themes.

Similar Posts:
]]> http://themeshaper.com/registering-new-sidebars-for-custom-page-templates-the-smart-way/feed/ 16 http://themeshaper.com/registering-new-sidebars-for-custom-page-templates-the-smart-way/ Don’t Get Hacked: WordPress Security Tips http://feedproxy.google.com/~r/ThemeShaper/~3/pemAHUNy-vg/ http://themeshaper.com/dont-get-hacked-wordpress-security-tips/#comments Sat, 05 Dec 2009 16:30:57 +0000 Ian Stewart http://themeshaper.com/?p=2210 In case you didn’t hear ThemeShaper was hacked. You know what? It really sucks. I’ve got two tips and a plugin recommendation that I want to pass on to you so the same stupid thing doesn’t happen to your WordPress install. And these aren’t even my ideas! These are time tested and tried things that just plain work.

After that comes a list of some further plugins and resources that’ll help harden up your WordPress install and keep hackers at bay. So read on.

Do a Fresh Install of WordPress, Plugins, & Themes

Do a fresh install of all WordPress, your plugins, and themes. That means deleting a whole whack of WordPress files just like you were doing an upgrade. And deleting and re-installing ALL your themes and plugins. If you’ve done ANY customization to any one of these files go through them line by line or re-store a local version that never made it to your web server. And while you’re at it start keeping local copies of your edited themes and plugins that have never made it to your web server.

You’re doing this to help make sure your current setup isn’t already compromised.

Hardening WordPress with htaccess

The Blog Security blog has a great article on how to lock out anyone trying to mess with your WordPress files using htaccess. It’s dead simple to do and requires only cut-paste skills and FTP access to your server, and a quick trip to What’s My IP. Anyone can do it. Check it out now and harden your blog.

The Update Notifier Plugin

The single biggest exploitable entry point on any WordPress install is going to be outdated versions of WordPress, themes and plugins. If you don’t know how extreme this can get check out this comment from one of my readers.

I remember when something similar happened to me. Fortunately I managed to find someone willing to help who knew quite a bit more about WordPress than me. The breach was traced to a caching plugin that was out of date by about a week.

The Update Notifier Plugin helps solve this problem by checking the official repository on a regular schedule and sending you an email when it’s time to upgrade.

Further Security Resources and Plugins

Similar Posts:
]]> http://themeshaper.com/dont-get-hacked-wordpress-security-tips/feed/ 17 http://themeshaper.com/dont-get-hacked-wordpress-security-tips/ ThemeShaper.com Probably Unhacked http://feedproxy.google.com/~r/ThemeShaper/~3/e12uKjsSWn0/ http://themeshaper.com/themeshapercom-hacked/#comments Thu, 03 Dec 2009 21:21:48 +0000 Ian Stewart http://themeshaper.com/?p=2201 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.

Similar Posts:
]]> http://themeshaper.com/themeshapercom-hacked/feed/ 38 http://themeshaper.com/themeshapercom-hacked/ Neutica+: An Advanced Child Theme for the Thematic Theme Framework http://feedproxy.google.com/~r/ThemeShaper/~3/DVkhWMrv1dc/ http://themeshaper.com/neutica-advanced-child-theme-thematic-theme/#comments Tue, 13 Oct 2009 17:35:28 +0000 Ian Stewart http://themeshaper.com/?p=2190 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.

Similar Posts:
]]> http://themeshaper.com/neutica-advanced-child-theme-thematic-theme/feed/ 5 http://themeshaper.com/neutica-advanced-child-theme-thematic-theme/ The Photo Lover Thematic Child Theme http://feedproxy.google.com/~r/ThemeShaper/~3/eXcd8E2CCYA/ http://themeshaper.com/photo-lover-thematic-child-theme/#comments Mon, 12 Oct 2009 16:00:58 +0000 Ian Stewart http://themeshaper.com/?p=2186 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.

Similar Posts:
]]> http://themeshaper.com/photo-lover-thematic-child-theme/feed/ 1 http://themeshaper.com/photo-lover-thematic-child-theme/ Can I Make a ‘Premium’ Theme My Own? And Then Release It? http://feedproxy.google.com/~r/ThemeShaper/~3/GoAevaCKkjU/ http://themeshaper.com/premium-theme-release/#comments Fri, 09 Oct 2009 18:23:11 +0000 Ian Stewart http://themeshaper.com/?p=2172 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?

Similar Posts:
]]> http://themeshaper.com/premium-theme-release/feed/ 26 http://themeshaper.com/premium-theme-release/ 40+ Thematic Resources, Tutorials and Links http://feedproxy.google.com/~r/ThemeShaper/~3/PEKlLmzmIrY/ http://themeshaper.com/40-thematic-resources-tutorials-links/#comments Tue, 29 Sep 2009 14:54:38 +0000 Ian Stewart http://themeshaper.com/?p=2169 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.

Similar Posts:
]]> http://themeshaper.com/40-thematic-resources-tutorials-links/feed/ 3 http://themeshaper.com/40-thematic-resources-tutorials-links/ Get The Thematic Feature Site Theme http://feedproxy.google.com/~r/ThemeShaper/~3/EHjoPdT5J-s/ http://themeshaper.com/thematic-feature-site-theme/#comments Mon, 24 Aug 2009 02:15:34 +0000 Ian Stewart http://themeshaper.com/?p=2158 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.

Similar Posts:
]]> http://themeshaper.com/thematic-feature-site-theme/feed/ 3 http://themeshaper.com/thematic-feature-site-theme/ Early Morning Thematic Child Theme http://feedproxy.google.com/~r/ThemeShaper/~3/41CjI5RNAgM/ http://themeshaper.com/early-morning-thematic-child-theme/#comments Thu, 20 Aug 2009 19:06:54 +0000 Ian Stewart http://themeshaper.com/?p=2130 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)
Similar Posts:
]]> http://themeshaper.com/early-morning-thematic-child-theme/feed/ 2 http://themeshaper.com/early-morning-thematic-child-theme/ SimpleCart (js) a free WP E-Commerce & Thematic Child Theme http://feedproxy.google.com/~r/ThemeShaper/~3/5addxFjdAXs/ http://themeshaper.com/simplecart-js-free-wp-ecommerce-thematic-child-theme/#comments Thu, 20 Aug 2009 18:59:34 +0000 Ian Stewart http://themeshaper.com/?p=2127 Want a free Thematic Child Theme ’specially designed to work with the awesome WP E-Commerce Plugin? You can start with the brilliant SimpleCart (js) Theme by Chris Wallace.

simplecart-560x396

Similar Posts:
]]> http://themeshaper.com/simplecart-js-free-wp-ecommerce-thematic-child-theme/feed/ 4 http://themeshaper.com/simplecart-js-free-wp-ecommerce-thematic-child-theme/ How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts http://feedproxy.google.com/~r/ThemeShaper/~3/22BxLom80Tk/ http://themeshaper.com/reset-rebuild-wordpress-theme-css-define-layouts/#comments Tue, 07 Jul 2009 11:00:35 +0000 Ian Stewart http://themeshaper.com/?p=1976 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.

  1. /* Reset default browser styles */
  2. @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.

  1. /* Rebuild default browser styles */
  2. @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?

  1. /* Basic WordPress Styles */
  2. @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.

  1. /* Import a basic layout */
  2. @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.

  1. #wrapper {
  2.   margin: 0 auto;
  3.   width: 960px;
  4. }

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.

  1. #access {
  2.  margin: 0 0 1.5em 0;
  3.  overflow: auto;
  4. }
  5. .skip-link {
  6.  position:absolute;
  7.         left:-9000px;
  8. }
  9. .menu ul {
  10.  list-style: none;
  11.  margin: 0;
  12. }
  13. .menu ul ul {
  14.  display: none;
  15. }
  16. .menu li {
  17.  display: inline;
  18. }
  19. .menu a {
  20.  display: block;
  21.  float: left;
  22. }

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.

Similar Posts:
]]> http://themeshaper.com/reset-rebuild-wordpress-theme-css-define-layouts/feed/ 65 http://themeshaper.com/reset-rebuild-wordpress-theme-css-define-layouts/