Wordpress Theme - Into the Ocean
Jul 9th, 07 | 58 remarksI’ve been thinking (and talking) about releasing a free Wordpress theme forever, and some of you may have wondered a time or two if I was going to follow through - I don’t blame you. I’m happy to finally announce the arrival of my first Wordpress theme for public release, inspired heavily by Blue October’s album Foiled.
Description
With only three graphics site-wide1, it’s a very lightweight theme. The CSS weighs in under 500 lines of code, with clear comments for easy customization. Entirely fluid, it degrades nicely down to 800×600, with plenty of room for additional sidebar items such as related posts or ads, etc. Friendly titles have also been included for SEO goodness.
Noteworthy
Into the Ocean is CSS / XTHML 1.0 Transitional valid, built for 2.0+, and tested on a variety of the latest browsers (Firefox, IE, Opera, Netscape, Flock and Safari Windows). UTW is the only plugin inherently supported at this time, and of course that’s optional. Assuming you already have it installed, just uncomment that portion of code in the sidebar to utilize it.
Update: I’ve got a live demo up now. See it in action. 7/10/07
Update: Into the Ocean is also now widget-ready! Sorry about the delay, but I was having database issues and could not publish or edit posts. 7/18/07
Observances
This theme is licensed under a CC Attribution-Share Alike 3.0 License, and is being distributed here on DA only, since I hear Theme Viewer has halted new registration, and is unresponsive these days.
Bug Hunting
As my first theme, I’m sure this will be a work in progress. Please report any bugs so that I may improve subsequent versions. Fixes and/or questions emailed in will be listed here so that anyone using the theme may benefit. As always, comments and suggestions are also welcome.
Download Into the Ocean v.05
Change Log
- Fixed an issue where the (improperly) commented UTW function call was throwing an error, and preventing the comments section from displaying. Sorry about that!
- Corrected a problem where child pages in the main navigation were creating a gap between the navbar and the header banner. It is now limited to parent pages only, so sub navigation will have to be hand coded. If someone has a fix for this I’m all ears.
- Swapped out the hand-coded links list, so the Blogroll would show up properly by default.
- Add the link_pages() functionality for numbered Pages.
1 And a small handful of icons courtesy of FamFamFam.
Looks great - nice, clean and simple. If you ever get time it would I’d love to read a post on your process to designing it - do you start with a sketch or just get in there and start messing about with the CSS of a basic wordpress theme?
Jul 9, 07 | 10:55 am[...] at Design Adaptations has released a beautiful WordPress theme called Into The Ocean. It’s a really nice design and a bit different layout than the typical ones we’re used [...]
Jul 9, 07 | 11:29 am[...] Charity Ondriezek over at Design Adaptations has released a beautiful WordPress theme inspired by Blue October’s Foiled album, called Into the Ocean. [...]
Jul 9, 07 | 12:36 pmLooks nice. Is there a demo install of it somewhere?
Jul 9, 07 | 1:09 pmIgnore me. I should read posts more carefully before I comment. :oops:
It looks great!
Jul 9, 07 | 1:11 pmThanks Tara - and that’s not a bad idea for a post! I love when designer’s share “inside tips” about their process. I do rudimentary sketches of layout ideas in my squared Moleskine sometimes, which I carry everywhere “just in case”, but more often I’ll just play in Photoshop or right in the CSS of a base theme. Honestly it all depends on how impulsive I feel. ;)
Jul 9, 07 | 1:20 pmNo problem Aaron. You got a giggle out of me anyway - and thank you! :D
Jul 9, 07 | 1:58 pmHey! I love the title of your theme! Very fitting! And very you! It’s perfect! :)
Jul 9, 07 | 2:21 pm@Joci - thanks man! Would you believe I set up a playlist of my favorite 5 songs from that album, looped it, and listened for about 3 hours straight one time when I was burning the midnight oil working on this? Oh wait, I forgot who I was talking to. Nevermind! ;)
Jul 9, 07 | 2:56 pmHaha, you listened to like 5 songs on repeat for like 3 hours??? Wow Charity, I mean, who does that??? I would never, ever, do that, ever. ;)
Jul 9, 07 | 4:25 pmLooks like a Hemingway installation without attribute links…
Jul 9, 07 | 11:35 pmThe link to your demo is messed up. Can you correct it? Would like to see how the theme looks before I download it. Thanks!
Jul 10, 07 | 12:02 amNice looking theme, although, like Nikita, I couldn’t get to the demo to have a decent look. Widgets aren’t hard. Have a look at this link to Automattic’s site which should give you all the information you need. If you are having issues with it, give me a shout and I will try and give you a hand. :)
Jul 10, 07 | 12:55 am^ there’s an extra http// in the demo link, just strip that and you can get to the demo.
Very Hemingway-ish, but in a good way, I really like it.
Jul 10, 07 | 1:45 amI’ll have to try it when I get back from work, in the demo I don’t know why recent entries doesn’t show the one entry. I’ll add the widget code if I add the theme for my bloggers.
[...] Into the Ocean è un tema per WordPress che fa combaciare due aspetti che spesso sono in contrasto in un tema: aspetto e peso. Questo tema, infatti, si presenta molto gradevole alla vista, ed il tutto è ottenuto senza tuttavia eccedere in tema di pesantezza dei file. Solo tre file grafici ed un foglio di stile che si mantiene sotto le 500 righe permettono di avere un tema che si mantiene molto leggero in termini di peso. Into the Ocean si presenta come un tema a due colonne, dalla larghezza fluida, interamente validato dal punto di vista CSS / XTHML 1.0 Transitional, e distribuito secondo la licenza CC Attribution-Share Alike 3.0. [...]
Jul 10, 07 | 3:30 am[...] Into the Ocean is a gorgeous 2-column theme that supports Ultimate Tag Warrior. [...]
Jul 10, 07 | 4:53 amSorry about the bad link everyone - I was having trouble with my database late last night and couldn’t get the post to save after editing. Anyway it’s fixed now.
@milo - I suppose it does look Hemingway-ish. I hadn’t really thought of it but in taking a second look I can see why you would think so. Rest assured attribution was not ignored because, well, I didn’t use any of Kyle’s work to create this theme.
@Collin - thanks for the link. I had actually looked through Automattic a couple days ago, but I must’ve missing something, because the function wouldn’t register. I need to take another look today. And thanks for the offer - I may be dropping you a line if I get stuck! :)
Jul 10, 07 | 6:58 amMore than happy to help if I can although I am a little limited in typing ability at the second as I have just cut both my finger and thumb on a drill bit! Oops!
Can you by any chance throw a couple more posts in and possibly a page or two? Maybe just with the lorum ipsum code? Will help others see how it displays multiple posts and pages.
Jul 10, 07 | 7:58 amSorry, spamming. There appears to be an issue with the UTW related posts on the single post view too. Sorry!
Jul 10, 07 | 8:00 am[...] Charity over at Design Adaptations has designed a great looking WP theme called Into The Deep. [...]
Jul 10, 07 | 8:28 amNo problem Collin - I appreciate the feedback. It appears I have some bug squashing to do. :) I will get up some dummy content today. I meant to do that when I got the demo set up, but it was very late last night and my eyes were burning!
Jul 10, 07 | 8:55 am[...] Sitemap « Wordpress Theme - Into the Ocean [...]
Jul 10, 07 | 10:28 amNice theme, would be cool to have the “nav” element with a fixed position to keep page navigation and search function easily available even when at the bottom of the page. If you don’t mind I will play around with this some?
Jul 10, 07 | 6:39 pm[...] Into the Ocean (tags: wordpress theme) [...]
Jul 11, 07 | 12:19 amNot a bad idea Kevin, and go ahead. The license allows for all the remixing and tweaking you want. :) Let me know what you come up with!
Jul 11, 07 | 12:12 pm[...] Into the Ocean是一款WP主题，其采用全屏幕100%宽度展示，最小范围为800×600。模板代码通过CSS和XTHML 1.0校验和SEO优化处理。支持UTW Tag插件，展示站点在此。 [...]
Jul 11, 07 | 4:13 pm[...] Into the Ocean，100%宽度，蓝色系。 [...]
Jul 12, 07 | 7:09 amPut this in the sidebar:
And put this in a file you created and named functions.php:
You might also find this page useful about writing a good sidebar markup:
http://automattic.com/code/widgets/themes/
Jul 14, 07 | 6:43 amPHP codes didn’t show up, check your e-mail.
Jul 14, 07 | 6:44 amThat’s a great theme, hope you will “widgetize” soon :)
Jul 17, 07 | 1:28 amThanks Baris. I got your first email but couldn’t get the update out before I left on vacation. I tried emailing you back to say thanks but it wouldn’t go through for some reason. Glitches, ugh! Anyway, everything should be sorted out now, widgets and all. :)
Allaon - thank you, and wish granted. ;)
Jul 18, 07 | 1:17 pm[...] is a freelance web designer who just released her first (and very beautiful) WordPress theme called Into the Ocean. A few of her posts that are not to be overlooked [...]
Jul 25, 07 | 5:52 amI sorry, but i find the comment function is down for this theme.
Aug 2, 07 | 4:58 amI got it.
At comment.php,you should change the form input code to following:
” />
ID); ?>
Aug 2, 07 | 5:10 amsorry，maybe code can not be written at commont.
Anyway, the comment.php should be updated.
Aug 2, 07 | 5:11 amThanks for the feedback tsian. I’ll crack open the file and take another look.
Aug 2, 07 | 3:42 pmI am changing it for Chinese wordpress site.
main targets are:
1, change the 100% width to fixed width
2, update the comman.php
3, font size somewhere for Chinese character
4, something else
5, Change the feed.php. There is rarely space in Chinese sentense. So I should change the_content_rss function.(changing counting space to counting character)
I should get your permit that I want to put it at my blog for downloading after I finish. I will remain all author(you) information in the theme.
Looking forward to your reply.
Aug 2, 07 | 6:09 pmThank you.
I am changing this theme to make it compatible with Chinese Wordpress site.
I think you need add
at header.php.
Otherwise, some plugin function cannot be activated. Such as RunPhp.
Aug 3, 07 | 5:53 am……
why code cannot be input…
Ok, I will write an article for my changing.
And I need your permit to put this theme(updated) in my site and make it downable.
I remain all author information.
Aug 3, 07 | 5:55 am@tsian - the reason you can’t enter code is because I don’t have the plugin functionality installed. It’s one of those things I intend to do and just haven’t got around to it yet. I apologize.
I’m not sure what you mean about the header.php file, or why that would affect plugin activation. Perhaps I’m misunderstanding, but the code in header.php is based off the default WP theme, so I have no idea what the problem could be.
Under the CC license I chose, you are welcome to make mods to the theme and redistribute it as long as attribution remains. Good luck! :)
Aug 3, 07 | 9:53 amhi
I wrote a post for all changes I made till now.
You can read at here.
http://www.21percent.com.cn/qyll/html/2007/96.html
I am sorry my site is in Chinese. I don’t know whether your computer can display it correctly or not.
Aug 4, 07 | 2:40 amAnyway I add English instruction in the page. Hope it will be clear enough to you.
hi, I really like this theme and I just started to work with it for a new website. First of all my compliments, it looks nice. I have just 2 things.
1. Is it possible to enlow the body? so there is more space for the header (banner) image …
2. How come I don’t see the sidebar already in the home page? I have to enter first a category or a post to see the sidebar. I prefer to see also in home
Again my compliments and goodluck with designing more lovely themes.
Ciao
Aug 27, 07 | 3:26 amHi Donna, and thank you. Glad you’re enjoying the theme! I’m not sure what you mean by enlow… I’m guessing you want to move the body down, and have a taller header? It’s possible to do that by adjusting the height of the #nav div. Keep in mind this will cause the background image to tile, and it wasn’t originally intended to do so. You may have to swap it out with another image or just use a solid color w/o an image.
The sidebar isn’t being called by the index.php page, so that’s why you’re only seeing it on single pages. You can modify the homepage to display the sidebar instead of the Recent Entries data by inserting this function above the #recent_posts div:
Don’t forget to remove the spaces in the snippet above. Hope that helps. Let me know if you have any more questions!
Aug 28, 07 | 11:23 am[...] learned a lot since the release of my first public theme, and that process continues. Let me know if you come across any theme weirdness not listed above. [...]
Sep 4, 07 | 3:48 pm[...] first one is called Into the Ocean, from Design [...]
Sep 7, 07 | 7:36 amHmm, I’ve got .05 installed and my widgets admin page shows it to be widget-able. Yet, none of my widgets are showing up. I’m testing it with the basics like RSS and text and categories, etc.
I read that you updated the theme for widgets. Am I missing something?
Sep 8, 07 | 10:12 amAhh, my mistake. Either I was delirious, or I wasn’t looking at a page or post. I see that the widgets only show up on those and not on the index page.
Is there any way that the footer can become a pseudo-sidebar, inasmuch as the widgets could be placed into it instead or in addition to the actual sidebar?
Sep 8, 07 | 4:00 pmYou can configure the footer to be “widget-aware” fairly easily. First, c/p this snippet of code within the containing div for whichever section you want to widgetize:
This allows the template to recognize another “sidebar”. Then in the footer section where you want the widget to display, call your template:
Finally, in the functions.php page, make sure it “knows” there are now two widgetized areas instead of one by changing the number it currently recognizes. Right now it should be empty.
< ? php if ( function_exists('register_sidebars') ) register_sidebars(2); ? >That should cover it! If you get confused or need more instruction, automattic has a lot more info. Oh and don’t forget to remove the spaces in the open/close brackets above. :)
Sep 10, 07 | 4:00 pmThanks for your great help, Charity! I guess I’ll just have finally read the codex on some of this stuff. ;) At the moment, I don’t fully understand why this would have to be put into a template. Like, why couldn’t it be in the file footer.php, like it is in your sidebar.php.
Also, wouldn’t your other instance in sidebar.php need to be dynamic_sidebar(1)?
Sep 14, 07 | 8:34 am[...] Into the Ocean - from Design Adaptations [...]
Sep 18, 07 | 10:41 amVery nice theme. How can I get info in the “more info” sections? I can’t figure out where to enter that info.
Sep 23, 07 | 5:12 pm[...] | Download Bookmark [...]
Oct 4, 07 | 4:04 pmA minor glitch, here; I use markdown syntax for my entries for the most part, and that looks fine for the main post, but the right side of the main page is displaying the content unprocessed (so links look like [text](href) instead of a real hyperlink.
I’m going to take a look at the theme code myself tomorrow (when I’ll finally have time) but if you had any ideas to shortcut the process it’d be fantastic.
A more significant problem is hierarchical categories in the category list; you might want to try it (if it makes a difference, the categories in questions are: Friends, Appreciation (which is a child of Friends) and “General Thoughts”, at the same level as Friends. It looks pretty broken, at least on my screen.
Dec 10, 07 | 8:56 amFrom the demo:
WordPress database error: [Table 'demo.wp_categories' doesn't exist]
SELECT * FROM wp_categories
WordPress database error: [Table 'demo.wp_categories' doesn't exist]
SELECT * FROM wp_categories WHERE cat_ID = ‘3′ LIMIT 1
WordPress database error: [Table 'demo.wp_categories' doesn't exist]
SELECT * FROM wp_categories WHERE cat_ID = ‘4′ LIMIT 1
WordPress database error: [Table 'demo.wp_categories' doesn't exist]
Apr 8, 08 | 12:21 amSELECT * FROM wp_categories WHERE cat_ID = ‘4′ LIMIT 1
Chris - I’m going to be addressing any/all free theme issues very soon. They all need some attention and of course upgrades to be compatible with WP 2.5. I’ve learned a LOT since releasing Into the Ocean almost a year ago, so I’m planning to make some improvements to the code and general functionality of it and the others as well. Thanks for the info though, and apologies for the extraordinary delay in responding.
Thanks Markus. I’m upgrading all my databases/WP installations this week and moving some stuff around in preparation for a new storefront and premium theme demos, so things might get messy for a bit. The free theme database is fixed now though. :)
Apr 11, 08 | 8:08 amI really love this theme. One question though where do the widgets go? I have them enabled but can’t seem to find them on the page.
May 22, 08 | 9:18 pmHi Nicole, widgets for this theme are only coded for the single post pages at this time. This is going to be fixed to include Pages in the next version. If you’re just checking your home page that’s probably why you’re not seeing any widgets show up. :)
I want to update each of my free themes to be compatible with WP 2.5, which includes various fixes like removing deprecated function calls, and of course adding fun stuff like tags and gravatars… I’m just having trouble finding the time! It’s definitely on my to-do list though.
May 23, 08 | 9:22 amI really like that design. Especially with the offset links category. It looks real simple and clean but still has uniqueness to it. Thumbs up :)
Jun 12, 08 | 5:15 pm