Category Archives: Themes

09.20.11
by

Child theme or not? That is the question …

Off and on over the past few weeks I’ve been working on a Thematic child theme.  I’ve always had a hesitation with child themes in that you need the parent theme in order for the child theme to work.  Duh.  While it may be pretty obvious to anyone who is familiar with WordPress, it isn’t so for the casual user.

When I was working with Sandbox I figured out a way to essentially build a child theme while ensuring that the parent theme dependency wasn’t an issue by including all of the Sandbox code  using a SVN external reference to Sandbox and some other tricks to include the code.  It worked well and I was able to distribute my themes without concern as to whether or not Sandbox was installed.  It simply didn’t matter.

I was not planning to do that with the Thematic child theme I am working on right now but am having second thoughts.  It turns out that the version of Thematic that I need (0.9.8) is not the version which is in the WordPress Theme Repository and I have no idea when this will change.

If I got the SVN external route again I can ensure that my child theme will work with a known revision of Thematic.  However, it is a fundamental shift in my approach and I don’t know if it will work the same way I did it with Sandbox.  Decisions, decisions.

It looks like there have been some recent commits to the Thematic SVN repository so maybe it will be updated and released soon.  That would help address my dilemma.

08.30.11
by

My Thematic project is progressing

The more I play with Thematic, the more I like it.  I have been working on a Thematic child theme for a few weeks now.  I have the basic functionality up and running (see GoLufkin.com).  I still need to do some tweaking to clean up a few things (e.g. I want the post date formatted like a small calendar box) but for the most part, I am pretty happy with what I have.

I’ve been playing with CSS3 drop shadow and gradient features – they work fine with Chrome and Firefox.  I have not tested with Safari but the BODY tag gradient doesn’t seem to work on IE.  I am speculating that i have an error somewhere but haven’t chased it down yet as I find it hard to believe IE would implement gradient support for some tags but not others.

I am planning on reusing the custom header code I developed for my Sandbox-LEGO theme as the Dashboard part of it should work with minimal changes leaving me with just some work to do on the header.php file.  The code I did for the Sandbox-LEGO theme allows a user to choose a left, center, and/or right header image from their existing media library and add some CSS overrides to tweak placement.

The integration with Google Calendar is working pretty well, I think it is the right call for this sort of site.  It will be easy for people to add events to the appropriate Google Calendar and have them reflected on the site.  I may look into some jQuery to dink with the GCal style as I still would like the calendar to better integrate with the theme.

The theme color scheme (skin) is currently hard coded for the GoLufkin site but ultimately choosing a color scheme will be possible through the theme options panel.

08.24.11
by

Moving forward with Thematic

I haven’t had much time to work on any of my theme projects but in the last week or so I’ve been trying spend some free cycles on something I am called “Middle School – High School Boosters Club” theme.

My wife is the president of our Middle School Boosters Club this year and much like the swim team was years ago when I got involved, the Boosters Club has no web presence and just about everything is done on paper.  Bleh.  She has asked me to build a web site for the Boosters Club so I am  using it as an opportunity to choose a new theme framework (I’ve settled on Thematic) and see how much stuff I can leverage from Google Apps to build them a solution that doesn’t require me to babysit it all the time. We’ll see how that goes!

As I noted in a prior post, the Wicked WordPress Themes book has been a good resource to get me going with Thematic.  I also found a Thematic Child Theme called Byty which caught my eye and I decided I wanted something similar.  The downside of Byty is a lot of the nice gradient effects have been achieved with images as opposed to CSS.  That is understandable as gradients were not available until CSS3.  However, I want whatever I build to be fairly modern so I’ve decided to go down the CSS3 route.

I am specifically not building a theme for our school but instead and building one which can be tailored for any school by selecting a color scheme.  We’ll see how well I accomplish that!  These are some of the requirements that I am working against which I suspect would be similar for any other school boosters club that may want a web site.

  1. Online Store with PayPal/Credit Card Payments
  2. Support for Twitter and Facebook Fan Pages
  3. Color schemes
  4. Custom Logo(s)
  5. Calendar(s) for game and practice schedules
  6. Sport specific pages featuring just the posts relevant to that sport

