khairul-syahir.com

Graphene theme for WordPress 3.1+

The Graphene theme is a stylish, neat, and tight WordPress theme built for WordPress 3.1 and above. It supports many (if not all) of the new features introduced in these newer versions of WordPress as well as a host of other features introduced in earlier versions of WordPress.

Graphene theme is confirmed compatible with IE7, IE8, Mozilla Firefox, Safari, and Google Chrome. It may also be compatible with other modern browsers (e.g. Opera), but no extensive compatibility test has been done on these other browsers.

The Graphene theme is now also hosted on Google Project Hosting. Visit the theme’s Project Page if you’re interested to contribute to the theme’s development.

Features

Two-column layout, with widgetised sidebar on the right and bottom.
You can also use an alternative sidebar for the front page than the rest of the website.
You can specify the number of columns to be displayed in the bottom sidebar.
Includes a jQuery slider on the front page to display your featured posts. Native implementation, no plugin required.
Includes action hooks for much greater customisability through child theme. See the full list of action hooks at the Graphene Action Hooks page.
Includes a one-column, full-width page template (since 1.0.5). See demo.
Includes an author page, which displays the author’s details, latest posts, most commented posts, and then displays a paginated list of all of the author’s posts.
Built-in Twitter widget to place in the sidebar. You can determine the title to display as well as how many latest tweets you would like to be displayed, all from the WordPress’ Widgets admin page.
(WordPress 3.0) Supports custom header images. A total of 7 default header images are included with the theme (see the theme’s readme.txt for image credits). You can also upload and set your own header image through the WordPress admin page.
(WordPress 3.0) Supports custom header text. You can choose the color of the header texts, or if they should be displayed at all!
(WordPress 3.0) Supports custom background. You can upload your own background and set your own colour, all through the WordPress admin page.
(WordPress 3.0) Supports post thumbnails. You can now upload and set a featured image for any posts or pages, and the featured image will replace the header image when that post/page is viewed.
(WordPress 3.0) Supports custom menu. You can now set your own menu through the WordPress custom menu feature. If no custom menu is defined, the theme will display all of your pages as the menu.
Ability to hide post parameters, i.e. post date, post author, comment count, etc.
Dropdown menu of up to 5 levels deep (since 1.0.5).
Theme’s options page. I have created an option page for this theme in WordPress admin under Appearance, so that you can modify certain parts of the theme without delving into the codes.
You can modify the font styling for the header title and description text, as well as the content text through the options page.
Includes an option to switch to a lighter-coloured header bars.
Includes an option to display post author’s gravatar in posts.
Built-in AdSense placement. All you have to do is enter your AdSense code and activate the feature through the theme’s options page.
Built-in AddThis social sharing button placement. Choose your AddThis button and enter the button code and activate the feature through the theme’s options page.
Supports threaded comments up to 10 levels deep.
Pluggable function definitions, so that you can easily override or add functionalities to the theme easily by using child theme, leaving the theme’s codes unchanged so that your modifications won’t disappear next time there’s an update to the theme.
Helpful 404 Error page. Instead of just displaying an error page with arcane message, the theme displays a friendly message telling the visitor what happened and provides a search box. It even does a courtesy search for the user automatically based on the url! See demo.
Supports translation. All texts in the theme are wrapped in gettext function call so that you can translate all the strings from the theme’s graphene.pot file.
Properly formatted HTML elements. I spent a lot of time formatting every single html element that you might use, including all the headings from h1 down to h6, blockquotes, code, table, and even dt! I know the default browser styling is ugly, so I leave nothing to it. Having said that, if I miss any element do let me know!
Lean and mean codes. I take pride in writing validated XHTML and CSS codes. This theme’s coding follows the standards set by the World Wide Web Consortium (W3C). Note that due to the usage of a few bits of CSS3 in a CSS2.1 stylesheet, validating the CSS will yield a few errors.
Wide browser compatibility. Did you see the list of compatible browsers above? The freaking IE6 is there too!
Uninstall option. When you decide not to use the theme anymore, you can use the uninstall button in the theme’s option page to delete all the theme’s options from the database. I’ve been using WordPress for a few years now, and I know orphaned database entries are not desirable, so I make sure the theme I coded do not leave any orphans!

