Introducing Basic Maths, a Theme for WordPress

Things that have been keeping me from blogging: raising a brand new baby, having grown-up time with my girlfriend, walking my dog, holding down a day job and, now finally revealed: working on Basic Maths, a brand new theme for WordPress that I designed with my friend Allan Cole.

After months of plugging away at in during whatever free time we’ve been able to find, we’re finally releasing it into the wild today, to coincide with WordCampNYC 2009. (In fact, I’m heading over to that conference later today, and Allan will be speaking there early this afternoon, so if you’re there, be sure to say hello.) It’s available right now for purchase at this link — for a limited time only, it costs just US$45, which is less than half the price of other, far less awesome WordPress themes, if you ask me.

But Wait, There’s More

You can head over to Basicmaths.subtraction.com to play with a live demo of the theme, peruse the documentation, and read just about everything you need to know about what makes it special (be sure to click on the VIEW buttons), but here’s are just three of its coolest aspects:

1. Grid Classes in Session

This theme is all about displaying your content in the most stunning way possible, and the core of that is a flexible layout grid that informs the layout of every element. We put a tremendous amount of effort into engineering a suite of CSS classes that work with the grid to make image placement painless. You can see for yourself how flexible this infrastructure is on this blog post, which painstakingly details how to assign classes to images to get the placement you want.

Basic Maths

2. Magic Grid View

To make placement of images even easier, be sure to hit CTRL+SHIFT+G on any page within the demo to automagically reveal the grid view — incredibly handy for positioning content!

Basic Maths Layout Grid

3. OMG, Color!

Basic Maths is an evolution of the design you see here at Subtraction.com, but it makes a dramatic departure in at least one way: color! The sensibility is still very minimalist, but users can enter any hex color value into a simple theme option within WordPress and change up the color scheme for the theme instantly. It’s pretty neat.

image

Theme Park

Allan and I started this project almost a year ago, so I’m incredibly happy to see it finally launch. I can’t say enough how much its very existence is a direct result of Allan’s tireless perfectionism; it got designed because of me, but it got awesome — and real — because of Allan. Also, I have to thank my good friend Erin Sparling for helping us out at the last minute when we ran into bugs with the grid view toggling feature mentioned above. He re-wrote the entire feature for us in record time, and really helped us preserve what was for us one of the most unique and critical parts of the theme.

As I mentioned, Basic Maths is a pretty good representation of what this site might look like if I were to redesign it today. When Allan and I got it up and running for the first time, I nearly didn’t want to package it up for public consumption, because I like it so much. All of which is to say that I think it’s really, really special, and if you’re in the market for a blog theme, I think you’ll agree.

+

