WordPress Fun: A Free WordPress Theme

Advertisement

If you have been following Smashing Magazine for a while you know that we love high-quality freebies. Over the last years we’ve featured a number of designers and developers who released their work for free — among other things we presented high-quality free fonts, free WordPress themes, free wallpapers and, of course, free icons. You can find many of them in our section Freebies1.

Every release helps to make the Web a nicer place which is why we support designers and challenge them to release something for free in order to be featured on Smashing Magazine. And the results are quite often pretty impressive.

Wp-Fun2

Today we are glad to release a wordpress.fun — a free professional WordPress-theme. The theme has 2 columns, thumbnails integration, a “featured” post section as well as a nice grungy design. The theme was designed by Maleika Attawel3 from Germany, purchased by Smashing Magazine and is now released as a gift for our readers.

Download the theme for free!

You can use the theme for all your projects for free and without any restrictions. However, it’s forbidden to sell or redistribute the theme without both designer’s and Smashing Magazine’s permission — please link to this article if you would like to spread the word. You may modify the theme as you wish, but if you are planning to release your modification, please ask our permission first.

The main illustration (Teen Blogger (Punk Boy)) was created by ChinHang Chung4 and purchased by Smashing Magazine from iStockPhoto with the extended license “Electronic Items for Resale (unlimited run)”. Therefore the illustration is redistrubited legally.

5

Motivation behind the design: the idea

What do you generally do when you want to create a WordPress theme without having an actual client? The initial reaction would be; you despair. All the things we have learned as good web designers such as evaluating a client’s specific needs, doing proper field research, wireframing, finding the proper grid concept for content placement, selecting a colour scheme and visual elements to support content, choosing good type, tailored to … oh wait … this is just a theme.

A theme, by definition, is a subject of discourse. In the case of a WordPress theme, it can be anything. And in the delicate case of my humble theme, the subject is fun. Plain and simple. The idea was to create a theme that is fun and usable, heavy and light, eye-catching and robust, specific and yet generic enough to be used in a variety of ways. The theme is not designed to replace true and proper web design, ergo it is not tailored to suit a specifc niche, nor complement distinctive content. However, depending on your explicit or non-explicit purposes, the design might find a good home.

9

The prerequisites

Like all creative processes, it started with an idea. While I am a great fan of minimalistic designs, I also admire complex and graphically intense web compositions. The only prerequisite was that it doesn’t take ages to load and that the total size of the graphics doesn’t add up to an enormous sum that would only enable those with mighty speedy internet connections to work. That was the only aspect I had to keep in mind to get started.

The design process

I had decided on going with a simple two column layout. No fancy modular or column grid, but a simple hierarchical grid like the majority of blogs use. As a page’s length is variable, it was clear that only the content that is extra but not mandantory could reside at the bottom of the page. So all navigational aids (such as categories or friends’ links) as well as a “most discussed” feature would take their position at the very end of the page.

10

Because I wanted to keep it as elementary as possible and void content clutter, it was clear to me to do away with too many features that would blur instead of sharpen the reader’s perception when visiting the site. Hence, I kept it rather simple and thus set aside the left column for featured content and the right column to display the newest blog entries.

Here11 you have the result of my humble efforts (preview) and here12 you can download the theme for free.

Special requirements

The theme is built with WordPress 2.5.1 and is only partially backwards compatible. The theme also works with WordPress 2.6. As this theme uses a few .png files, it is recommended that you make sure that the image paths to these are correct (for IE6). You find the two CSS rules in the ie.css file inside your theme folder. The theme can be used with or without widgets (below the fold).

Last but not least…

We are regularly looking for creative designers and artists. You may not know it yet, but we might feature you in one of our upcoming posts.

If you would like to release a high-quality free font, a WordPress-theme, some wallpapers or an icon-set please contact us13 — we would like to support you (both financially and with the broad coverage on Smashing Magazine).

Footnotes

  1. 1 http://www.smashingmagazine.com/smashing-freebies/
  2. 2 http://www.smashingmagazine.com/images/wordpress-theme-fun/wp-fun-large.jpg
  3. 3 http://rockatee.com
  4. 4 http://www.chihhang.com
  5. 5 http://www.smashingmagazine.com/images/wordpress-theme-fun/wp-fun-large.jpg
  6. 6 http://www.smashingmagazine.com/images/wordpress-theme-fun/wp-fun-large.jpg
  7. 7 http://www.smashingmagazine.com/images/wordpress-theme-fun/wordpress-fun.zip
  8. 8 http://www.smashingmagazine.com/images/wordpress-theme-fun/wordpress-fun-source-files.zip
  9. 9 http://www.smashingmagazine.com/images/wordpress-theme-fun/wp-fun-large.jpg
  10. 10 http://www.smashingmagazine.com/images/wordpress-theme-fun/featured.jpg
  11. 11 http://www.smashingmagazine.com/images/wordpress-theme-fun/wp-fun-large.jpg
  12. 12 http://www.smashingmagazine.com/images/wordpress-theme-fun/wordpress-fun.zip
  13. 13 http://www.smashingmagazine.com/contact/index.php/form

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    Not bad, but I am not fan of the grunge look. I totally loved the featured content on the side though.
    Is anybody away of any minimal style theme with the featured content on the side, (just like above).
    I think the designer will do us a lot of service by giving us a less grungy version of this theme.
    Please help.

    0
  2. 52

    www.asthmaboymusic.com

    July 16, 2008 9:56 am

    something about the title illustration for this article makes me want to shoot myself in the face.

    0
  3. 103

    Calítoe: 800×600? Come on now… When Yahoo updates their front page to 1024, it’s time for everyone else to catch up.

    Are you still rocking a 56.6kbps modem too?

    0
  4. 154

    Thanks, this theme looks quite cool.

    0
  5. 205

    Awesome theme – added to my site. The boy graphic is very easy to edit. I changed mine around quite a bit.

    http://www.lordofthetechs.com

    Matthew

    0
  6. 256

    Love the theme and the new rockatee.com website.
    How does one port a wordpress theme to a plain CSS layout?

    0
  7. 307

    never post befor, my 1st… just like to say thanks.. i love smashingmagazine..

    0
  8. 358

    Does anyone know how I could add a widget sidebar to the right of the posts?

    0
  9. 409

    i had bought a pro theme but switched to this one … i wasn’t a regular visitor of smashing magazine but now i thinking to join the fan club of smashing magazine :) it’s pro theme and it was supposed to be little complicated… contact form is useless and i disabled the plugin and it’s working fine. the only thing that is lacking in every free theme is ‘ support ‘ i think many people would love to switch to this theme provided one is out there to solve their issues, it has little compatiblity issue with ie6 logo does not appear despite png transparent fix coding…. anyway best theme for personal blog thumbs up!!!

    0
  10. 460

    can anyone help with how to get the small images to show up in posts on the front page?

    0
  11. 511

    Nice theme, thanks!

    0
  12. 562

    Articles for JOOMLA ?

    0
  13. 613

    Nice design, a little too dark for me.

    0
  14. 664

    would love to see this as a Drupal Theme :)

    0
  15. 715

    That’s really nice!

    0
  16. 766

    Good theme,I like it .maybe i will use!

    0
  17. 817

    So cool…Thanks !!!!

    0
  18. 868

    awesome stuff, great work dude… thank’s a lot…!

    0
  19. 919

    Absolutly Awesome Theme!!! I love it!! Please more Ai cartoon style WordPress Theme. Really Thanks

    0
  20. 970

    Absolutely fantastic work! Just looking at the .psd file, you can tell the amount of work that went into it and the real attention paid to every little detail. While some might night like the grunge look or might think the theme is too dark, if you look at what actually went into making this wordpress theme, you really can’t help but appreciate it. Great job Smashing Magazine!

    0
  21. 1021
  22. 1072

    @jason

    You are allowed to redistribute istockphotos illustration as you please if you pay for the extended license.
    From istockphotos.
    Available Extended Licenses
    Multi-Seat (unlimited) 50
    Unlimited Reproduction / Print Runs 100
    Items for Resale (limited run) 100
    Electronic Items for Resale (unlimited run) 100

    so I guess the designer did that :) hope so anyway
    regards

    0
  23. 1123

    grunge n cute at the same time .. nice!

    0
  24. 1174

    Thank you for the Theme.. it is awesome! :)

    0
  25. 1225

    Nice theme! Thank you.

    0
  26. 1276

    nice theme, although the link to the most-commented-posts-plugin (which is needed apparently) is dead…
    anybody ?

    0
  27. 1327

    Great Theme, I can’t wait to try. Thank you! :)

    0
  28. 1378

    Am I the only one having a problem with the left margin of the headings in the bottom? They seem completely off in the preview!?

    0
  29. 1429

    Nice job…. =)

    0
  30. 1480

    thanxs a lot

    0
  31. 1531

    Absolutely amazing theme, great work.

    0
  32. 1582

    I found a link for the most commented posts widget here most-commented-posts-plugin

    0
  33. 1633

    Too full, too charged, too complicated!

    A lot of “buggy” things (the un-transparent “page fold” in the footer) and unesthetic things!

    You can do better, much better!

    -1
  34. 1684
  35. 1735

    How do i go about having an image in the posts image placeholder?

    0
  36. 1786

    Does it works with Wp 2.6?. I cant configure it. Everything is in a wrong place.

    0
  37. 1837

    Maleika Attawel

    July 17, 2008 10:19 am

    Hello, hello.

    Firstly, I’d like to thank everyone for their comments and criticism, good and bad alike, so dankeschön, gracias, thanks, merci, grazie, and … can’t think of any other languages right now. :)

    In response to comment #31:

    Jeff: Add the absolute path to the images locations in your /themes/WordPressFun/images/ie.css folder and it should work.

    In response to comment #41:

    Jeff: That is correct. Thanks for the heads up. The archive page needs to use the archive template page.

    In response to comment #45:

    Ankit: Thanks muchly!

    In response to comment #51:

    Mike, the fonts are Georgia and Arial. As these are “mostly” installed on every computer, I have not included them.

    In response to comment #57:

    Ty, By viewing the source file, you can view the HTML skeleton which is not WordPress dependent.

    In response to commment #59:

    Matthew, the design was not created with a right sidebar column, so unless you’d roll up your sleeves, change the visual layout via the .psd, the CSS, and the HTML as well as the WordPress theme files, it is not possible.

    In response to comment #66:

    Matthew, it is explained in the readme file. If you still have issues, do let me know.

    In response to comment #86:

    jCoote, do you mean the image thumbnails? If so, you will find the instructions in the readme file.

    In response to comment #87:

    dogday, have you installed the theme as outlined in the readme? If you are still experiencing problems after that, do let me know and I’ll be glad to help.

    If I have forgotten anything or neglected to respond to someone’s particular installation issues, do give me a shout.

    Best,

    Maleika

    0
  38. 1888

    I feel so silly having totally missed the Readme notes. Thank you for everything Maleika.

    JCoote aka Makki

    0
  39. 1939

    One more question i have is how do i change the text shadow in the header?

    0
  40. 1990

    Maleika Attawel

    July 17, 2008 5:34 pm

    JCoote,

    for that you will need to open the .psd file. Assuming you want to change the text to reflect your site (from wordpress.fun to something more adequate), go to the Logo layer and see what styles I have applied to the layer labeled text BG. Create your text, select it, then go to Select > Modify > Expand and enter a value of 2 pixels. For the expanded selection, create a new layer, fill it with a background colour and add a dropshadow or anything else you like.

    0
  41. 2041

    Black book design

    July 17, 2008 6:43 pm

    Maleika Attawel

    Hi Dude,
    nice theme btw.

    first thing: How do you make an image appear in the column-one/php section (featured)
    In your post you have one but even with the custom field in, nothing show’s up.

    Second: the image.php files doesn’t work properly. when you attach an image and have check post url (brings /?attachment=id) the design gets skrewed up.

    Thanks for this nice theme.
    Cheers

    0
  42. 2092

    I’m always a fun of ChinHang Chung Illustrations. I’ve got in my queue to release a couple of free themes too using his designs.

    0
  43. 2143

    Very nice designed, but are we limited to 4 menu options ? How will the design behave when we had 6 or 8 options?

    Great work

    0
  44. 2194

    Thanks for your support Maleika.

    Im still fighting to make this theme look like the screenshot.

    Another question: I have changed some texts and translated other in the psd file. How do I export only the needed zones of the full .psd image to fit the images into the /themes/WordpressFun/images folder (to overwrite them)?

    Thanks in advance again.

    0
  45. 2245

    Ok one problem solved. My screen resolution is 1024 x 768 so I couldnt see the theme in the correct way.

    Just need to know as I told, how to export the images.

    Thanks.

    0
  46. 2296

    yes, nice theme

    but i cant access to that website :(

    0
  47. 2347

    Forbidden

    You don’t have permission to access /images/wordpress-theme-fun/wordpress-fun-source-files.zip on this server.

    :/

    0
  48. 2398

    Vitaly Friedman & Sven Lennartz

    July 18, 2008 5:34 am
    0
  49. 2449

    Maleika Attawel

    July 18, 2008 8:27 am

    dogday,

    take the reference image (original) and open it in Photoshop to see its dimensions and placement. Then go back to your .psd, click on the Rectangular Marquee Tool, set the width and height for the portion you want to extract from the .psd, click on the .psd, place the selection exactly over the portion you want to extract, go to Edit > Copy merged, then File > New and finally Edit > Paste. Name it as the original and upload it to your themes/images/ folder.

    0
  50. 2500

    hello
    i wont to use the theme but i’m not able to see the image in the home page. How can i see the imge of article in the index. i see it on the article but not in the home page. where i have to change to insert a thumbuline in index?

    0

↑ Back to top