Demo

What’s better way to evaluate a theme than to try it? The theme’s demo site showcases what can be achieved with the theme, right out of the box. No modifications have been made to the theme used in the demo site, and not even a child theme is being used. This is so that you can get a genuine idea of what you can accomplish (and more, since the features being demonstrated are not exhaustive – more and more features are continuously being added) when using the theme for your site.

See the theme’s demo.

Multilingual Support

The theme has been translated into more than 20 languages. However, these translations are just for the strings that comes with the theme. To translate the various contents of your site and make your WordPress-powered site fully multilingual, you can utilise one of the many available multilingual plugins for WordPress.

Since adding full-fledged multilingual support to WordPress requires deep integration and intricate content filtering, compatibility issues between the multilingual plugin and the theme may arise.

For this reason, you’ll be glad to know that the Graphene theme has been tested and officially certified to be compatible with one of the most popular multilingual plugins for WordPress, WPML.

Languages

Graphene WordPress theme is currently available in the following languages:

Brazilian Portuguese (pt_BR), by Leonardo Antonioli
European Portuguese (pt_PT), by PL Monteiro
English (en_GB), the default language.
French (fr_FR), by Wolforg, updated by Hervé and Fonfon.
German (de_DE), by Sebastian Brandner, updated by Kristine Siedentop
Italian (it_IT), by Ermes Gelosa
Malay (ms_MY), by Syahir Hakim
Polish (pl_PL), by Dariusz Francuz, updated by Agard Khaardin
Spanish (es_ES), by Eduardo Larequi
Norwegian (nb_NO), by Tommy Stephansen
Chinese (PRC) (zh_CN), by Alex Chen
Chinese (Taiwan) (zh_TW), by NavCore
Swedish (sv_SE), by Gary Ward, updated by Tobi
Turkish (tr_TR), by Gürol Barin
Japanese (ja), by Masato Maekawa
Persian (fa_IR), by Dayan
Dutch (nl_NL), by Jeffrey Tummers
Arabic (ar_AR), by Amal Abdul
Danish (da_DK), by Kim Nørrebo
Czech (cs_CZ), by Ond?ej Paš?alka
Hungarian (hu_HU), by Major Gabor
Russian (ru_RU), by Andreas Beraz, updated by Tobi
Belarussian (be_BY), by Alexander Ovsov
Ukrainian (uk), by Igor Lisovuy
Bulgarian (bg_BG), by Nikolay Boyukliev
Urdu (ur_UR), by Selftest Engine
Serbian (sr_RS), by Balkanboy Media
Greek (el), by Nikos Karadimas
Kurdish Sorani (ckb), by Hamid Qamishi
Romanian (ro_RO), by Alexander Ovsov
Albanian (sq_AL) by Gent Ukehajdaraj

For instructions on how to use any one of the languages above, see this video tutorial.

If your language is listed above but not included in the theme’s files, it’s probably because the language files are added after the latest version release, and will only be included with the theme on the next version release. In that case, download the language pack here: [Download not found]. After that, place all the language files in the wp-content/themes/graphene/languages/ folder.

If your language is not listed above, see how you can translate the theme. The instructions are written for the Hybrid theme, but the steps are mostly the same. The default strings are provided in the file graphene.pot, from which you can use POEdit to create a new catalog.

To use the other languages for your WordPress installation, see how you can install WordPress in your language page from the WordPress Codex.

If you have translated the theme to other languages than those listed above, or if you think you have a better translation, please contact me so that I can include your translation with the theme.

Header image credits

My gratitude to these image authors who have allowed me to include their royalty-free images with the theme:

‘Flow’ header image by Quantin Houyoux
‘Fluid’, ‘Techno’, ‘Fireworks’, and ‘Sparkle’ header images by Ilco

Other notes

To display the codes within the <code> element with the preformatted styling, include the class attribute class="block". Example: <code class="block">some code here</code>.

Download

Head over to the WordPress official theme directory to download the latest version of Graphene.

If you want to make modifications to the theme, you might want to download the PSDs for easier design modification.

Support & Feedback

I always love feedback, so keep them coming! Especially if you have any suggestions on how the theme could be improved. If you found any bugs or have any technical difficulties, do let me know as well. ~~Use the comment form below for technical support and feedback.~~

If you have a feature suggestion that you would like to see implemented, let me know about it in the comment section and I’ll consider adding it in the future.

Comment forms are really not the best way for back and forth discussion, especially when there’s 100 posts already! For support, feedback, bug report, feature suggestion, or even simply to show off, please go to the support forum.

Changelog

The changelog has been moved to the demo site. Head on there to view the full changelog of the theme.

Support the developer

See the long list of features this theme has? The codes don’t jump out of the text editor and assemble themselves. Developing this awesome theme took a lot of effort and time, weeks and weeks of designing and coding and testing, and I plan to add even more features to it in the future. If you like this theme or if you are using it for commercial websites, please consider a donation to help support future updates and development.

Like This Post? Share It!

100 comments

Natalie (pingback)

August 21, 2010 at 3:19 am (UTC 8 )

Thank you Syahir, it worked like a charm.
abdoell (pingback)

August 21, 2010 at 6:12 am (UTC 8 )

Mohon bantuannya, bagaimana caranya agar RSS pada blog saya bisa terbuka, karena setiap saya klik selalu ada istilah 404 forbident,apa maksudnya?
1. Syahir Hakim (pingback)
  
  August 22, 2010 at 1:26 pm (UTC 8 )
  
  Cuba nyahaktifkan Permalink dan lihat kalau RSSnya berfungsi. Kalau tak, cuba tukar menggunakan tema Twenty Ten untuk lihat kalau-kalau masalahnya terdapat pada tema Graphene.
Apostolos (pingback)

August 21, 2010 at 9:00 am (UTC 8 )

hi, nice theme. My question: Can I (and how) change the string “Leave comment ” and the string

“Your email address will not be published”? I want to translate both in my language (greek).

Thanks again for the theme.
1. Syahir Hakim (pingback)
  
  August 22, 2010 at 1:15 pm (UTC 8 )
  
  Please see the Languages section above
Sebastiaan (pingback)

August 22, 2010 at 6:38 am (UTC 8 )

Thank you for this great theme! I do have a problem with it.

When I add my google analytics code in the settings, the actual code is displayed on every page below the theme. Any thoughts on this?

I do know that for google analytics to work best the google analytics script should be in the header section.
1. Syahir Hakim (pingback)
  
  August 22, 2010 at 1:13 pm (UTC 8 )
  
  Hi Sebastiaan,
  
  The google analytics code is indeed added to the footer of every page, but it’s not supposed to be displayed. The whole code is a JavaScript script wrapped in the <script> tag, and I’ve tested it on the theme’s demo page, and it works fine.
  
  There’s really no reason why the Google Analytics script should be in the header section. Scripts should be in the header section only if there’s inline JavaScript codes that call the variables and/or functions defined in the script, which isn’t the case with Google Analytics. Putting the Google Analytics code in the header will also potentially slow down the page load, as the browser will have to download the script first before displaying the page. The same goes for any other scripts.
  1. Sebastiaan (pingback)
    
    August 22, 2010 at 2:14 pm (UTC 8 )
    
    Hi Syahir,
    
    I don’t know what is going wrong, but when activated the theme only publishes the analytics code and not the script.
    
    This is what the html looks like:
    
    <code><!– BEGIN Google Analytics script –> UA-XXXXXXXXX-1 <!– END Google Analytics script –> </code>
    
    Thanks
    
    Sebastiaan
  2. Syahir Hakim (pingback)
    
    August 22, 2010 at 2:25 pm (UTC 8 )
    The tracking code that you need to insert in the theme’s options page should be something like this:
    
    <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-#######-#']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
Joey Hammer (pingback)

August 22, 2010 at 12:54 pm (UTC 8 )

