Introducing Ghostbird

Posted on

By Michael Fields

Ghostbird is a free one-column theme for WordPress and it’s really, really close to being completed. There are more than a few things that I need to address before officially releasing it, but I wanted to get it out there and see what people think about what I have came up with.

Here’s a link to the latest development release:

Ghostbird Development Version

Ghostbird has been developed for WordPress 3.1.
Installing this theme on any previous version is a really, really bad idea.

I would really appreciate comments on anything and everything that think about it. If you absolutely hate something, please let me know :) If I have done something horribly wrong, don’t just laugh at me, leave a comment below or on Github so that it can be addressed.

Here are a couple of sections of interest:

Post Formats

I’ve added support for all post formats except for links and would like to know your thoughts on how they are treated. A few notes:

  1. Image formats have a custom filter which will allow you to enter only the url of an image. This should only work in case where the post_content contains only a url to an image.
  2. Chat formats work best if you enclose the transcript inside a pre tag. This is the only way to trigger the custom filter.
  3. Quote formats require the quote portion of the post to be wrapped in a blockqoute element.
  4. Audio formats have no special styling. Outside of adding an icon (which I do not want to do) there is not much that I can really find to do with this format. The first thing that comes to mind is to find the first link/url to an audio file in the post_content and swap it with a fancy flash audio player. IMO this is best done through a 3rd party plugin and this is what I will suggest in the documentation.
  5. Titles – All formats can optionally display a title. If an author desires no title for a formatted post, they can leave the “title” section of the post blank.
Update!

In hindsight adding support for all post formats seemed to be a bad idea. While it was fun to write some custom code to tweek their display, the over-all design of this theme does not support all post formats as I would like. While I’m nearing the end of development of Ghostbird it’s seemed like I only had two options:

  1. Change the entire visual to accommodate.
  2. Drop the post formats that don’t fit.

I decided to take the second route. I really like the visual aspect of the theme and, in my opinion, that’s more important than supporting all of the available post formats. It made sense to me to only support the post formats which looked and worked the best in the theme. Here’s the new list of supported formats:

  1. Aside
  2. Gallery
  3. Status
  4. Standard

Custom Taxonomies and Post Types

Support for custom post_types and taxonomies have been added directly into the theme. These elements should display well throughout the theme whether being referenced in metadata or displayed as archives. If you have an installation with custom post_types or taxonomies already defined it would be interesting to know you thoughts on how Ghostbird handles your data.

Widgetized Areas

Ghostbird currently has 4 widgetized areas. One that gets prepended to the the textarea in the contact form and 3 that display at the bottom of the #page div in a div with an id attribute of “widgets”. The bottom three work a bit differently than you might expect:

  • If there are no widgets in any of the areas, no html should be printed for the the #widgets div.
  • If only one area has widgets, each widget should fill the horizontal area available. The only exception here is the calendar widget which should always be ~14em wide.
  • If two areas have widgets assigned then the left-most area will have a width of ~66% of the available horizontal space. The remaining 33% will be used for the second widgetized area.
  • In cases where all three areas have widgets, each area should be approximately 33% of the available horizontal space.
  • Although the widgets are numbered, the numbers to not define their position rather their order. If only areas 2 and 3 have widgets, they be be displayed in positions 1 and 2 in the html. Likewise if only area 3 has widgets, it will be seen as being in position #1 in the markup.

I would really like to know your thoughts on this process. Do you see it breaking any custom widgets that you use?

Intentionally Excluded

  1. SEO Stuff – Ghostbird contains no seo tools whatsoever. It is my opinion that this functionality is best provided via plugin and really does not belong in a theme. Ghostbird has been tested with Yoast’s WordPress SEO Plugin. Users are suggested to use this if they want full control over their SEO.
  2. Social Media Stuff – Ghostbird provides no built in method of interacting with social networks. There are plenty of plugins and users are urged to find an appropriate one for that meets their individual goals.