87 Comments

  1. Very nice Khoi

    The layout of your site is just pure eye-candy so I’m sure the theme will have a great reception 🙂

    The headings seem to come out in a plain sans-serif typeface, on Windows at least. Is this intentional?

  2. May I kindly suggest that you remove the Single-site License from the price tag, because, as you say, it’s licensed under GPL which explicitly protects the users’ right to run the software any way they wish.

  3. The control+shift+G isn’t working for me. I’ve tried on Safari 4.0.4, Google Chrome 4, and Firefox 3.5.5 on OS X 10.5.8

    I’ve tried other keys in place of ‘control’ without success.

    (just did some further checking before posting this comment…) I think the Javascript that would cover keydown events is missing.

    The only JS I see references the file ‘swfobject.js’, and embedded JS is for Google Analytics.

  4. Khoi,

    I love your work. Been a fan for over five years. But this theme is almost to “griddy” with not enough personality.

    I’m sure there will be tons of people who love it and will find a lot of use for it just a little bland IMO.

    -DRoss

  5. This is the most beautiful WordPress theme I’ve ever seen. And it sure looks to be one of the most well-designed/structured themes overall, by the looks of it. This is a very promising 1.0 version and I look forward to playing around with it.

    Also, Kaspars is right in pointing out the GNU GPL:s four freedoms, which are: use, modify, share, share modifications. That is, as long as it is done within the frame of the GPL. However, I’m no GPL expert, so I can’t really say anything in detail on exact sales arrangements when it comes to GPL work. Suggest you check with the Gnus.

  6. Very nice. Looks like an offspring of subtraction and your grid style as it should.

    Why WordPress? You use ExpressionEngine here and previously MovableType.

  7. Khoi,

    nice work. would be great to have a demo of the theme without so many modules implemented on it. i’m curious to see how it looks with only 2 content columns, and perhaps not the top tags at the top. suppose i could take a screenshot and cut it up myself to see.

    thanks for taking the time to create this. i really like the measure of the main column. looks great.

    kyle

  8. Lovely, inspiring layout – with a few small issues. The top tag links have an ugly protruding bottom border – surely not intentionally. Meanwhile ctrl+shift+g doesn’t work in any browser I’ve tried. Two overt design decisions I’d question are, firstly the hideous dropdown menus which contrast violently with the smooth elegance everywhere else; secondly, the space reserved for the logo – incredibly stingy and a headache for any site with a lengthy name.

    Everything else is cracking – well done.

  9. Basic Maths is a great-looking theme. I just got to figure out where I can use it!

    Are you planning on creating more themes in the future Khoi?

  10. It’s lovely and I just bought a license, even though I am in the process of writing my own theme based on Carrington to migrate from my home-grown CMS.

    FWIW, Ctrl-Shift-G works just fine on my test installation of WordPress. You need to create a screenshot.png thumbnail for the theme gallery, however.

    How will updates/bugfixes for the plugin be distributed?

  11. Beautiful. I’ve been an admirer of your work for a long time. As far as ongoing support, I’d be happy to re-up my license fee periodically for significant revisions like a wordpress 2.9 savvy revision . . . an app store model fee model perhaps, which leaves you in the driver’s seat as far as when to re-work the theme. Thanks for the release!

  12. @kyle: completely agree with you.

    @kohl: wellЁ I’d also would like to see only 2 (3) columns as I like minimalism. I also like more black (menus) and some colorsЁ

    In fact this site (substraction) is much better in my opinion!
    Basic Maths looks like what you have done for Craigslist!
    Maybe you’ve been under influence 😉

    I would be ready to buy it if I knew it can be really customizable. I need black menus (like here but smaller)Ё

    In short: could you do the subtraction theme with basic maths?

    MiC

  13. Thanks to everybody for the enthusiastic reception you’ve given Basic Maths! It was been really fun to put it together and it’s been so gratifying to get so much great feedback — during the weekend, no less.

    I’m going to try and answer a few questions here, and then follow up in a few days with a blog post.

    First, we’re looking into the inconsistent control+shift+G reliability and also some of the display bugs people have mentioned. Look for an update soon on that.

    Regarding GPL: I’m pretty new to the whole thing so I appreciate the input. Allan and I are going to talk about that issue in more depth in the coming days.

    As for why WordPress and not ExpressionEngine or Movable Type, the answer is very simple: that is where the market is. If we were to sell this theme for EE or MT, we’d have to charge at least three or four times the current price for Basic Maths in order to make back our investment, which didn’t seem realistic. WordPress is clearly the market favorite for personal blog publishing and it made sense to take our cue from the market.

    More soon, folks. Thanks!

  14. I’m a fan of both of you, so imagine my excitement when I found out this was a collaboration. Khoi, also loved your post on JSM’s site on Botan candy. All best!

  15. I was also a bit confused by the single-site licensing restriction, and even the fact that you’re charging for it. Don’t get me wrong; I totally understand that you obviously spent a lot of time making this (quite impressive), and are totally justified in charging for it. However, the GNU GPL page you link to with info about the licensing states: “Developers who write software can release it under the terms of the GNU GPL. When they do, it will be free software and stay free software, no matter who changes or distributes the program.”

    Does that mean the $45 cost is more of a suggested donation?

  16. Nick, free is to be understood as freedom instead of price. And freedom to run, modify and redistribute the software includes the freedom to charge for it, if one wishes.

    Therefore it’s completely within the terms of GPL to charge for the software, but it is against GPL to determine how one can use it (on how many computers, web sites, etc.)

  17. @Kaspars Interesting, I understand better now. After some poking around, there’s a good quote from the GNU definition of “free” (http://www.gnu.org/philosophy/free-sw.html) which puts it rather simply: “Free software is a matter of liberty, not price. To understand the concept, you should think of free as in free speech, not as in free beer.”

    However, it also states that “you should be free to redistribute copies, either with or without modifications, either gratis or charging a fee for distribution, to anyone anywhere. Being free to do these things means (among other things) that you do not have to ask or pay for permission.”

    So basically, the license under which Basic Maths was released allows for other people to give it away, or even charge their own fee if they like.

    Regardless, if I decide to get a copy of Basic Maths for myself, I’ll opt to support the cause directly with my $45 anyway.

  18. Love it, love it, love it.

    Two days and nights later and I have it up and running.

    An absolute pleasure to work with your them and the underlying coding, Khoi and Allan!

    Added category-, page- and author-specific image on the very left, and reduced the space for the name (even though I just can’t decide whether I like the smaller or larger version better…).

    Toggling the grid view worked without a hitch on my local install, but does not work on the live blog.

    A few small details I encountered on the way:

    In functions.php, the definition of the favicon should end with /> – the missing slash prevents validation as XHTML 1.0 Transitional.

    In Internet Explorer – not that I much care – the post-title in single-post view jumps one grid-block to the right.

    The way you have coded function basic_date_archives() seems problematic for people using the index.php-workaround for pretty permalinks. The /index.php/ insert does not appear in the date-related archive-links, neither for the years nor for the months.

    At the beginning of the comments section, it says “Leave a comment below” disregarding whether or not it is actually possible to leave a comment.

    Great fun!

  19. I really love the concept of tags being like an index. That is a fabulous way to present them!

    Fix some of the technical issues and become a bit more educated about how a GPL license works and I think you have a clear winner of a theme concept.

  20. Welcome to the WP world. 🙂

    Sometimes the licensing stuff can be confusing, drop me an email and I can answer any questions ou might have about it and also introduce you to other folks in the paid GPL theme market that have a lot of experience and history with trying out different messaging and models.

    I’ll be in NYC this week as well, chatting with Liz on Wednesday at SVA.

  21. Another small issue I stumbled upon and forgot in my previous comment:

    On archiving pages – be they thematic or time-related – the number of posts indicated in the meta-section (ENTRIES – X TOTAL) is not correct – it always shows the number of entries showing on the page. This number is controlled by WordPress, where you set in the General Admin Section the number of posts to be shown on the frontpage. In my case this number is 4, and whichever archive format I use, on whichever page (2nd, 3rd, 4th), the number of entries is always set to 4. When I change the number to 6, the number of total entries shown is 6.

    (Despite these small technical glitches let me assure you that you already have a clear winner of a theme.)

  22. Khoi, I have the suspicion that the grid-toggle CRTL-SHIFT-G only works when logged into WordPress. As soon as I log out, in any case, it stops working.

  23. Regarding the GPL license, from the GPLv3 FAQ:

    “If I distribute GPL’d software for a fee, am I required to also make it available to the public without a charge?”

    “No. However, if someone pays your fee and gets a copy, the GPL gives them the freedom to release it to the public, with or without a fee. For example, someone could pay your fee, and then put her copy on a web site for the general public.”

    So there’s no requirement for the authors to provide a copy of the theme for free, but there’s also no recourse for them if someone pays the $45 and then sets up freebasicmathstheme.com and allows others to download it gratis.

    It also doesn’t prevent that same person from setting up cheaperbasicmathstheme.com and selling it for $20.

    Basically, you are free to charge for your work under the GPL, but so is anyone else.

    Source

  24. Ћ What happens when there is 5 replys threaded comments? Comments appear to use only 5 grid unitsЁ

    Ћ The red bottom of the days “in” in the calender is not well centered.

    Ћ Why 11 grid units? 9 would be better! Subtraction is perfect with 8 (or maybe 16!) . Here there’s one column of text too many! And by the way — correct me if I’m wrong — it looks like the New York Times has also 11 grid units! That’s OK for the N.Y.T. but for a blog? ”
    As you said in Grids Are Good: “(Ё) but a 10 unit grid is difficult to work with”Ё

    Ћ In the HOME page of your demo you cluster the screen with TAGS in two different places, RECENT POSTS in two different places, ARCHIVES in two different placesЁ It looks like the trys of a complete newbie! And another proof that the right column of text (2 units) is not necessary.

    Too bad: it could be beautiful!

  25. Scott: “It also doesn’t prevent that same person from setting up cheaperbasicmathstheme.com and selling it for $20.”

    In theory, yes – in practice, that would be considered rude, unfair and ethically questionable. In fact, even though I’m sure it happens from time to time, I’ve never heard of anything like it within the free/open software world.
    However, should I improve upon the code and release it myself, I could charge for it, but then again, Khoi and Allan would be able to benefit from the work, just like everybody else. It’s basically a win-win for all parties.

    MiC: All the widgets at the demo site are obviously there for demo reasons. Take a look at how Andreas implemented it – just beautiful. Even though I’m not sure about the small heading!

    This truly is a magnificent illustrated database for machines only. 🙂

  26. I’m a fan of your work, and love to see you finally come up with wordpress theme market.

    The grid structure and information flow is good, but I’m not into the widgety items. Too clutter for me.

    Yes, one can get rid of this widget though 🙂

    Overall, nicely done!

  27. Hтkan,

    Yes Andreas has used only two colomns, I see it.
    But two things make me feel unhappy:

    Ћ the header block (Menus and Categories or Tags) is too close from the body and is too large too (2 grid units too long!). It feels loneliness under the three Categories on the rightЁ (“Un seul Жtre vous manque et tout est dжpeuplж” — Chateaubriand)

    Ћ The two columns are much too close. LЯ encore a 9 grid units would be better.

    For the Categories (or Tags) block I would like to see something like that:
    http://dinamehta.com/ (though the arrow is not very elegant — and static tooЁ).
    (The same kind of mechanism is also implemented here: link but it’s fugly of course).

    I would like to see Basic Maths to be closer from the supreme elegance of Subtraction!

  28. @Hтkan Re:”unfair and ethically questionable”Ё That was somewhat my feeling as well, which was part of why I was confused about the license. But does the fact that it’s offered under such an open license imply otherwise? I mean, if they weren’t OK with people doing stuff like that, wouldn’t they have just released it under a less liberal terms?

    Judging by the fact that the price tag was originally accompanied by a mention of a single-site limit, I’m starting to wonder if releasing it under GPU GNL wasn’t entirely intentional (?)

    If that was the case, what can potentially be done about changing the license at this point? The “it will be free software and stay free software” part of the GPL summary makes me curious.

    I’m interested to hear what Khoi has to say about it (he said he would “talk about that issue in more depth in the coming days”).

  29. Gridtastic. I do agree with many of the previous comments regarding it sterility etc..

    That being said, it does have a place in the wordpress market for sure.

  30. Anyone know how long “for a limited time only” is? Payday next week, really tempted to stump up for this at that point, but will it still be $45?

  31. Indeed! Awesome theme for Word Press. I’m seriously considering buying the theme, but I’m having issues with it in IE6/IE7 browsers (quite buggy in IE6!). For example, in IE, the drop-down navbar is seriously flawed. I’m wondering if the theme is optimized for standards-compliant browsers only, i.e., Firefox or Safari. Is everyone experiencing the same issues after unit testing on IE?

  32. I couldn’t agree with you more MiC! You have to account for all the Grandmas of the world who still use IE6 (what about them?), not to mention many government agencies who still run on Windows95/98. Yikes! But at least there’s hope:

    IsIE6Dead

  33. The Grandmas of the world deserve the best: for the new year offer them the new tablet comin’ from you know where 😉

    And starting in 2010 all people connecting to my site and comin’ from the other side will get this:
    “The environnement you ‘work’ with is officially deprecated”. It will also display the address of the closest Apple StoreЁ

  34. “but I’m having issues with it in IE6/IE7 browsers”

    I’ve had a look at the demo site in IE7, and didn’t see any major problems. That’s good enough for me. We can’t support IE6 forever, we’re on IE8 now, supporting the last two versions of a product is pretty standard.

  35. Bart: the GPL license effectively says you can remove all of it, so feel free to do that. It would be nice if you kept some attribution so people can find Basic Maths, but of course you’re under no obligation to do that.

    Folks, we’re working on the last few bugs that we’ve identified for an update to Basic Maths. Version 1.0.1 should be coming in the next few days, and will be free to everyone who’s bought a copy so far. It will even include a minor new feature. Stay tuned!

  36. Hi Khoi, just purchased your theme and I have a feature request: a links page template.

    Could just be a simple one column list of links in their categories but if you’re up for it I’d love you to crack what no one else seems to have been able to to date: HTML compliant multi-column list of links in their categories that wrap into vertical columns, with the ability to re-order the categories (although we’d probably need a plugin for the re-ordering part)

  37. Thanks for the quick reply.
    I was asking because there’s too much info in the footer for me (for a premium theme), and was wandering if I could remove it in order to replace it with one link to some kind of ‘About’ page, thanks.

    Your answer actually made me keep the info if I chose to buy it 🙂

  38. Christiaan: That’s a great idea. We’ve been talking about features that we can add to a future revision of Basic Maths, and that sounds like a good one. If you have any examples/links to links pages that you think do a good job, that would be really helpful.

  39. That’s great Khol, I’ll have a hunt around but to be honest I’m not sure I’ve ever come across a links page that I think truly does a good job! Tough nut to crack.

    One more thing, I use an excellent plugin called WP-Footnotes which creates superscript numbered links to footnotes. Basic Maths is overriding the superscript, turning them into normal text. It would be great if you could fix this for me.

    Thanks for the theme. Loving it.

  40. Khoi, great theme. I’ve been following you for a while and this will suit nicely for my up coming multi lingual video tutorial blog. (at least until I develop my own darn design, can’t pick!!)

    I’ve had a little experience with the Thesis theme for WP. There’s one thing that I am missing here and that’s hooks. It would be so much easier for me (I know very little PHP) to use hooks and hook items into the columns. Right now I am messing with sidebar.php and functions.php files and it’s kinda bugging me out.

    I was hoping to add social bookmarks, a little RSS icon next to the RSS feed indicator and a twitter link with a twitter bird.

    I also want to add a custom section above everything in the sidebar linking to a specific category.

    All of this would be so much easier with hooks. If you don’t know what I am talking about then I suggest you download the thesis theme.

    I am a big fan of grids, if only I had the chance to edit them 🙂

    Regards from Amsterdam!

  41. Doh! Forgot to mention this:

    It’s not reacting to the date formatting change I am setting in the wp backend.

  42. Khol, should the image styles work with video?

    I’m using a plugin called Degradable HTML5 audio and video Plugin.

    It makes use of shortcodes too, for example:

    [video src="http://example.com/wp-content/uploads/video" width="620" height="400"]

    With the above my videos cross over into the first sidebar.

    I thought adding an image style might fix this but they don’t shift:

    [video src="http://example.com/wp-content/uploads/video" class="alignnone size-large" width="620" height="400"]

  43. just bought the theme and really like it. i just wanted to point out (probably not the first) that there are some incompatibilities with IE, more specifically in image clipping on the left sidebar
    please keep me posted any future developments and if your planning on fixing this with future releases. thanks

  44. Hi Khoi,

    I understand the reasoning for going with WordPress, but I would love to have a static version of Basic Maths so that I could adapt it to ExpressionEngine. I’m tempted to buy the theme and just strip out all of the WordPress markup (not sure if this is allowed under the license agreement). Would you ever consider releasing a pure HTML version?

  45. Fabian: I’ve actually been talking with a friend of mine about porting this over to ExpressionEngine. That probably won’t happen before the new year, though. Hopefully you can wait?

  46. Thanks Khoi. I’ll wait for it. The time that it takes you to port it over to EE may be enough for some of my favorite add-ons to catch up to EE 2.0.

  47. The theme is outstanding and I’m loving it thus far. One thing that I am a have a bit of trouble with is the fact that it outputs a “Continue Reading” link for all posts, regardless of whether or not there is extended content for an entry. Is there a way to change it to a conditional based on the post?

  48. Andreas: Very nice, and thanks. You’ve done a great job on your site. Was it much trouble to enlarge the main column from 5 to 7 columns?

  49. Hi, I have my blog up and running. Love the swiss look of the theme. Had to do some translating into Dutch, but some of the stuff between variables is very hard to find.
    Layout-wise I would like to have the CATEGORIES heading in a two-col’s block, because the dutch translation is longer. Any pointers?
    Another small crit: how about forcing the top SEARCH-box to the right?

    I also have an issue with adding Widgets from other sources, eg a Twitterfeed. It pushes all content above and under into the left sidebar. How to fix this?

    bertvanderveen.nl

  50. Carlos: you’re right, the “Continue reading” prompt should be conditional. I’ve logged it as something we’ll try and fix in a future release, though it probably won’t make it into the update that we’re going to be releasing shortly.

    As for that update, um…well I apologize but we’ve hit just a few snags that have delayed it longer than we’d anticipated. Nearly everything we slated to fix for this update is done. There just seem to be some thorny issues with — you guessed it — Internet Explorer. Fun, right? But with luck, it will be out soon. Thanks for your patience.

    Bert: This update will in fact fix the search box at the far right in cases where you might have less than six items in the top navigation.

    As for your issue with Twitterfeed, can you show me an example of this problem?

    Jeff: a printer-friendly view is a great idea. We’ll add that to the list of ideas for future releases.

  51. Khoi — Thanks for answering so promptly. I just added the Twitterfeed. Put the widget in the right sidebar, on top of the others there. But it displays in the left sidebar… and forces everything else to be there too.

  52. @Jeff – not much trouble at all – the theme is well-coded, and all you have to do is to adjust the width of the central section designated #content from 440px to 620px and follow through with adjustments accordingly – of .entry-title and .entry-content, for example. Kick out the first column of the sidebar, adjust the post navigation, and that’s pretty much all there is to it. 15 minutes, or so.

  53. @Andreas…really like what you’ve done with the site. How exactly do you “kick out the first column of the sidebar”? Is it just a matter of adjusting the width of the content space? I’m not sure how to correctly do this. Thanks.

  54. @Kevin – thank you! In sidebar.php, kick everything out between the first set of divs marked as primary – radical but effective 🙂

    <!-- #primary -->

  55. Following-up on the conditional “continue reading” prompt:
    Short posts with links become unwieldy, since the “entry-summary” div class strips out links.
    A short post is visible in its entirety in summary mode – but without links – which are only revealed after clicking “continue reading”. Lotsa clicking where one click would do.

  56. The theme is great and a joy to set up.

    A little problem – Monthy archive links at the bottom of the main archive page direct to syntax such as …/2009/11 which always returns a 404 for me.

    The calendar widget and related links direct to …/?m=200911 or …/?m=20091125 which works fine.

    Ha. Not a coder by trade so hopefully there’s a simple fix out there!

  57. Khoi—in WordPress 2.9 there is a new filter called ‘excerpt_more’ that has been added to the wp_trim_excerpt() function. It allows to change the excerpt ‘[…]’ more string via functions.php, and would make it possible for you to utilise the normal read-more function instead of the hard-coded “CONTINUE READINGЁ” the theme currently uses.

    Plugin API/Filter Reference/excerpt more

  58. Love the theme. Excellent work.

    One issue I have is with embedding videos. When I embed videos as 440px wide, they extend beyond the 5 columns that I would expect it to fit within. The video has to be embedded as 435px to fix the problem.

    Is there any solution for this?

    Mark

  59. Those of you who want your videos to EXACTLY match the grid structure of Basic Maths should know the following.

    Videos can be any of the following 3 widths: 435px (small), 525px (medium) or 615px (large).

    You can see examples of these videos at Thinkvein.com.

    I’m still not entirely happy that the video’s left margin is indented by 5px (hence the reduction of 5px from the default width). Any ideas how this might be corrected?

Thank you! Your remarks have been sent to Khoi.