It’s time I attack one of the least favorite items on any of my checklists, changing a blog theme.  Sure, when I was just starting out in the world themed sites and blogs I thought it was cool to change my theme fairly often, but I’ve come to have a series of different thoughts on the subject over the past few years.

Changing themes is a pain.  It’s a bigger pain when you have to change it before you’re really ready to, as I’ve had to do in this case due to a plugin conflict.  I prefer it to be a well thought out process with a nice tidy unveiling at the end, but I was unable to do so in this particular instance and to be frank, that irritates the hell out of me.

Changing a theme too often also dilutes your brand and should not be undertaken lightly.  Your visitors really should know what to expect when they stop by, not be confronted by a never ending series of changes to design, layout or flow.  Familiar is good, especially if the experience was good to start with.

The reality is that change is inevitable.  In this case I’m changing to a new theme because my previous theme simply placed too many restrictions on my creativity.  Image and attachment sizes were limited to incredibly small sizes or worse, squashed by the theme’s overly-strict CSS rules. I started writing this blog to share my thoughts, my acquired knowledge and to let my creative side out a little.  A theme that holds any part of that back becomes stifling after a certain point and that’s what happened here.

So I’m asking for just a little patience as I get things tidied up around here and get all the little details put in place.  Everything will be back up and running the way it should be within the next few days.  The new theme (and I’ll let you all in on what that is as soon as I’m positive I’m going to stick with it) is up and running.

Peace. I’m out.

I’ve built several completely custom WordPress themes in he past.  While it isn’t terribly difficult to do if you have a history of developing sites in php, it can seem terribly daunting to someone who hasn’t been buried neck-deep in code before, and even for those who have, keeping track of all the different functions and hooks can be a bit troubling at times.

Wouldn’t it be great if there was a simple to follow tutorial that you could use to get your own theme up and running a little more quickly?  One that covers the basics of building a theme in language that a novice can understand, but is also useful as a reference for those of us who just needed to look something up in a hurry?

The guys at ThemShaper thought so too, and they have published what, in my humble opinion, is probably the single best tutorial on building a WordPress theme ever written.  Their tutorial covers everything from how to set up a test server on your Windows or Mac machine to how to enable threaded comments and add widgetized areas.

While this is a great starter tutorial for those who have never built their own theme from scratch before, it can probably teach those of us who don’t do it daily a thing or two as well.  it’s also a great reference read if you just need to remember a few WordPress calls.

Kudos to ThemeShaper.  not only have they got one of the greatest free WordPress themes ever released with Thematic, but they’re more than willing to help other people craft an awesome theme as well.

The Thematic framework is a robust tool for designers and developers, but before we can even begin to dig in to making modifications we’re going to need to know where to look.  Thematic provides a robust set of predefined CSS selectors and fortunately for our purposes, Deryk Wenaus of Blue Mandala has built a wonderful diagram of the framework as it ships out of the box.

So before we even begin to discuss making changes to our very own custom child theme I think it’s best if today’s post just lays out the structure of the Thematic framework for us.  Take some time to study this diagram carefully against a default thematic layout.  It will be our reference point for any modifications made in the future.

Thematic Page Structure

This is an outline of major elements on a thematic page. It includes most div elements, theme actions and hooks, and widget areas.

Once again I’d like to thank Deryk for giving me permission to use his wonderful diagram as a jumping off point. I’ll be referring to it often as we move through the next few posts.  You may find it very handy too if you’re getting ready to tackle Thematic’s default theme, so feel free to download a copy of the image for your own reference.

If you haven’t heard of WordPress child themes you’ve either been buried under a rock somewhere or, like me, you just don’t keep up with the WordPress developer buzz as well as you should.  Either way, child themes are about to revolutionize the way we develop for WordPress.

Basically put, a child theme is a template that inherits all of the styles and functions of its parent theme.  This allows you to modify a theme to your liking without ever mucking around in the original authors source code (unless you want to) and your changes will not be modified even if a newer version of that heme becomes available.

The bonus here is simplicity and continuity.  you can change a compatible theme until theme unil the cows come home and upgrade to the newest version with the newest, coolest options without ever losing the changes you’ve made to the theme.  For those of us that regularly change header code to point to feedburner feeds or custom trackers this is a mystical and magical thing.

I could spend weeks explaining the details and setting up a parent theme for your perusal, but the work has already been done for us, so let’s start with what’s already working, and working well.

Enter the Thematic Theme Foundation, a parent theme that has all the features any serious blog developer could ever imagine all in one place and just itching to be modified.  Not only is the framework ready to go as it comes, but it ships with a sample child theme, several different default layout files and a ton of other goodies.

We could easily start with the default child theme, but Devin from WordPress Theming has done a lot of our work for us in terms of adding some useful features to thematic with his very own child theme framework that incorporates an options panel and some neat code bites, so why not just start with his example and expand it?

To follow along over the next few days, you’ll need to install both the Thematic Theme Foundation and Devin’s Example Framework.  Both are installed just like normal WordPress themes, but we won’t be working with either directly.

*Note: You’ll probably want to install these themes on a sandbox or development version of WordPress, as thematic is not very visually appealing out of the box.

In the next installment I’ll walk you through a closer look at what Thematic is and how it works, as well as taking a look at what Devin has already done for us in terms of getting options wothy of any premium theme in place. (We all like theme options, don’t we?)  thematic has an awful lot going on, so we’ll have to get a bit technical in the beginning if we want to have a hope of making changes that work the way we’d like them to.

From there we’ll get started modifying the thing to be something far more visually stimulating than we started off with. We’ll put the full power of Thematic’s 13 Widget aware areas to use and tweak the design and layout into something resembling a pro-blogger theme.

If there are any particular topics you’d like me to cover, feel free to leave them in the comments.  I’m just digging into thematic as well, so your interests could help this tutorial move in a direction that’s more useful for all of us.

Until tomorrow;

Peace. I’m out.

I’ve been doing a lot of gearing up for change this year, both here and at my other blogs.  One change I’ve been considering is a switch to a theme framework, rather than a standard theme.  One such option is of course, the venerable Thesis theme famework, but for my personal needs at the moment, I wasn’t necessarily looking for that level of customization.

After much poking about, I found the Thematic Theme Foundation, and I’m giving it healthy thought.  It seems robust enough, and even though there aren’t currently a whole lot of child themes available right now, creating my own from scratch doesn’t look like it will prove to be all that difficult.  I may even switch over to one of the “out of the box” child themes for a few days, just to see how things play out.

I know that I could just spend the money for thesis and have the one single WordPress platform that everyone in the world is talking about. I know that they all say it’s simple to use, easy to configure and to be honest, just looks plain great right out of the box, but in the end, I like to be a little different and I’m kind of proud of that part of me as well.

Peace. I’m out.

If you work with WordPress or any other CMS platform there will undoubtedly come a time when you need to modify the template files to suit your own needs. Off the shelf templates are a great starting point, but there always seems to be something that could work better if it was tweaked just a little or look a lot better if just one or two little nudges were made to the layout.

If you’ve ever tried modifying the template files in the built-in WordPress theme editor, you’ve probably already run into some pretty significant issues, such as lack of error checking, wonky layouts and poor handling of php code. Editing themes in this manner is nothing short of nightmarish, even for seasoned developers. Another option is to use a decent desktop text editor such as BBEdit for Mac, CodePad for Windows based systems or Gedit or Kate for Linux, but these editors are still lacking in fundamental features that developing in php requires, such as code completion and advanced syntax checking that can keep you from accidentally causing your entire site to go offline due to a missing semicolon or open tag.

Enter Aptana Studio, the only editor you’ll ever need to download. Not only is Aptana rich in all the features that you might need to get your themes and templates up to speed, including syntax checking, code tidying and code completion, but it’s also available in versions for Mac, windows and Linux, which means that even if you work on multiple platforms as I do , you will be working in a nearly identical editing environment on each computer you use, which can increase productivity exponentially.

While Aptana is incredibly feature-rich in the area of code editing, the lack of a WYSIWG editor may be a put off for novice users. My advice in this case is really a preference, but I honestly feel that code should never be edited in a WYSIWYG environment. Visual editors have a nasty habit of reformatting your code. Even the venerable DreamWeaver does so on occasion and these changes can be a nightmare to find and repair if you haven’t noticed them very quickly. Also, if you’re developing template files for a CMS, a visual editor isn’t going to do you much good anyway, as the editor does not have the ability to actually run the code that displays the template.

Aptana shines in other areas of development as well. If you’ve ever wanted to develop an iPhone App, you can with Aptana. The iPhone plugin even supplies a virtual iPhone browser so that you can do preliminary testing in the IDE, not on your iPhone. Once you’ve gotten things working the way you’d like, just install the app. Aptana also offers full support for Adobe air development, Ruby on Rails, Python, and Nokia phones.

Forget your FTP software. Aptana’s built in project manager handles file uploads and full site syncs with ease. this feature was what set DreamWeaver above most other editors, but Aptana Studio has tackled this head on with one of the most robust remote toolkits I’ve seen.

If you’ve been looking for a good, solid, robust and reliable development IDE, Aptana might just be the one you need to look into. The professional edition does come at a cost, but unless you work as part of a large development team, i doubt you will ever need to use the features provided by Aptana studio Pro. The Free Standalone edition will work just fine for you.

But hey, I’m just a satisfied customer. I love Aptana so much that it’s installed on every one of my computers. (though it is mind numbingly slow on my micro-notebook). Everyone has their own personal preferences in a development environment. I know people who happily develop web templates using Microsoft Word, though why in the world they would do that is far beyond my capability to understand. (And their sites rarely work properly.)

Try Aptana for yourself. I really do think that you’ll fall in love with it. And just in case you’re wondering, no one is paying me to write this. I’m an Aptana evangelist and I’m on a mission to get everyone who has ever needed to work on a php file to give it a shot. The more people that use it, the better it will become, as the developers will have more motivation to build bigger, better, badder versions of the software.

That’s all for now kiddies. I’ll get back on the ball and get more posted in the next few days, now that I’ve shaken the funk that I’ve been in through most of the Holidays. There were a lot of reasons for it, but I’m back and I want o start the new year of with a bang!

This is the third in a series of articles that will cover making several modifications to the Mimbo 2.2 Theme by Darren Hoyt.  I am modifying the theme to fit the requirements for my own site.  To see the first step requirements and get an overview of what I have planned, please read The first article in the series; Modifying Mimbo 2.2: Step One – Identifying Requirements. For the methods used to modify the way the theme handles output in various places, check the second article in the series; Modifying Mimbo 2.2: Step Two – Modifying index.php. This article focuses on modifying the way Mimbo pulls images for the lead and secondary articles on the main page.

Darren Hoyt's Excellent Mimbo Theme

As I mentioned in the first part of this series, I wanted to change the way Mimbo handles it’s images to better suit my work flow.  By default, mimbo stores it’s main page images under the theme folder in a folder named (appropriately enough) images.  Using this method requires that the user has to find an alternate method of uploading his or her image files, which to me is counter-intuitive.  My solution is to store the images in the standard WordPress manner and upload them using the “Add media” dialog.

This might sound inefficient, but for me, the ability to simply paste the image url into the proper custom field makes things much more pleasant, especially when I’m trying to get several posts knocked out in one session.

The default Mimbo code for the “Featured” image is as follows:

<?php
// this is where the Lead Story module begins
   query_posts('showposts=1&cat=3'); ?>
 
    <a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php
// this is where the Lead Story image gets printed	
	$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" id="leadpic" /></a>
 
<a class="title" title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>">
    </a>

The important piece of code in this instance is in the image call where Mimbo’s creator hard coded the image location:

< img src="<?php bloginfo('template_url'); ?>/images/<?php
// this is where the Lead Story image gets printed

by simply removing the hard coded file location, we can now add our images in the normal way and simply paste the url into the custom fields we’ve created to handle them. In my case these fields were lead_image and secondary_image respectively.

That’s as simple as it gets, script kiddies! with just a few tweaks, you can easily take Mimbo from this:

Darren Hoyt's Excellent Mimbo Theme

To this:

Pretty nifty, huh?

If you’re thinking to yourself… “Hey, there are a LOT of modifications here!” You would be absolutely correct.  Unfortunately these are out of the scope of what I set out to do here, and I’m not going to get into them. Truth be told, I didn’t do anything that difficult, even for a WordPress theme novice.  All of the information you need to get the job done is in the WordPress Codex or on various sites areound the Internet.  There really is no reason for me to go over them again.  I’ll leave it up to you as an excercise in coding.

I do hope that some of the information provided here proves useful to someone.  If so, drop me a comment and let me know!

Happy Coding!

This is the second in a series of articles that will cover making several modifications to the Mimbo 2.2 Theme by Darren Hoyt.  I am modifying the theme to fit the requirements for my own site.  To see the first step requirements and get an overview of what I have planned, please read The first article in the series; Modifying Mimbo 2.2: Step One – Identifying Requirements

Without further ado, let’s dive into the code for Mimbo’s index page and make some changes.

As mentioned in the first article of this series, one of my first requirements is to use category names to pull posts out of the DB instead of the default setup used by Mimbo.  This isn’t a complicated change, but when there is the possibility of category ID’s Changing over the course of a development cycle, it’s one worth making.  To make this modification, we first need to find the section of code that calls Lead Story and modify it to suit our new requirements.

Again, this is where Mimbo shines, since we find the first module right at line 6 of the index.php file:

    <a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php // this is where the Lead Story image gets printed     $values = get_post_custom_values(" alt="" />" alt="" id="leadpic" /></a>
 
<a class="title" title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>">
 
    </a>
 
    {<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>">More»</a>}
 
<!--END FEATURE-->

Line 8 is the one we need to take note of.

query_posts('showposts=1&cat=3'); ?>

This call uses the query_post() WordPress Template Tag to get 1 post from category number 3. What I want to do is get the category information by name, in this case, I want to display the latest post in the “Recipes” category, so we’ll change it to read as follows:

query_posts('showposts=1&category_name="Recipes"'); ?>

The next call to a category ID is at line 16, where the category title is displayed:

// this is where the name of the Lead Story category gets printed
wp_list_categories('include=3&title_li=&style=none'); ?>

Unfortunately, wp_list_categories does not allow for calling categories by name, But since we’re already specifying the ctegory that we want by name, we can actually eliminate the need for a php call and simply print out the name using standard html, like so:

// this is where the name of the Lead Story category gets printed
?>Recipes

In the case of the project I’m working on I don’t think it’s necessary to print anything at all, since it’s going to be pretty obvious that what the reader is looking at is going to be a recipe, so I’ve made the following changes, starting at line 13:

<!--h3 -->
<!-- /h3 -->

Note: I’ve only commented these lines out in the example so that line numbering is not affected. In my production site, I removed them from the code altogether.

The second change needed to match my requirements is that all posts must show author information and date posted. This is required by several of my advertisers so that they can keep track of the dates that ads and reviews were posted. I really like to keep the people that make me money happy, so I’m going to add it in.

I want the author and date information directly under the title of the post, so I’ll start adding it in at line 19:

Original Code:

// this is where the title of the Lead Story gets printed
the_title(); ?>

And we change it to:

// this is where the title of the Lead Story gets printed
    the_title(); ?>
 
    <small>By   •  • Category: </small>

What we end up with is this:

The layout works, but it's not pretty. It'll look better once images are added and a little css work is done

As you can see, we now have no category title and we’ve got author information posted below the post title using the <small> tag. It’s ugly as heck, but all that will be fixed later when I modify the stylesheet to fit the look that I want. What we’ve got is working, and I call that so-far so-good.

At this point we need to modify the second column to work in the same manner. Since we’ve already covered the changes needed in detail, I’ll just show you the code before and after modification, you should easily be able to spot the changes:

Original Featured Column:

<div id="leftcol">
 
<div class="feature"><a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php // this is where the custom field prints images for each Feature       $values = get_post_custom_values(" alt="" />" alt="" /></a><a class="title" rel="bookmark" href="<?php the_permalink() ?>">
      »</a></div>
</div>
 
 
<!--END LEFTCOL-->

Modified Featured Column:

<div id="leftcol">
 
<h3>Recent Recipes</h3>
 
 
<div class="feature"><a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php // this is where the custom field prints images for each Recent Recipe       $values = get_post_custom_values(" alt="" />" alt="" /></a><a class="title" rel="bookmark" href="<?php the_permalink() ?>">
      »</a>
 
<div><small>By   • </small></div>
 
 
{<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>">More»</a>}</div>
</div>
 
 
<!--END LEFTCOL-->

The only real difference between the first examples is at line 36 of the modified code:

    query_posts('showposts=5&category_name="Recipes"&offset=1'); ?>

Take note of the offset parameter. Since we’re using this column as a continuation of the Recipes category and we’ve already displayed the first, or newest, post in the category, we use the offset parameter and set it to 1. This tells query_posts() to skip the newest post in this category and move on to the next, thus avoiding a duplicate entry.
The other main addition to the original Mimbo code is that I added post excerpts to the second column so that my readers get a glimpse, or teaser, of what the post contains. I’ve found that this can, at times, persuade a casual passerby to move a little deeper into the blog to find what he or she needs, and again adheres to the requirements of some of the companies that pay me to do what I do.
Modifying the third column is much the same as the first two. with just one exception. By default Mimbo uses an array of integers to get the first post in any number of categories specified and display them in that column:

<div id="rightcol">
 
<div class="clearfloat">
 
I just switched the code up a bit to use category names so that all the sections matched:
 
<pre escaped="true" lang="php">// this is where you enter the IDs of which categories you want to display
$display_categories = array("Reviews","Product Spotlight", "Blog Events", "Shopping Alerts", "Blog Spotlight");
foreach ($display_categories as $category) { ?>
 
<div class="clearfloat">

all I did was change the array to hold category names instead of ID’s. After that, changing just the “cat=” parameter to “category_name=” was enough to let the theme do the rest. Easy Peasy!

I think that’s enough to digest for now. In the next article I’ll address modifying the way Mimbo handles images on the main page.

Have fun coding!

The time has come for a major revision to my cooking and recipe blog and I’ve chosen Mimbo to act as the basis for the redesign.  This is the first in a series of articles that will detail the changes I’ve implemented to get Mimbo working the way that I need it to.

There are few WordPress themes that have garnered as much interest as Mimbo 2.2 by Darren Hoyt. Not only is the layout elegant and very functional, the code is commented well enough to allow anything from minor tweaks to major customizations without much trouble at all. This ease of customization is a major component to Mimbo’s success and in my opinion it is also Mimbo’s strongest point.

As with any theme modification, steps need to be taken in advance to know what your requirements are.  In this case, Mimbo’s layout is nearly everything that I want for the new look, but there are some very real changes that I need implemented.  Styling is almost always a more significant time investment, so it’s best to decide early on if the project will have to be switched to another theme. Before worrying about new header graphics of mucking with CSS styles, it’s necessary to map out the core functionality necessary for your specific needs and make sure that everything is functioning in the way that you need it to. This can save hours in development time.

With that in mind, let’s look at the way that Mimbo functions “out of the box”.

Darren Hoyt's Mimbo. As a theme, it's a work of art

Mimbo has four main “Modules” on the index page. (The sidebar has multiple modules, but I’ll focus on those in a later post) Each of these modules displays the latest information from different defined categories in whatever order the blog owner prefers. Let’s look at each in turn and see how the theme author has this laid out.

1. The Lead Story Module: Designed to handle important news, or the most relevant piece of “core content” of your blog.  It puts it right out there in front of the world at twice the width of anything else on the page.
2. The “Features” Module: a chronological listing from the “Featured” category.  Generally the column where important “bread and butter” articles would be featured.  Again this targets your core content, but it’s content of a less immediately relevant nature than the Lead Story.
3. The Right Column Module: The right column module displays the latest article posted in any number of assigned categories.  This is really the feature that puts Mimbo firmly in the “Magazine Style” WordPress theme category, and it is a very powerful tool which shows the casual visitor a brief overview of the topics you’ve been covering.
4. The Sidebar Module: Mimbo’s sidebar contains all of the usual suspects for a WordPress theme. It has Widget support, categories, and recent this-or-that in place right out of the box.  It also has a few custom pieces like another module for displaying very short snippets of site news and advertising space built in, which just ads another level of power to this theme.

If you’re just looking for a theme that looks great and works flawlessly, Mimbo is good right off the shelf.  Unfortunately, it’s almost never that simple. Every blog or website has its own special requirements and even as good as Mimbo is, it’s just not quite what I need at this point.

The first change I need to implement is in modules 1 and 2.  For my needs, both of these modules needs to display information from the same category. They also need to display the date the post was published and a few other bits of information, such as a spoiler (or excerpt) and author information.

Module 3 is already set up much the way I need it, so the basic functionality does not need to change, but there are some formatting issues that need to be addressed. As with Modules 1 and 2, I need the date published, a better excerpt and author information shown on the main page.

In addition, I want to change the way Mimbo handles some of it’s main display functions to better suit my work flow and the fact that I’ll be importing a live site into a test environment more than once during the build process. This could change the category ID’s on me while I’m testing, and that’s just not a great way to play.

In the next installment, I’ll dive into the code changes necessary to accomplish this first round of goals.  Hopefully it will give a better understanding of theme tweaks in general and allow those of you who have always wanted to mess with your theme files to take the leap into true customization.

For my more experienced readers, perhaps it will persuade you to play around with Mimbo and see if it suits your needs as well.

Until next time!

Grid Focus Public, by Derek Punsalan is one of the most respected magazine style themes that has been released for WordPress to date. It’s strengths lie in its extreme simplicity and elegance, not only in the way it presents information to the reader, but in the gorgeous minimal code design as well.

Grid Focus Public is definitely a theme tweaker’s dream.  The code for the template is so easy to get through that it’s almost like a vacation to modify.  It’s just that much fun. Want to add something to the sidebar?  No problem.  Change the colors, menus, layout options?  Easy. Change the header, footer or anything else about the template.  A sheer walk in the park. Unfortunately, that simplicity comes with a price.

The price is that Grid Focus Public, even though it’s been updated to work with the newest releases of WordPress without a hitch, does not have a lot of the modern features that one would expect in a theme of this type.  For example, there are no options that can be set via the admin panel. There is no widget support (Though I find this more of a blessing than a curse…  I despise widgets and almost never use them.) and things like automated menus simply don’t exist.  If you want to modify this theme, you’ll have to play with the code or hire someone that can do it for you.

That being said, this theme has gained some pretty avid supporters in the blogging world, and those who do use it are not only happy with it, they sing its praises. Among the evangelical masses are such sites as Skelliewag.org and Anywired, which at first glance appear to use slightly different themes, but the difference is only due to placement and coloration of the headers and a few sidebar items. There is also my site at ADHDFamilies.org, which is currently using a version that is far less modified than I would eventually like to see…  (I know, shameless plug for myself…  Sorry!)

My opinion currently…  If you like the look of the layout and you know your way around a theme.  DIVE IN!  You’ll be happy that you did.  Grid Focus makes life a lot easier.