Did I miss anything?

If you feel limited by the functionality of the Ghostbird theme, please sound off. I actually found myself deleting functions left and right the other day in hopes of simplifying the theme as much as possible. I also moved as much html as possible from the functions files into the template files which will hopefully aid in customizing the theme. I’m sure I probably overlooked a few things. Please let me know.

Other than that, Ghostbird should work just like any WordPress theme. There is a todo list in functions.php of things that I need to deal with. I would love it if you could download the theme and test with your own custom data. I feel like I’ve designed this thing about 5 or 6 separate times in the past month. This being said there might be code fragments here and there which make absolutely no sense at all.

Things I plan on doing before release

  1. Style global tables.
  2. Revisit post formats.
  3. Document everything in the Functions subpackage.
  4. Test “big” tag across browsers – not sure about positioning here :)
  5. Completely test and rewrite all examples in docs or remove if feeling lazy ;)
  6. Excerpt filters for [...]
  7. HTML validataion.
  8. CSS validataion FWIW.
  9. Add meta to search archives intro box.
  10. Update and test style-editor.
  11. Lighter fonts in Widgets.
  12. Add Ghostbird settings page link to menu bar.
  13. Style all features of the Syntax Highlighter plugin.
  14. Add credit link in the footer. Credit links are lame.
  15. Add donation link in the settings page. Settings pages are lame.
  16. Pretty-up the calendar widget.
  17. Alpha for yellow-dots.png. Change name to halftone-small.png.
  18. Ensure that all settings actually do something.
  19. Less saturation on #author-box bg color.
  20. Make dialog colors match new theme colors.

In Closing

Version 0.9 is far from perfect and should not be used on live sites currently. I’m using it on mine and you can too, just don’t blame me if if the sun falls out of the sky :)

Thanks for reading!

