Blog

“Elegant Grunge” WordPress theme

“Elegant Grunge” is an unwashed yet crisp WordPress theme inspired by wefunction.com. It features:

  • Layouts options
  • Support for custom background and header
  • Widget-ready footer
  • Optional full-width page template that removes the sidebar

screenshot.png


Get Elegant Grunge

If you like Elegant Grunge, please consider buying one of my products.

Version 1.1 has been updated to the WordPress.com version.

This version no longer contains automatic image framing, or a photoblog template, so if you wish to continue using these features, please use version 1.0.3.

Changes:

  • Layout updates and fixes
  • Fixed deprecated function calls and PHP errors
  • Code cleanup to match WordPress theme style guide: spacing, syntax, comments, package description
  • Added author comment highlighting
  • Added support for empty post title and styles for all heading sizes
  • Fixed bugs with theme options menus
  • Simplified custom functions and removed unneeded theme options
  • Remove custom header image support and use default WP header image functionality instead
  • Added image.php template
  • Added RTL language support
  • Changed post timestamp to use the WordPress global date format
  • Remove unused template files
  • Implement WordPress 3.0 features: Custom Menu, comment_form()
  • Added default WP style support: body_class(), post_class(), comment_class() and remove unneeded definition for EG_BODY_CLASS
  • Removed unneeded function_exists() calls
  • Simplified image display: no frames or photoblog page
  • Nicer typography and updated grunge images for sticky posts, trackbacks, and new date format
  • Styles for sticky posts
  • Added newer/older single post navigation links
  • Better class attributes to avoid collision with WP default classes (author, post, date, etc)
  • Remove sidebar logic check in every template (once in sidebar.php instead)

Note: If you have problems with this theme, please post your question at the WordPress forums. Please don’t contact me directly, as I don’t have the resources to help you.

Language Packs

Many thanks to contributors!

Casual German/Deutsch – by Markus Bischof

Formal/polite German/Deutsch – by André Heil

Italian/Italiano – by Paolo Lucciola

French/Français – by Arnaud Ball

Romanian – by Adrian Nitescu

Arabic/العربية – by Mena

Finnish/Suomi – by Antti

Turkish/Türkçe – by Mehmet

Brazilian Portuguese – by Jandeilson S. Barbosa

Spanish/Español – by José Vergara

Norwegian/Norsk – by Vipblogg

Russian/русский язык – by Sergey aka Cepxuo

Czech – by Bengo

Lithuanian – by Valentinas Bakaitis

Belorussian – by Marcis G./Galina Miklosic

Polish – by Grzegorz ‘ixcesal’ Lasecki

Dutch – by Rene (WPwebshop)

Indonesian/Bahasa Indonesia – by Kelayang

Filipino – by Mikael Riec

Danish/Dansk – by Morten Elm

Latvian – by Journal

To use these language packs, you must download the WordPress language pack first, copy it into wp-content/languages, then edit wp-config.php and set the WPLANG value to the appropriate language abbreviation (eg ‘fr_FR’). Then unzip the Elegant Grunge language pack into the wp-content/themes/elegant-grunge folder, and you’re set.

Community

WordPress Theme Elegant Grunge Template Addon for built-in WordPress GallerySebastian Graß

Paul Kaiser has written a great article on how to add navigation menus to older WordPress themes, using Elegant Grunge as an example.

Tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