Since Google Calendar is dead simple to use and with so many people using Gmail already, it seemed like the logical choice to base the calendar solution on.  Google Apps is free for organizations like a boosters club to  use to registering our domain with Google Apps was the first thing I did.  This also makes it easy to create e-mail accounts for the various people associated with the club (president, secretary, etc.) so they can perform their task without polluting their personal email.

Once Google Apps was configured, I created a Calendar for each of the sports we will support (Football, Volleyball, Boys and Girls Soccer, Softball, Boys and Girls Basketball, etc.).  These calendars can be viewed separately or combined making it easy to view the whole calendar or just the calendar for a specific sport.  Even better, WordPress supports Google Calendar vias oEmbed turning a Google Calendar URL into a Gcal short code!  About the only downside I have found so far is it is very hard to style the Google Calendar, I’d really like the light blue Google uses to be a different color to match the rest of the site but I will live with it based on how easy managing the calendar will be!

I’ve decided to use Simple Twitter Connect and Simple Facebook Connect, both from Otto, for Twitter and Facebook integration.  I’ve used them before so they were familiar to me.  Based on the recommendation from the Wicked WordPress  Themes, I also tried AddThis but it is a  bit more invasive than I want so I went back to SFC and STC.

For an online shop, I am going with eShop which is a very simple shopping cart plugin.  Since we’re selling just a few items (e.g. t-shirts, sweatshirts, etc.), we don’t need anything complex and eShop looks like it will do what we need.

The site isn’t online yet so there isn’t anything to see but hopefully I will have a demo up and running fairly soon.  I need to do some more CSS work and get the custom page loops I want.  I am impressed with how easy Thematic has been to work with.

07.24.11
by

Looking at Thematic for new projects

I built a number of WordPress themes based on the Sandbox theme.  Unfortunately I think it is time to migrate to a new theme framework.  I need to update a couple themes and I’ve been putting it off knowing that continuing to invest in Sandbox was probably a dead end.

After reading a bit and finding a book I like, Wicked WordPress Themes, I’ve decided to develop a child theme based on Thematic for my Middle School web project.  I should have bought the book from Amazon.com, it was $15 cheaper than my local Barnes and Noble but I wanted it immediately.

03.10.10
by

Sandbox Swim Team Theme

This evening I posted a new Sandbox based theme called Sandbox Swim Team.  This theme is designed for Swim Team web sites.  Like the LEGO and Soccer themes I have done recently, this theme is widget ready and has styling for a number of plugins I use regularly.  This theme has a number of options to support custom header images, color scheme choices, and themed login pages.  You can see this theme in action on the MacGregor Downs MacDolphins web site.

image  image

02.15.10
by

Sandbox-LEGO theme update

Sandbox LEGO ThemeThis afternoon I posted an update to my Sandbox-LEGO theme.  In the process of developing my CASL Soccer theme I had figured out how to do a couple things which I have wanted to incorporate into Sandbox-LEGO.  It wasn’t a lot of work but I also decided to spend the time to re-write the Bourne Shell script which I use to generate CSS files for the various color schemes.  Instead of duplicating a bunch of code I implemented it as a series of functions which are called with the various color settings.  Fairly trivial looking back on it, not sure why I hadn’t done it in the first place.  It should make adding a new color scheme much faster.

11.02.09
by

LEGO Theme released

This afternoon I finally had a few minutes to fix a couple of issues and release my LEGO theme.  This theme is currently in use on my LEGO web site.  The theme free to download and use.  There are still a couple minor nits with it which I need to fix and I want to add a couple more color schemes but I wanted to get it out.  It supports four colors schemes – red, blue, green, and yellow.  Enjoy.

10.25.09
by

More work on LEGO Theme

This morning Imade some more progress on the LEGO theme.  It is close to being released.  In fact, I was about to release it when I realized that the two different sized bricks for the page background wasn’t working.  Looks like I had deferred working on that.  The options work fine, they just don’t do anything as the size is currently hard coded into to the CSS file.

I did fix the problem with the Recent Comments widget as also added support for the WpTwitter widget.  I’ll noodle on how to get the size working as I go about my day today (chuch, soccer, etc.) and try and figure something out.  I also need to fix the footer links and add attribution to the Fibblesnork background images.