55 Comments Comments are closed

  1. Edward Caissie January 24, 2011 at 1:18 pm

    If this introduction page is any indication then I expect “BIG” things from this theme. It looks great, too!

  2. Michael Fields January 24, 2011 at 2:17 pm

    Thanks Cais! Glad you like it :) Should be ready to go as soon as 3.1 hit’s the shelves.

  3. Amor January 24, 2011 at 3:01 pm

    Really great. I am actually testing it on my wptest site. I like the way you code, it’s so neat and everything looks organized.

  4. Michael Fields January 24, 2011 at 3:06 pm

    Thanks for the compliment. I try to make it a point to make as many thing make sense as possible. Glad you find the code easy to read. Please let me know how things work for you. If you have any suggestions I’m open to input.

  5. Mac_Boy January 25, 2011 at 5:42 am

    Gosh, you make me wanna get the 3.1 pre-release edition!

    Perhaps you can make a 2-column equivalent in the future?

  6. Michael Fields January 25, 2011 at 5:52 am

    I’ve been running some version of 3.1 for a month or two without issue. It’s been pretty stable, but then again my site is pretty basic. Ghostbird will never have a second column! I tried to add one in a week or so ago, but it really, really bothered me. I personally don’t like sidebars on my own sites mostly because I do not have anything to put in them. I know I’m in the minority here and I’m totally ok with that. I would much rather build an entirely new theme with a sidebar than add one to this one. I have lot’s of ideas that didn’t make it into this theme, so another one seems only natural.

  7. John P. Bloch February 16, 2011 at 2:47 am

    Hi Mike,

    As I mentioned on Twitter, I’m working on a child theme using Ghostbird. I was looking in index.php, and thought I’d mention something here (140 characters makes this sort of thing harder to do on twitter). I noticed that you use get_template_part() inside the while loop. As it is, loop.php is included for each post (typically 10 times per non-singular page load); it might make more sense to move the looping code into loop.php so you only include the file once.

    -John

  8. Michael Fields February 16, 2011 at 3:02 am

    Good call! I have been on the fence about this for a while. This was originally by design which is mentioned in the docblock for loop.php. This is the way I would prefer to have things done. After some bench testing (first time ever!) I was able to see that includes are much more expensive than I originally thought. I tested against a loop template delivered via function and the function performed about 3 times faster damn-near most of the time.

    I think I’ll revert to more of a TwentyTen-style approach before launch. Please let me know if there are any other reasons why this is a bad idea.

    Thanks for the input, I’ll commit this in the next day or so. Got a pile of work on my desk :)

    On another note, what are your thoughts about removing the Discussion Guidelines widget area? It feels like plugin territory to me.

    Can’t wait to see your child theme! I’m really stoked that you’re making one :) Open soure in full effect ‘yall!

  9. John P. Bloch February 16, 2011 at 3:32 am

    I wouldn’t say the guidelines widget area is necessarily plugin territory. Sort of. I don’t think a widgetized sidebar is necessarily the right way to add guidelines, but I think it’s perfectly reasonable for a theme to include those guidelines, or the functionality for the user to add them (you don’t have to install a plugin to have comments, do you? exactly).

    You might instead hook into the settings api on the discussion page and provide a field where the admin can manage the guidelines, then prepend them to the comment field via the comment_form_field_comment filter (or the comment_form_after_fields hook).

    I just read over the doc block in loop.php, and I certainly see the value in this approach. I suppose it comes down to performance vs. flexibility. Both are important, so I’m not so sure which side I fall on now…

    My child theme isn’t going to be much of a reworking. Just some new bits here and there. I’ll let you know when it’s live. I just love the one-column layout, and I’m really looking forward to robust format support.

  10. Michael Fields February 16, 2011 at 4:06 am

    I don’t think a widgetized sidebar is necessarily the right way to add guidelines, but I think it’s perfectly reasonable for a theme to include those guidelines, or the functionality for the user to add them (you don’t have to install a plugin to have comments, do you? exactly).

    But comments are core and guidelines are not core. IMHO the guideline’s code could exists in any theme. That’s why I’m leaning towards plugin here. Since this is my first theme, I want it to be as “Themey” as possible. Been clearing a lot of cruft lately.

    I hear you on the widgetized area thing, but I would rather not add the UI in the theme. I did have to resort to output buffering to get it in there, which makes me cringe, but IMO the benefits outweigh the buffer. This was my attempt to sneak in a widget area without creating an “actual” widget area. WPTRT guidelines require these areas. I asked, and this would probably not be enough to pass the test, so ended up adding more at the bottom…

    I just read over the doc block in loop.php, and I certainly see the value in this approach. I suppose it comes down to performance vs. flexibility. Both are important, so I’m not so sure which side I fall on now…

    I’m glad to hear you find value in the approach. It definitely helps when you start adding things like ajax-powered menu’s and endless-scrolling. Not having to duplicate the code is a good idea IMHO.

  11. Michael Fields February 16, 2011 at 4:09 am

    My child theme isn’t going to be much of a reworking. Just some new bits here and there. I’ll let you know when it’s live. I just love the one-column layout, and I’m really looking forward to robust format support.

    Sweet! I’m excited to see it! I totally love one-column layouts, I can never figure out what to add to a sidebar and end up spending a lot of time trying to exorcise the sidebar code from the theme.

  12. Yummi Nagano March 23, 2011 at 1:06 am

    Hi there!

    I just installed this theme today and I like the look.

    My suggestion would be to disable the listing of Page Titles in the Header, either completely or individually.

    The Page Titles are already in/under the footer and since my site has a large number of pages, this makes for a HUGE header which pushes the content way down the page.

    I looked through the header and stylesheet code trying to accomplish this, but couldn’t figure it out.

    Thanks,
    Yummi

  13. Michael Fields March 23, 2011 at 4:49 am

    Go to Appearance -> Menus and create a new menu and then add it to the “Primary” Theme area. This should clear this up … I think your idea is pretty good and it will make it into the next version :) Thanks

  14. Andrew March 23, 2011 at 8:29 pm

    What would you say is the ideal size for a background image to have stuff show up on the left and right side of blog posts before it starts to get cut off?

  15. Michael Fields March 24, 2011 at 9:47 pm

    Yummi. The more I thought about your suggestion, the more I thought it was a great idea. I’ve added it to the 1.0.1 release which is currently available on Github. If you are upgrading from here, be sure to checkout the “format” branch. I will submit changes to the WordPress directory once I’ve addressed a few more bugs that I’ve noticed! Thanks again for the tip. I’ll also be mentioning this at WordCamp Seattle :)

  16. Jessie March 25, 2011 at 9:28 pm

    I’ve been beating my head trying to find out how to remove the “Timestamp” above the posts and the “[link]” at the end of every post. I can manage to find the code to remove in every theme but can’t find it in Ghostbird. Where???

  17. Putu Yoga March 26, 2011 at 8:03 am

    Nice theme dude, but i have one suggestion, how about “comment-Count” on posts ?
    i didn’t see any comment count

  18. Michael Fields March 26, 2011 at 8:07 am

    Thanks! I think I can do something about this for the next version :) Kinda bugs me that it’s not there. This is one of those cases where I thought it was a good idea, but in practice makes little sense.

  19. Michael Fields March 26, 2011 at 10:28 am

    What exactly do you mean by “Timestamp”? To my knowledge, the only timestamp-like thing appears below the post content. Is the [link] appearing on all posts? It should only show up on asides, status updates and links. I would suggest that you download the My Ghostbird child theme and follow the instructions in the comments in header.php.

  20. kevin March 26, 2011 at 5:28 pm

    Great theme, Trying to replace the word TIMELINE, but cant find it in the code to replace. I see it in the Intro, but nothing with the word timeline to change. Please advise.

    Thanks so much.

  21. Michael Fields March 26, 2011 at 11:39 pm

    on line 31 of home.php you will see the following line:

    <?php ghostbird_title( '<h1>', '</h1>' ); ?>
    

    You can delete it or replace it with code like:

    <h1>My Custom Title</h1>
    

    Changes are best made in a child theme. Best possible scenario here would be to download the My Ghostbird child theme and make all of your changes there. I will be updating the theme pretty soon with some bug fixes and enhancements. Making your changes in a child theme will allow you to take advantage of these changes in the future.

    On another note, I plan on making the page titles more intuitive in the future. The ghostbird_title() is one of the biggest failures in this theme IMO. And the fact that you couldn’t figure it out right away proves it to me. I’ll be talking about this function and why it was a bad idea at WordCamp Seattle this year.

  22. kevin March 27, 2011 at 1:57 am

    Thanks for the quick reply.
    I did find that line and was going to just delete it, but was just puzzled from a learning standpoint where you are pulling “timeline” the word from.

  23. Michael Fields March 27, 2011 at 2:41 am

    No worries! Completely understand your confusion and this has already been fixed in the next version which I should be releasing by next week. Sorry ’bout that :)

  24. Jessie March 27, 2011 at 4:26 pm

    I meant “Timeline”, not “Timestamp”. That is at the top of the page and would like to find the code that would remove it. Also, [link] is after every post no matter the classification. How to remove?

    Thanks

  25. Jessie March 27, 2011 at 4:27 pm

    Just noticed comment above mine on removing “Timeline”. Will give that a shot, thanks! Just to remove [link], now.

  26. Michael Fields March 27, 2011 at 4:32 pm

    Right on. I can’t reproduce the [link] thing. Please post a link to the site so I can take a look.

  27. Jessie March 27, 2011 at 4:59 pm
  28. Michael Fields March 27, 2011 at 5:10 pm

    Thanks! I can see it. I’ll fix this in 1.1 which is in the works now. If you add a title to the post does it go away? Anyway, I’ll make sure that it does not print on “post” posts, but it is required functionality for status, link and aside posts that do not have a title. It’s easy to disable in a child theme if you so wish. Add the following to functions.php:

    function my_ghostbird_setup() {
    	remove_filter( 'the_content', '_ghostbird_content_append_link', 9 );
    }
    add_action( 'after_setup_theme', 'my_ghostbird_setup', 11 );
    
  29. Jessie March 27, 2011 at 5:18 pm

    Adding as title does make it go away but just for visuals I wanted no title for the post on the page as it is going to be a static page. Thank you for the tips and awesome support!

  30. Michael Fields March 27, 2011 at 5:38 pm

    Right on. I couldn’t reproduce this because I apparently already fixed it :) So that’s good news. Still have a few things that I need to add to the next version and then it will have to go through theme review again. If you want up-to-date-fixes, they are always available on github. Just clone the repo to you local repository and the latest changes will be in the dev branch. Ghostbird on Github.

    Thanks for your kind words! Glad you like the theme!

  31. Benjamin Cook March 28, 2011 at 3:22 am

    Hi Michael!

    Firstly, great theme! I really love the single column simplicity and sweet visuals.

    I just had a question about how the ‘next’ and ‘back’ buttons in the footer work? I can’t figure out if they are linked to post order or publish date and what order they go in… Ideally, I’d like to remove them as my site is not primarily a blog. I’m relatively new to wordpress but fairly computer savvy (and I can follow directions!).

    Cheers, and thanks for your awesome work.

  32. Phillip March 28, 2011 at 11:38 pm

    I love this theme! I do have a question, though: what font did you use for the GHOSTBIRD header?

  33. Michael Fields March 29, 2011 at 2:18 am

    Thanks Phillip! I used a free font called League Gothic.

  34. Phillip March 31, 2011 at 7:21 pm

    What’s the best way to remove the timestamp on the individual pages (not blog posts)?

  35. Phillip April 1, 2011 at 6:32 am

    For example, here is my about page (http://yoursite.com/about/): http://i55.tinypic.com/2645ba0.png

    I’m wondering if there is a way to remove the time stamp from pages but not posts. It looks like you’ve done so on this website, and I’m wondering how to go about doing that via the code.

  36. Michael Fields April 1, 2011 at 8:04 am

    You can either 1) wait for version 1.1 where the timestamps will be removed on pages or 2) copy the code from single.php into a new file and save it a page.php then you can remove ghostbird_meta_date(); from the the file. Sorry there’s not an easier way in version 1.0. I did a few things that make customizing the theme less intuitive than I thought. With each new version these things will be corrected.

  37. Benjamin Cook April 1, 2011 at 9:53 am

    What’s the best way to be notified of new versions coming out?

    (also any advice on my last question? :-)

  38. Phillip April 1, 2011 at 5:33 pm

    Thank you for your answer. I certainly hope I didn’t give the impression that I disliked Ghostbird – this is one of the best WordPress themes I’ve seen in a long time!

  39. Zach Rosenberg April 28, 2011 at 5:36 pm

    Hey Michael – sorry, I hadn’t read this response last night when I asked my question!

    Making a Page.php and removing the meta line worked perfectly! Thanks!

  40. Jorge Ledesma May 18, 2011 at 7:04 pm

    On my testsite http://testsite.ledesmaweb.com/, everything works fine, highly modifiable, but on the mobile side(blackberry, iphone). I think something is off, its view is continuously cut in half, check out my screen grab, I tweeted earlier then I realized this is more appropriate place for this kind off exchange, so apologies for the earlier tweet, View on iPHone. Thanks running v.1.0.0

  41. Michael Fields May 18, 2011 at 7:26 pm

    Hi Jorge, I think that it has something to do with a meta tag that is printing in the head section:

    <meta name="viewport" content="width=320, user-scalable=yes">

    Ghostbird does not add this. I suspect a plugin is at fault. I tried your site as well as my main domain mfields.org (where the theme is currently activated) and there is definitely a difference. Please try mine on you iDevice and let me know how it looks.

  42. Jorge Ledesma May 18, 2011 at 7:42 pm

    Oh my, what a fool, I was, no doubt, removed it now and its back to normal lol. Apologies. While on topic, can you explain how the Link Post formats work, I’m running the latest version from Github. Thanks.

    JL

  43. Michael Fields May 18, 2011 at 7:49 pm

    No worries :) The Github version has actually be abandoned. I forked it and it is now Nighthawk. There will be no new released developments with Ghostbird, just added support for new versions of WordPress and bug fixes. Not sure where I left off with the link post format in Github. Do you have a specific question?

  44. Jorge Ledesma May 18, 2011 at 7:53 pm

    Oh ok, how do I echo a Link Post. Usually, one hits the post title and it links out to whatever url is *set* but I don’t know how to create it. In my blog now, http://www.jorgeledesma.net/link/microsoft-skype I’m using a custom field titled linked_list_url and I found one titled link_url or link-url which I thought was yours and I put the url in there but “no cigar.”

    Thanks,
    JL

  45. Michael Fields May 18, 2011 at 8:08 pm

    Don’t remember if post titles will display or not for link posts. My interpretation of the codex document is that the link should exist in the post_content.

    A link to another site. Themes may wish to use the first tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.

    Basically, you just add the link in the post content. I forget what I’m doing with the title. I believe that it will print if it is non-empty.

  46. Amor May 19, 2011 at 1:13 pm

    Hi Mike. How do I change the dimension of the custom header image? It’s set to 240 × 60 pixels. Thanks in advance. My ghostbird child theme is on my test site http://wptest.amorfrancis.com, still playing around with it.

  47. Michael Fields May 19, 2011 at 2:49 pm

    Hi. To everyone who needs to know how to change the size of the header image, I came up with this short tutorial. Hope this helps!

  48. Joost de Valk July 10, 2011 at 7:42 pm

    It could be me but, is this lacking threaded comments? If so, why?

  49. Michael Fields July 10, 2011 at 7:54 pm

    @Joost de Valk,

    Ghostbird probably does not come with threaded comments. I had a crazy system coded for customizing them to my liking and then I thought that it was too complicated and pulled it from the project. FWIW, I re-deisgned the theme about 4 times while building it. The comment code looked awesome in #2, but didn’t really work in #4.

    I might revisit threaded comments in Nighthawk – the theme that I’m currently building which is a predecessor to Ghostbird (it’s installed here right now). As you can see, there’s not much going on in the comments styling. That’s the next big hurdle. Guess we’ll just have to see what happens.

  50. Joost de Valk July 10, 2011 at 7:56 pm

    I’ve always found 3-4-5 threads deep becomes a pain to design well, but 2 threads deep is a necessity for anything I do :)

    But you’re right, there isn’t much going on in terms of comment styling here, which isn’t bad, but it could use some love :) Other than that I’m really digging it.

  51. Joost de Valk July 10, 2011 at 7:56 pm

    Oh and btw, you probably should disable paged comments :)

  52. Thomas Clausen September 30, 2011 at 12:30 pm

    Hi Michael

    Really nice theme! It’s clear that a lot of thoughts went into making this theme!

    I stumbled upon one thing though – If you have several menu items you risk the items spanning over two lines.
    I would properly add the following to avoid this:
    #menu-top li a { white-space: nowrap; }

    Keep up the excellent work!

    Thomas Clausen

  53. Demian Geven December 13, 2011 at 7:57 pm

    Is it possible to add a sidebar on the left or right side? or is there an easy way around how to do this?

    Great theme!

  54. Michael Fields December 15, 2011 at 1:07 am

    @Demian,
    Ghostbird does not have sidebars by design. Sorry, but there is no easy way to add one.

Fork me on GitHub