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.
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.
100 comments
WordPress Theme Releases for 08/14 | Tolly Blog (pingback)
August 15, 2010 at 9:20 pm (UTC 8 )
[…] Graphene theme is a stylish, neat, and tight WordPress theme built for WordPress 3.0. It supports many (if […]
Eduardo Larequi (pingback)
August 15, 2010 at 10:13 pm (UTC 8 )
All the fixes work fine, Syahir. Thanks a lot for your work and interest. I’m going to send you my translations in five minutes.
Syahir Hakim (pingback)
August 15, 2010 at 10:35 pm (UTC 8 )
Glad to hear that 🙂 Make sure you include a URL when you send me that translation files so that I can link back to you in the languages credit.
Tweets that mention Graphene theme for WordPress 3.0 | khairul-syahir.com -- Topsy.com (pingback)
August 15, 2010 at 11:15 pm (UTC 8 )
[…] This post was mentioned on Twitter by Eduardo Larequi, Joshva. Joshva said: Graphene theme for WordPress 3.0 | khairul-syahir.com http://bit.ly/br6jLW […]
Sara Bradner (pingback)
August 16, 2010 at 6:28 am (UTC 8 )
I love your theme. I have 2 questions. I am trying to change the color around the header from the black or dark gray to a lighter color so it isn’t so dark. Is this something I can change?
The second thing is I have entered the Adsense code and checked the box but no ad is showing. I have never shown an ad so it may be something I am doing wrong like not fully activating the Google adsense ad but I can’t see any steps I still need to do. What size ad space is the box in your theme?
Syahir Hakim (pingback)
August 16, 2010 at 10:36 am (UTC 8 )
Hi Sara,
Currently there is no option to change the colour around the header, but you can make the change manually using child theme if you know CSS. I may include an option with the theme to switch to ligther-coloured bars around the header in future release.
As for Adsense, the size is 468×60. The limiting size is only the width (468px), and you can have whatever height you want. Also, if you’re using any ad-blocking software like AdBlock Plus, make sure you disable it on the website to see if the ads are there.
The code for the ads should be something like this:
Syahir Hakim (pingback)
August 16, 2010 at 10:42 am (UTC 8 )
Actually, I took a look at your website and the Google Adsense ads do show, albeit vertically. Please also note that the ads will only be displayed on single posts and pages only. They are not displayed on the front page.
Wordpress Super Ninja » Weblog Tools Collection: WordPress Theme Releases for 08/14 (pingback)
August 16, 2010 at 12:21 pm (UTC 8 )
[…] will create a great search engine friendly document outline for the Twenty Ten WordPress Theme.The Graphene theme is a stylish, neat, and tight WordPress theme built for WordPress 3.0. It supports many (if […]
HD (pingback)
August 17, 2010 at 8:10 am (UTC 8 )
Good theme
helen (pingback)
August 18, 2010 at 6:55 am (UTC 8 )
Is there a way to change the font-size of the header at the top?
Syahir Hakim (pingback)
August 18, 2010 at 7:36 am (UTC 8 )
Hi Helen,
You can make modifications such as that without changing the theme’s core code by using a child theme. (See my comment reply to Thomas about this).
In your case, the CSS selectors to modify are
#header h1
and#header h2
. Example:Note that right now you have to include the the
!important
bit, as you are overriding an inline CSS. This will be removed in the future.35 Beautiful and Free WordPress 3.0 Ready Themes (pingback)
August 18, 2010 at 9:04 am (UTC 8 )
[…] 32. Graphene […]
Peter (pingback)
August 18, 2010 at 4:47 pm (UTC 8 )
Thanks for providing your excellent theme, Syahir.
There are several really good options listed in the Features, above but I can’t see where AI can control them… Do you also provide any kind of How To documentation?
I’m trying to use Graphene to display several products with their images and comments etc. I’m told I need to ask you if you can set the theme to display “full post content” on “category pages”. If that can be done, can I please ask you to walk me through the process so that I can turn the images on.
And (last one this time) if I use my own header graphic which includes the title of the site, how do I turn off the site name from automatically appearing over the top of the image?
Syahir Hakim (pingback)
August 18, 2010 at 9:24 pm (UTC 8 )
Hi Peter,
There’s no How To documentation for the theme, as I simply don’t have the resources to provide one. This is a free theme after all.
The theme includes a one-column, no-sidebar, full-width page template since version 1.0.5, and you can set any page to use this template instead of the normal template with sidebar. This can be set in the Edit Page screen under Page Attributes, where there’s an option to set which template you want to use for that particular page. See what the page using the one column template will look like at this demo page.
If you just want to display the products with their images and comments, you can use the standard WordPress post for that, with one post for every product. All posts displayed with the theme will show the full content with comment by default, but you can turn off comments for individual posts/pages via the Edit Post/Page screen.
As for the header text, you set the “Display Text” setting to “No” in WordPress admin page Appearance > Header.
Peter (pingback)
August 19, 2010 at 12:12 am (UTC 8 )
Syahir, forgive my greed. I am so very appreciative of the free-ness (obviously doesn;t stop me asking for more!).
So sorry to be such a clutz but I simply cannot find “Edit Page screen under Page Attributes” anywhere. I’ve done a screen run-through here: http://screencast.com/t/YmEzZjMy And I DO fully understand if you don’t have the time to go through it. But I’m completely blocked at this point and don;t know how to move ahead.
And thank you for the header tip, I managed to find that one without further help.
Syahir Hakim (pingback)
August 19, 2010 at 12:25 am (UTC 8 )
Hi Peter,
I guess I didn’t phrase that quite well. What I meant was the Template option is located under the Page Attributes section of the Edit Page screen. See the screenshot.
Regarding the documentation, it will simply take too much time to create one, and I would rather spend the time on improving the theme, like adding new features and fixing bugs. So if you found any bugs or have a feature suggestion, do let me know and I’ll consider them.
Comment page: Prev / 1 2 3 4 5 / Next