Just finished setting up my site with Graphene. Thanks for putting together such an awesome package and sharing it with the community!
1. Syahir Hakim (pingback)
  
  August 22, 2010 at 1:27 pm (UTC 8 )
  
  Nice set up you have there! The upcoming version will actually include options to hide the posts parameters like date and author, but I see you already did that yourself 😀
2. Syahir Hakim (pingback)
  
  August 22, 2010 at 1:31 pm (UTC 8 )
  
  Seems to me as well that your website could use a Syntax Highlighter and Code Prettifier plugin. Just a suggestion 🙂
Joey Hammer (pingback)

August 22, 2010 at 10:24 pm (UTC 8 )

The biggest changes I ended up making were to the content width, removed the RSS/Search bar at the top (both elements I moved elsewhere), and placing the date next to the author instead of the day calendar in the margin. If there was an easier way to change the content width, that would be awesome (though I’m not sure how you might do that since a lot of the numbers are buried in the CSS). I look forward to the future improvements.

Doh! You’re right! I imported the posts from another blog, so some of the formatting is still off (especially the code). Thanks for the suggestions!
1. Syahir Hakim (pingback)
  
  August 23, 2010 at 1:45 am (UTC 8 )
  
  The way I implemented the option right now is by inserting a custom class to the wrapping element, so that I can target the content element and set the width accordingly just using CSS. Also, if a user decides to hide the date, the content area will automatically be expanded to make use of the extra available space.
  
  Of course, by automatic I mean it appears automatic. Behind the scene it’s all still PHP and CSS.
Joey Hammer (pingback)

August 23, 2010 at 11:21 am (UTC 8 )

Sorry, I should have been more clear when I said “content”. I meant that I expanded the whole site content (div id=”container”, the outermost element) from the original 900px to somewhere over 1000px. But of course there are several width values that need to be modified to adjust to the expansion, including the banner image size so you can still swap out the image in the dashboard. If there was an easy way to change that in the theme options, it would be very useful.

The content date controls sound quite handy as well!
Kelli (pingback)

August 24, 2010 at 12:00 pm (UTC 8 )

I’m about to launch my website using your theme…THANKS…but I’ve been trying to change the background color from the dark background to a lighter blue, but it doesn’t accept any changes. Not sure what I’m doing wrong. Also, it there a place to change the font of the text?

I’m totally new to all this so I’m sorry if these are dumb questions.

Thanks,
Kelli
1. Syahir Hakim (pingback)
  
  August 24, 2010 at 2:20 pm (UTC 8 )
  
  Hi Kelli,
  
  Currently there’s a bug with the custom background feature implementation in the theme, where you can only set custom background images and not colour. This bug has been fixed in the upcoming version 1.0.8.
  
  There is currently no option to change the font of the text, but you can modify it yourself by using a child theme. See my comment reply to Thomas on how to do this.
Kelli (pingback)

August 24, 2010 at 3:03 pm (UTC 8 )

Thank you. Do you know when 1.0.8 will be available & can I just redownload it?
1. Syahir Hakim (pingback)
  
  August 24, 2010 at 8:23 pm (UTC 8 )
  
  It’ll be available in 1 to 2 weeks’ time, hopefully. I’m pretty occupied at the moment.
Andre (pingback)

August 26, 2010 at 12:41 pm (UTC 8 )

hey khairul, thanks for making this great theme.

I have a problem, how can i make the main menu under the header? how can i change the button?

The Demopage have ” Home, About and Parent Page”. At my Page its Home and “Eine Seite”. I want more categories like “Home, About, Contact, Impressum, Links. Something like that.. How can i make this?

Thanks for your help

André
1. Syahir Hakim (pingback)
  
  August 26, 2010 at 2:46 pm (UTC 8 )
  
  Hi Andre,
  
  You can use the Custom Menu function in WordPress. Just go to your WordPress admin, Appearance > Menus and define your custom menu there. It’s very easy to use, and is much much more customisable.
  
  In fact, when I released the theme I wasn’t expecting people to use the default menu at all. The default menu was meant to be a fallback, where it just lists all the WordPress Pages created in the website. This provides the most basic of functionality, and since the Custom Menu functionality really adds powerful customisability, I provided the theme with support for Custom Menu instead of building one my own.