Here is what the yellow color scheme looks like:

image

ColorBlender seems to have come back on line which makes picking colors much easier.

10.22.09
by

Sandbox LEGO Theme beta

Off an on I have been working on a new Sandbox based LEGO theme for a while.  I wanted something I could use for my own LEGO blog as well as the NCLUG and NCLTC sites and possibly the ILTCO site as well.  I wanted to make it fairly easy to customize it by selecting a color scheme and allowing custom header images.

Color schemes were pretty straight forward.  I wanted to base them on the Fibblesnork Backgrounds which I like a lot.  The Fibblesnork backgrounds are very small images designed to tile across a web page.  In my case, I wanted to use them to frame the content area.  There are 18 different colors and two sizes for a total of 36 different background color choices.  At some point I plan to support all 18 colors but initially I am only offering three:  Red, Green, and Blue.  Setting up a theme options page to select a color scheme was pretty straight forward, I had done that previously with my Soccer Theme.

WordPress has some built in functionality to do custom header images but it didn’t really do what I wanted.  I wanted to allow a fair amount of control over the look and layout of the header.  I decided to support three header images:  Left, center, and right.  I didn’t want to manage the header images so I decided to leverage the built in media management capability.

The theme options page will present any image that is in the media library as a potential header image.  But how?  I wanted to make it fairly simple to use.  I decided to implement a drag and drop scheme based on the jQuery UI and discussed it in detail in a prior post.  It took a little while to work it all out as I had done very little with jQuery previously.

The last thing I wanted to allow was the ability to tweak the header layout with CSS.  For this I added what I referred to as “CSS Overrides” for the blog title, blog tagline, and the three header images.  The combination of color schemes, custom header images, and CSS Overrides allows the Sandbox LEGO theme to take on a fairly distinct look.

image

image

image

image

The theme is currently in use on three blogs, I expect to make it available for download in the next few days.  There are a couple issues I know of that need some styling help and I want to get two more color schemes finished before I release it.  Color schemes aren’t too bad – I just need to pick the proper values.  I have a script that actually generates the CSS files.

09.17.09
by

Header Image Options in LEGO Theme

I have been working on a re-write of the Sandbox LEGO WordPress theme.  It is taking a lot longer than I thought it would, mostly because I have made the problem more complicated than I initially thought it would be.

One of the main things I wanted to offer in this theme was the ability to choose a color scheme from an pre-set offering of about 8-10 choices.  This wasn’t too hard, I had done some similar in the original Sandbox Soccer theme.

As I worked on it I decided it would be nice to allow the user to define what the header should look like including their own image.  WordPress offers the ability to upload and use a custom theme header but this didn’t do quite what I wanted.  I decided to let the user choose a header image from the media library.  But what if the user wants multiple header images?  Hmmm.  This problem could get very complicate very quickly.  I decided to constrain the problem by providing the ability to define up to three (3) header images:  Left, center, and right.  Doing this would support the 3-4 sites I expect to use this theme on (my own CarolinaTrainBuiders.com site, NCLUG, NCLTC, and ILTCO).

Now that I knew what I wanted, how to implement it.  Simply showing the image options on a Theme Options page could potentially result in an enormous page.  I mentioned jQuery Accordion in a prior post, dividing the various options into sections using the Accordion made sense and was pretty straightforward once I upgrade to WordPress 2.8.4.

Once the Accordion was working I decided I wanted an elegant way to select the images.  Since this effort is a hobby and I largely do projects likes this to learn something, I decided I wanted to use a drag and drop mechanism to select the images.  Again, jQuery to the rescue, namely the jQuery draggable and jQuery droppable plugins.  In particular, the Simple Photo Manager demo was very close to what I had envisioned.

It has taken me a little while, mostly because I haven’t had a lot of time to work on it but I finally have a pretty slick theme options page working where the header images can be selected from the media library using drag and drop.  I am by no means a jQuery guru but I have learned a fair amount working this problem out.  The code I have isn’t ideal and I’ll continue to refine it but it is working so I can continue to develop the theme.  Once I get it running and released I will go back and clean up the jQuery code.  For now, getting it working and doing what I wanted was the primary task.