350 Comments

  1. Posted October 8, 2008 at 2:08 am | Permalink

    Woo! Nice to see it released and up and running! Followed it here from wordpress forums. =)

  2. Posted October 8, 2008 at 10:00 am | Permalink

    Love the theme, but I’m getting a problem with the function call for adding frames:

    Warning: preg_replace_callback() [function.preg-replace-callback]: Compilation failed: \g is not followed by an (optionally braced) non-zero number at offset 257 in /home/PATH/TO/WORDPRESS/themes/elegant-grunge/functions.php on line 89

    Any thoughts on what might be causing this?

  3. Posted October 8, 2008 at 10:08 am | Permalink

    I’m sorry to hear you had a problem, Michael! It looks like you might be running an elderly PHP version; try opening up functions.php of the theme, and on line 57 changing

    $endOriginalTag = ‘</\s\g{tag}\s>';

    to

    $endOriginalTag = ‘</\s\g{1}\s>';

    Let me know how it goes – if it works for you I’ll change it in the next version.

  4. Posted October 8, 2008 at 11:06 am | Permalink

    Perfect! That fixed it. I’m on shared hosting with Dreamhost, so I don’t have much control over the PHP version they use. If it helps for testing purposes, I setup a phpinfo test at the following url:

    http://apumusictech.com/test.php

  5. Wilson
    Posted October 8, 2008 at 11:57 am | Permalink

    Nice but I also found a setback after the install, what could be done in this case?

    Warning: preg_replace_callback(): Compilation failed: unrecognized character after (?< at offset 26 in /home/content/html/sitename/wp-content/themes/elegant-grunge/functions.php on line 89

  6. Posted October 8, 2008 at 12:22 pm | Permalink

    Thanks, Michael, that’s most helpful.

    Wilson: Wow, that’s intimidating. Sounds like your PHP setup doesn’t support these things called named references, which Grunge uses a bit. Could you replace your functions.php with the one in this zip file and tell me if it works?

  7. Posted October 8, 2008 at 11:10 pm | Permalink

    I love this theme, but I’m setting up GhostHuntingBooks.com which uses star ratings (as images) and I need to remove the (otherwise great) border that surrounds all images. I know just enough PHP to be dangerous. Is there an easy way to delete or disable the image framing? My trial-and-error efforts aren’t working, so far…

  8. Posted October 8, 2008 at 11:23 pm | Permalink

    Never mind… I fixed it with CSS. I removed all the frames URLs, padding, etc. (If there’s a better way to do this, let me know.)

    Thanks for a great theme!

  9. Posted October 9, 2008 at 3:34 am | Permalink

    Hey! Thanks heaps for this WP design!

    I fell in love as soon as I saw it! As a fellow web designer from Vic, I think its great that you released this theme!

    Shaun Beale

  10. Posted October 9, 2008 at 8:01 am | Permalink

    Fiona: Well done, and thanks! Two other options for you: Either add a ‘noframe’ class to the images, or if they already have a class, add that class name to Admin:Design:Elegant Grunge:Don’t frame images with class (add a comma after the existing ‘noframe’ value, then write the other class in there. Or to disable framing altogether, just untick the ‘Apply frame to all images’ checkbox.

    Shaun: Thanks, man!!

  11. Posted October 9, 2008 at 12:14 pm | Permalink

    This layout looks great! Good job.

    Any chance of two sidebars for those of us not so good with code :-).

  12. Posted October 9, 2008 at 12:18 pm | Permalink

    I’ll keep it in mind for the next major version ;)

  13. Posted October 9, 2008 at 7:03 pm | Permalink

    Hi Mike,

    thanks for this great theme. I found it at wordpress and installed it directly – everything is looking great, but I have some Internet Explorer 7 users, which see some issues maybe you can take a look at my website with an IE – I have installed the 0.2.2 version without any modifications in an PHP5 environment and the frames around the images are not correct, also the RSS button is missing. Thanks a lot, Sebastian

  14. Posted October 9, 2008 at 7:38 pm | Permalink

    Hi Sebastian! Thanks for the bug report! I see what the problem is – your images don’t have width/height attributes, which the theme uses to try to constrain image sizes.

    I’ve fixed the next version so that it doesn’t need it – give me an hour or so and I’ll have it up, plus better handling of the photoblog tag page when Lightbox isn’t installed, plus a widget that displays random images from the photoblog.

  15. Posted October 9, 2008 at 10:03 pm | Permalink

    Hi Mike, great =) thanks a lot for the great support.

    Best regards, Sebastian

  16. Posted October 9, 2008 at 10:46 pm | Permalink

    Okay, so not quite an hour, I’m afraid =) There’re still a few more things to perfect.

    Until then, these changes will fix you up:

    Add to style.css:

    .frame-outer span span span * {
        max-width: 425px;
    }
    

    Remove from style.css the line:

    max-width: 450px;
    

    Add to ie.css:

    .frame-outer span span span * {
        width: expression(document.body.clientWidth > 420? "420px" : "auto");
    }
    

  17. Posted October 10, 2008 at 5:53 am | Permalink

    love it & using it. one observation: there’s typos – looks like a copy paste error – in header.php. the title tag set is missing the ‘php’ after the ‘?’ so it just renders “bloginfo(‘name’)” into the title bar.

  18. Posted October 10, 2008 at 11:12 am | Permalink

    Thanks all for the reports – Version 0.3 is now ready for download from this page (will probably be under review with the WP folks for a few days before it’s ready there).

  19. Posted October 10, 2008 at 1:10 pm | Permalink

    Hey, thanks for the comment on my blog! How you got over there is a mystery to me 0_o.

    Thing is, I had to tweak a few things. First, I got rid of the frames around images. The idea is neat, but it gets annoying fast when they start appearing around the smilies WP puts in. Secondly, headers in the sidebar (specifically the “Catagories” and “Blogroll” ones) had gotten bullets in front of them. I had to make a special CSS entry for them, because they had the tag, but not the in front of them, for some weird reason. That, and I tweaked the lineheight in the sidebar. It was waaay too much for my taste.

    But keep the good work up! loving your theme :D

  20. Posted October 10, 2008 at 1:13 pm | Permalink

    Oh, as I was typing that; I also noticed that if I put a long blog description on, it would put part of the text beneath the “banner”.

  21. Posted October 10, 2008 at 1:20 pm | Permalink

    Thanks Lumi ;) The witchcraft that is Google!

    Ah! WP smileys would be a problem, especially if the images don’t have width/height! Oh, looky. The smileys have a class of wp-smiley – one could just add “wp-smiley” to the “Don’t frame images with class” option. I’ll make that a default in the next version, and make a note above.

    Sidebar headers – does 0.3 fix that problem? If not, what did you do to fix it? Perhaps I missed something..

    Sidebar line height may be fixed now too, now I’m using different styles.. I’d love to hear if it fixes it. If it doesn’t, what did you tweak?

    Blog description – Ah yes.. I suppose that’s just a limitation of the theme.

  22. Posted October 10, 2008 at 7:06 pm | Permalink

    Hi Mike,

    a great release :) again. But I don’t know why it seems that the IE can’t get the RSS Button up on my installation. Maybe someone else has this issue too ?

    Thanks Sebastian

  23. Posted October 10, 2008 at 8:01 pm | Permalink

    Hi Sebastian!

    Awesome =) Well, that’s a little confusing – I’m actually not sure why it works in any browser, because rss.png from the theme doesn’t seem to exist on your site.

    http://blog.sebastiangrass.com/wp-content/themes/elegant-grunge/images/rss.png – 404’d! So how is it working in any browser? Doesn’t make any sense to me, how bout you?

  24. Posted October 10, 2008 at 10:11 pm | Permalink

    Hi Mike, thanks for digging into it, but this is not the issue. The RSS Button is coming up for every other browser I double checked it with Safari and Firefox, only the IE makes some trouble for me. But nontheless I love this theme!!!

    Sebastian

  25. Posted October 11, 2008 at 2:40 pm | Permalink

    It’s a pretty nice theme!

  26. Posted October 12, 2008 at 2:40 pm | Permalink

    Hi, just to say thank you for making this theme and it looks really awesome ~

  27. Posted October 12, 2008 at 3:00 pm | Permalink

    Hi Micheal, My name is Mena and i liked your theme it’s very beautiful and elegant..

    I have 2 blogs for one site on of them is in English and the other is in Arabic so i have edited the theme for the Arabic lang..and i hope if you can tel me how to move the sidebar from right to left and also look at the theme and tel me if there was something wrong..because it’s my first translation for theme, i have used the default translated theme in WordPress to do that to know where i should edit

    any way I’m waiting you to contact me…or reply

    Thank you, Mena

  28. Posted October 12, 2008 at 3:29 pm | Permalink

    Hi Mena – thanks! I’m glad you like it!

    To move the sidebar to the right, you’ll need to make pretty much just two changes:

    1. Horizontally flip some of the style images: body-top.jpg, body.jpg, footer.jpg, header.jpg
    2. Edit #body and #sidebar in style.css and flip the ‘float’ values, so that #body has float: right; and #sidebar has float: left;

    I’m fairly sure that’ll do it. I also suggest you flip searchform.jpg, and finally, move the message in the footer (‘This blog has been fine-tuned…’) to just above the <php wp_footer(); ?> line, or possibly even in the div with class=’credit’ – put a br after what’s currently there.

    Then it just needs some of the text translated (eg. ‘search’, ‘Subscribe RSS'; I probably should’ve used the _e() construct for those, but oh well..)

  29. Matt
    Posted October 12, 2008 at 5:24 pm | Permalink

    Great theme! One question though- how do I get the photoblog up and running? I have no idea how to approach it. If all I do is turn on the widget after a clean wp install, it deletes my sidebar. Not quite sure what to do with that or how to use the tag-photoblog.php.

  30. Posted October 12, 2008 at 5:55 pm | Permalink

    Thanks Matt!

    The widget: Actually, the sidebar isn’t being deleted per se, it’s just that when you add a widget, it replaces the default set (this is standard operation).. If you want the archives, etc, you gotta add them as widgets too.

    The tag page is used for viewing the ‘photoblog’ tag – see it on my site: /tag/photoblog.So, for photoblog entries you add the ‘photoblog’ tag, and when you view the tag page, it’ll use that tag-photoblog template. If you want it to be a different tag, rename it to tag-(new-tag).php. Or, if you want to classify photoblog entries with categories instead, call it category-(category-name).php. If you want the whole site to just be a photoblog, you could replace index.php with photoblog-tag.php. Your call!

    Lemme know how it works for you, if at all.

2 Trackbacks

  1. By Elegant Grunge WordPress Theme | Themelicious on October 11, 2008 at 6:57 pm

    [...] Elegant Grunge theme is an unwashed, yet crisp WordPress theme inspired by the We Function [...]

  2. [...] Elegant Grunge WordPress Theme is an unwashed yet crisp WordPress theme. It has Photoblog’ widget that display latest/random thumbnails from your photoblog. [...]