A couple of people have expressed interest in my minimalistic blog theme. After cleaning up the code over the weekend, I’m delighted to present to you my very first theme designed by myself. What’s Genki? Genki means cheerfulness, vibrancy and vitality in japanese.
Features
- 3 columns: Fluid-Fixed-Fixed
- Sliding tabmenu on the left. Static when javascript is disabled.
- Widget support
- XHTML & CSS compliance
Changelog
Version 1.1
- Allow longer titles in Pages navigation
- XHTML & CSS Compliance
- 404.php added
Version 1.2
- Tag support for WP 2.3
License
This theme is released under the Creative Commons Attribution 3.0 license, hence please leave the author links intact.
Preview
Download
- Also Translated to Spanish by Galder
Plugins Used
- For the sliding tabs, I’m using the Dagon Design Sitemap Generator for sitemap tab and WP-ContactForm [Akismet Edition] for contact tab. It’s not included in the theme pack, so you have to download them, use your own plugins or simply removed the tabs.
- To edit the tab’s text, you can use the PSD (Photoshop) file in the psd folder
- To add/remove a tab, edit line 9 in footer.php
Tips & Tricks
How to add the sitemap and contact pages?
For Contact Page
1. Install and activate plugin: WP-ContactForm [Akismet Edition]
2. Go to Admin Panel > Write > Write Page
3. If using the Visual Editor, switch from “Visual” to “Code” view first
4. Insert <!–contact form–> into post
5. On the right menu, look for “Page Slug” and enter “contact”
For Sitemap Page
1. Install and activate plugin: Dagon Design Sitemap Generator
2. Go to Admin Panel > Write > Write Page
3. If using the Visual Editor, switch from “Visual” to “Code” view first
4. Insert <!– ddsitemapgen –> into post
5. On the right menu, look for “Page Slug” and enter “sitemap”
My title is too long. Can i show the title using a full sidebar?
Unfortunately no. You can try to reduce the font size (in style.css, edit #logo h3).
Or replace your title with a logo (width of 195px).
How to exclude the sitemap & contact from showing in the sidebar, under about me?
In line 17 of sidebar.php, add the exclude parameter to the wp_list_pages with your page ids. More details at Wordpress Codex
Easter egg: How to make my blog title appear in 2 colors?
Some hardcoding required. In line 3 of sidebar.php, replace with following code and edit the title to your liking
<div id="logo"><h3><a href="<?php bloginfo('url') ?>/">Eric</a><a class="logoalt" href="<?php bloginfo('url') ?>/">ulous</a> </h3></div>
Need Help?
Much as I want to provide free support, there are only 24 hours a day.
So if you need a chunk of my time, I’m available for hire.
What's Next?
» Share This (Social Bookmarks/Email)» Subscribe to Feed
» Subscribe to Email
» Leave a Comment
Related Posts:
» WP Theme: GenkiTheme (Fixed Width)
» Testing of Plugins and Themes on WP 2.3
» Theme Bugfix: TechnoHolic, SoftwareHolic, GenkiTheme (Fixed Width)
» Newer Post: Localization of WP Plugin: Genki Announcement
« Previous Post: Testing of Plugins and Themes on WP 2.2
this is a nifty theme. i like the page rollovers a lot. its cute.
Wowww This theme very sexy
Thanks For theme… When new Theme ?
Hi there, I love this theme! But my site name is to long and it goes behind the search box, how would I drop the search box down, I can’t seem to find it in the code?
Good evening…
I dropped your theme into my site and noticed a couple of things. 1. I couldn’t get the sitemap plugin to work. 2. The pages rollover send it to white not like yours with a graphic.
Are we missing some coding? Files?
Jenny: I like the word cute to describe the rollovers
Hitnews: clueless myself
Howard: add the code below to style.css
.search form {
padding-top: 50px;
height: 30px;
}
Scott: maybe you can try to re-upload menu.gif, which is the rollover graphics.
For the sitemap, did you create a new page to insert the <!– ddsitemapgen –> tag?
Andy: your email doesn’t seem to work so I hope to answer your enquiry here.
Actually the Projects/Personal/Wordpress page links to my category posts. You can use the wp_list_cats function as below (sidebar.php)
<div id="navcontainer">
<ul id="navlist">
<?php wp_list_cats(”title_li=”); ?>
<?php wp_list_pages(”title_li=&depth=1″); ?>
</ul>
</div>
Yes to all of the above.
I am running Wordpress 2.2. Has everything been tested with that version?
Very nice theme, I use it on my WP2.2 site, with no problems.
Thanks.
Actually, Knutur, you do have some issues with it. The pages rollovers on the left sidebar blank out when you roll over them. I’ve checked it in Firefox and IE.
Genkisan,
I’ve uploaded the theme to three different sites and get the same problems in IE and Firefox browsers with the rollovers. Do you have a file list for the images?
How rude of me. I do love the theme! I am using it now but would love the rollover thing to work right. I may just create images myself. Thanks for your hard work.
Knutur: Glad you like it
Scott: It should work on WP2.2, as confirmed by Knutur. I can see his left sidebar too on IE/Firefox.
I suspect the menu.gif is not uploaded properly. The direct link to menu.gif should be morningbrew.sdwhiteonline..genkitheme/images/menu.gif but I can’t seem to find it. You can work along that line. Mine is at ericulous.com…menu.gif
No worries.. no hard feelings.. will be good for me to know if there’s indeed a bug
look away for 5 minutes and there are comments everywhere
Anyway, I don’t seem to have the same problem with the rollover for pages, so I think Genkis suggestion with the menu.gif, is probably a good bet.
l love it
so cool~!
the file is in place. still not working. And I don’t see the rollover images on Knutur’s site either. IE, Firefox, two different computers… same thing. I’m lost.
NEVER MIND!!! Sheesh! Knutur’s site is fine…
ok, I got it working. I had to edit the URL for the menu.gif file and give it an absolute url. your default was images/menu.gif I added http://sdwhiteonline.com/morningbrew/wp-content/themes/genkitheme/ in front of that and it seems to work fine now.
Must me something on my server that doesn’t like the code directing it to a virtual subdomain.
Anyway, THANK YOU for your patience! I love the theme. No if I could just get that sitemap plugin to work.
Scott: looks like everything’s fine now
angelive:
Eric,
Thanks for plugging in your email response (my email box was full)
This worked great! I’ll let you know how it works out.
-Andy
Hi, i love this theme and am currently using it. I just thought i should bring a bug to your attention in the floating nav tabs on the left side. With the wp-cache plugin enabled it seems to not work after the first load from multiple computers. For example when i clear my cache through the control panel and load my page on my own pc, the tabs show up. Now after this initial viewing has been cached, and i load my page from a different computer, the tab bar will not show up. I have tried this from numerous different machines and it always happens. Any ideas on how to fix this other than disabling wp-cache?
Andy: you’re welcome
Nick: I’m running WP-Cache too. I tried to duplicate your error but so far so good. I noticed some extra code in your footer.php. Not sure if that will solve your problem.
In footer.php, line 16 for me, remove onclick="javascript:urchinTracker(’/file/?ref=/’);"
Hi genkisan,
I checked my footer.php however it does not contain the line you reference. I’m somewhat confused at this point.
Try to view page source in Firefox. Look for the highlighted section in http://i14.tinypic.com/664rsih.gif
It may be dynamically generated. Do you have any Google Analytics Plugin installed? Try disabling it.
Yeah its great! I love this theme!!! Thank you Thank you Thank you Thank you Thank you Thank you
Good theme!
Genki,
Thanks for the help, you were spot on. Disabling the google analytics plugin solved the problem. Do you know of any other method of implementing google analytics?
You can manually insert google analytics code in footer.php. The code can befound here.
i really like it and i’ll try to customize it a little tomorrow … for now just thanks, and I’ll see to get you a beer ASAP
Hello ericulous.
Im using your genki theme now and it was a great theme.Clean and simple. I love it
I would like to know if i can insert ’show top commentators’ plugin in your theme. I tried several times but its seem i need to find another way.
Thanks you.
KOoLiNuS: looks like I need to fix the page navigation to allow longer text before I can get my beer
kasyah: what problem did you encounter? It doesn’t show up or the format is wrong? I tried the following and it seems to work.
<h2>Top Commentators</h2>
<ul>< ?php ns_show_top_commentators(); ?></ul>
A marvellous topic, with your permission I will put it in my blog.
I will do some retouch to him but always I will name your source.
A greeting
Luis
Thanks for making this theme available. It’s exactly what I was looking for. Attractive, simple, and manages content very well. Thanks again.
This theme looks absolutely wonderful for my recipe site. Thanks!
Hokua theme for your hochiak blog
Kamsia kamsia!
Extrange error. I have instaled in this subdomain: http://eu.galder.net and no style is showed. It looks like a permission or paths error.
I would appreciate if you could look to it.
Thanks!
Great! Is working now. I donwloaded Genkitheme-10 from wp-themes and now is working properly. Thanks in advance. It looks great. If finally I use it, I will tranlate it into Spanish and Basque and send you.
Thanks again!
You are most welcome galder
Hey.. I really like this theme and would love to use it. But I noticed that you use a deprecated (and really old) layer tag. Any particular use and can that be replaced with something else?
And document.write is not really a nice api imo.. Any chance that they can be replaced with some other technique to get the floating navigation links?
Thanks for the great theme
The layer tag is there to play nice with NS4. If you don’t mind NS4, you can replace the layer tag with the div tag written by the document.write(). Then you can do away with the document.write()
Yeah I’m not too much bothered about NS4.
And could you elaborate a bit on how I can do away with the document.write()?
Thanks for the quick response
this theme really looks cool. i dont know why i feel irritation when three buttons slide during scroll
How can i costumize for horizontal float window, i want to scrolldown, but i want that the home, contact and sitemap show horizontal not vertical
webs: aww.. I thought it was cool
cesar cifuentes: I think it will be easier to find an existing theme with horizontal menu than to customise
AJ: in footer.php
Remove all 3 lines of document.write() at line 10, 16, 34.
Replace <layer id="divStayTopLeft"> with <div id="divStayTopLeft" style="position:absolute"><div id="sidetab"><ul id="navlist"><li><a href="<?php bloginfo("home"); ?>" title="Home"><img onMouseOver="this.style.src=\’contact_on.gif\’" src="<?php bloginfo("template_url") ?>/images/home.gif" width="25" height="60" /></a></li><li><a href="<?php bloginfo("home"); ?>/sitemap" title="Sitemap"><img src="<?php bloginfo("template_url") ?>/images/sitemap.gif" width="25" height="60" /></a></li><li><a href="<?php bloginfo("home"); ?>/contact" title="Contact Me"><img src="<?php bloginfo("template_url") ?>/images/contact.gif" width="25" height="60" /></a></li><li class="sidetab_alt"><a href="<?php bloginfo("rss2_url"); ?>" title="Subscribe to Feed"><img src="<?php bloginfo("template_url") ?>/images/blank.gif" width="25" height="25" /></a></li></ul></div>
Replace </layer> with </div>
No is not yours, this blog its great, so cool, its mine that is wrong because it has a lot of things that i cant put vertical, and thank you so much, really.
Genkisan, I have translated into Spanish, and I’m using in my own blog http://www.galder.net
Soon I will translate into Basque as well http://eu.galder.net, and will publish both translations in my blog and send them to you.
The readers of my blog have told me is awesome, and for sure it is.
Thanks Genki!
TQ for the great theme. I have it in my website. Very pro and clean. Thumbs up to you
cesar: I’m kinda confused.. haha..
galder: Great! Glad your readers like it
Scholarship: my pleasure
Genkisan,
Good day & thank you so much for the nice theme.
Just one quick question, which ‘Recent Comments’ plugin are you using? And how do you change the number of characters for the recent comment excerpts?
Please assist.
Warmest regards,
Chris
This theme does NOT validate. LOTS of errors. For example, id of navlist is used twice. Please check XHTML validation.
Genkisan,
Sorry one more question, how do you add a widebar on top of the left and right sidebars?
Thanks,
Chris
dP: Well.. I didn’t put a xhtml validated sticker on this theme.
Chris: I’m using the Get Recent Comments. you can set the limit in the plugin admin panel.
Sad to say, it’s rather difficult to create a widebar for this theme. Depending on your situation, answer to Howard’s issue might help.
Hi Ericolous!
Here it is, a translation of the Genki Theme into Spanish:
http://www.galder.net/2007/06/26/genkitheme-en-castellano/
I have added the favicon.ico I use at http://www.galder.net
Thanks Genki, nice theme.
Yo, genkisan
Help!! I was testing a 1350px header on the theme, cos I didn’t know the exact width of the theme, so I started it off by testing a 1350px one..and it seems like it’s too wide till the width expanded to the right, I quickly changed back to the smallest header, but ever since then, the screen doesnt show the full page anymore, it will require me to scroll to the right to see the remaining part… Can you tell me how to fix this? and what’s the exact width of the “wrap”?
Galder: Thanks. I have put up your download link on this post
Chris: This theme is fluid so there’s no fixed width. If you like to set it to a fixed width, change the #wrap width. Instead of width:99% set it to e.g width:950px;
Took me 3 hours, but i have the theme 100% W3C compliant
Oops.. that bad huh.. sorry for the trouble Pross.
Hi -
Great theme, innovative, dynamic, clean and user friendly. But I’m dense.
How do you get the contact and sitemap tabs to work? I’ve installed all the plugins, just don’t know how to put the page together (or whatever) so that works when you click on the tab.
– Paul
@Genkisan no trouble
Paul: you need to be using permalinks and set the page’s slug to contact and sitemap respectively. Otherwise you can hardcode your page url in the hearder.php and footer.php.
I love this theme.
I’d like to edit the tabs. Which font/size do you use for the text on them?
Great Theme!
You can find the photoshop file in the PSD folder. But in case you dun have photoshop, the font is Tahoma 12pt.
Hi Genkisan
I love your theme so much that I downloaded it, as well as Dagon Design Sitemap Generator and WP-ContactForm [Akismet Edition]. I actived them in the admin panel bot still when I tried to open them, 404 error found.
I know almost nothing on php. Maybe I must insert codes like somewhere? Can you help me? Thank you!!!
BTW
I’m really stupid..so plz if you have time, would you plz tell me how to use permalinks and set the page’s slug; if you’re busy, I’ll try someway else. Anyway, Thank you very much!!!~~!!!~~~!!!~~~!!!~~~!!!
Contact
1. Go to Admin Panel > Write > Write Page
2. Insert <!–contact form–> into post
3. On the right menu, look for “Page Slug” and enter “contact”
Sitemap
1. Go to Admin Panel > Write > Write Page
2. Insert <!– ddsitemapgen –> into post
3. On the right menu, look for “Page Slug” and enter “sitemap”
Hello
I just downloaded your theme and was wondering how you add the information in the second and third columns?
I want to add links to important parts of my blog, just like you did with the Personal, Make money, Project links, how would I do this?
And then the adds, how do I add featured sites, recent readers and the product links to my blog, if I use your theme?
Thanks!
Simply edit sidebar.php and insert the html code. I hardcoded most of the items you mentioned (without the use of widgets).
3x~!!!
another question…. a link will appear above the “Categories” as soon as i finish writing the pages. how can i make it disappear? 3x~!!!
You can remove the following code in sidebar.php
<div id="navcontainer">
<ul id="navlist">
<?php wp_list_pages(’title_li=&depth=1′); ?>
</ul>
</div>
Eric, This is a beautiful theme. I’ve been wanting something similar for a long time, but my (old) platform, Blogware does not have a lot to offer. Moving to Wordpress now, I’ll be using your theme:-)
I have a similar situation to Howard with a longer Blog Title, but your solution to him did not work for me: even with the search bar down, the Blof title wraps around, I guess it wants to stay in the first sidebar. I ended up reducing the “logo” font from 50px to 46px and that did it for me. How do you do the cute trick where half your name is green, the other half blue? It’s all green for me …
Thanks.
Ouch, used the wrong URL in the sig above
It’s hardcoded in line 3 of sidebar.php. Have to disable the 2 colors to make it hassle free. Or consider it as an easter egg. An example below
<div id="logo"><h3><a href="<?php echo get_settings(’home’); ?>/">Eric</a><a class="logoalt" href="<?php echo get_settings(’home’); ?>/">ulous</a> </h3></div>
Wow, you’re really responsive, thanks! But I’m greedy, asking for more. I love the sliding tabs, but would like to reassign some. I figured from your post here how to reassign the permalinks behind the tabs, so my problem is perhpaps more WP than theme related: how do I get a permalink for Archive and Categories, which I’d like to put behind those tabs?
Thanks a lot.
Somewhat related to the above, I’m trying my best to create the sitemap and contact pages as you described, but all I am creating are blank pages.
I’m using WP 2.3, could something have changed there? (Talk about changes, there is a WordPress database error: [Table 'wordpress_zoliblog_com.wp_categories' doesn't exist] in the original sidebar. I don’t see it anymore since I started to use widgets)
Not sure about WP2.3. Will be better if you post your question to WP Support Forum.
Hi -
Love the the them and have been tweaking it a little for this site: http://www.ukcolumn.org
The problem I have is that the titles of the posts intermittantly disappear or that is, some of the letters within the titles disappear, particularly as a result of scrolling up and then down. This is not specific to the ukcolumn.org site, but happens whenever I visit any site using the Genki theme.
Is this a browser issue at my end? I use Ubuntu and the Firefox and Opera web browsers and this irksome fault occurs using either browser.
Other than that this is a crackingly effective theme.
Ed
Hi Ed, possible for you to do a screencap?
Hey, great theme and have been an instant convert since some time now… I have tried to tweak it a little bit but somehow am stuck on one single point… the header… I have tried everything to get it to center on the page but it won’t… I think it’s tired of my grumbling now… any suggestions?
thanks once again for a great theme! Cheers.
Try adding the following to your masthead
margin: 0 auto;
Hello,
I´m searching the Sliding tabmenu on the left that you have in this theme, there is one plugin for it?
Thanks!!
EmiAstur, it’s based on a javascript
http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm