milohuang / reverie

Reverie is a versatile HTML5 responsive WordPress framework based on ZURB's Foundation.

A Brief Introduction

Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB's Foundation, a powerful tool for building prototypes on any kind of devices. Reverie follows HTML5 Boilerplate standard and is hNews microformat ready. It is optimized for Search Engine while at the same time improves readability.

It is extremely easy to create your blog, CMS, brochure and any other kind of sites with Reverie. You can see some samples on ZURB and how they make these prototypes. Did I just mention Reverie works well with bbPress 2.0 and BuddyPress 1.5?

###Links of Reverie###

• Homepage: http://theakiba.com/reverie

###Learn more about Foundation###

• Homepage: http://foundation.zurb.com
• Documentation: http://foundation.zurb.com/docs
• GitHub: https://github.com/zurb/foundation

###Derivatives of Reverie### There are contributors, developers who loves Reverie and created other versions. If you are one of them, send me a link.

• Leonard Bogdonoff: ZURB introduced a standalone solution of Foundation 4 Sass (under Using Sass Standalone heading). Leonard has a beautiful solution.

What are the Features?

Reverie Framework inherits all the cool features from Foundation, and packs with several other interesting features to optimize the experience for WordPress and HTML5. Including customized output for WordPress menus and caption. You can view the features list by scrolling down.

Reverie utilizes Foundation's grid to implement layouts. It is quite easy to start building your own layouts (like this page). You can read Foundation's documentation for how to implement these cool features.

###Basic Features###

• Sass compatible.
• Mobile first.
• HTML5 Boilerplate standard and is hNews microformat ready.
• SEO friendly.
• Basic CSS included, you can also use it as a finished theme.
• Foundation files are separate (for vanilla CSS version), you can update Foundation without any problems. Of course, is is always a good idea to have some backups.

###WordPress Features###

• Clean image HTML output for TinyMCE, only class and alt are returned. Post title will be automatically used for alt.
• Post formats support.
• Pagination for Foundation
• Custom Background Image and Color support
• Custom menu output for ZURB's top bar.
• Custom caption output for HTML5 figure and figcaption tags.
• Custom filter for images, will automatically wrap images with figure tag.
• Two Widget: sidebar and footer.
• Two menus: top navigation menu and footer information menu.
• bbPress.php included, compatible with bbPress 2.
• Several custom page templates are included in the package.

What about Mobile Devices?

Positive. With the power of Foundation, Reverie uses media query to adjust for all kinds of devices, including phones, tablets and computers. Reverie is also optimized for iPhone and iPad. Icons and loading images will be display when you save your website as a Home Screen app (example in the above image). Add this page to Home Screen on any iOS devices to see what I mean.

TheAkiba (Previously on ThemeFortress)

Reverie is a WordPress framework created by TheAkiba, my personal blog focus Japanese Anime and Games, instead of WordPress theme design. The old ThemeFortress website was no longer maintained and Reverie was now on TheAkiba, my other personal site.

Please note Reverie Framework is under MIT License, the same as Foundation.

reverie's Issues

IE specific code question from header.php

Hi, love reverie and look forward to sharing the current project.

I have a question regarding a line of code in the header.php file that targets IE 9 and above. Can you explain why your using this code?

1. I cant figure out why you would want to apply the no-js class to IE9?
2. Why is the only provided to IE9 plus? Shouldnt this be provided to all browsers? I notice that w3cs validator for html5 brings up an error when lang="en" is not declared in the .

Many thanks for your assistance and great work.

Bodhi McGee
RSPCA Queensland Education

Vertical tabs

Thanks for the great work on this.

I have a question. Is there a reason you removed the vertical tabs css code from the foundation core? I have a use for it and just wondering if it was creating some problems that I can't see at the moment.

Thanks!

Combining CSS files

Hey, just wondering why you chose to combine several of the Foundation CSS files into a single file (foundation.css) versus keeping the same file naming structure that they do. For me it makes it a big more tedious to pull in changes they've made. But maybe I don't know something that would make it easier. Just wondering.

Image caption shortcode can't parse

Today, when I posting a new topic with Reverie, I found that Wordpress's image caption shortcode can't parse like origin theme. When I insert a image with caption from media modal box, it's only a tag and image tag without [caption] code. I've check the functions.php then I known the image caption was rewrote for HTML5, that's great but the editor only add simple image with link.
Sorry for this mess content, I'm writing with on-screen keyboard because my laptop's keyboard has a problem.

Pagination function

Reverie use default wordpress pages navigation, hope it's become a hook to modify it

wp_nav_menu and has-flyout class

In the demo, the drop-down menu seems to work correctly but locally does not work for me unless I add the following code to functions.php (Basically adding the class "has-flyout") I'm using reverie 3.0.0 and wp 3.4.1. That class does not seem to be on the theme.

add_filter('wp_nav_menu_objects', function ($items) {
    $hasSub = function ($menu_item_id, &$items) {
        foreach ($items as $item) {
            if ($item->menu_item_parent && $item->menu_item_parent==$menu_item_id) {
                return true;
            }
        }
        return false;
    };
    foreach ($items as &$item) {
        if ($hasSub($item->ID, &$items)) {
            $item->classes[] = 'has-flyout';
        }
    }
    return $items;    
});

using Orbit

im exploring Reverie right now, really love Foundation. Has anyone tried installing and using Orbit in this theme? I guess not an issue, just a question.

wp_title is broken with WP 3.3.2 and Reverie 2.0

I really enjoy Revierie's clean code and would love to start using it, however, I am stuck with one annoying bug on my site.
Heres the URL: http://haavistu.eu/v2/

The bug is that the title of the page is broken. Whenever I'm on the front page, the title is empty. It does not matter whether I use a static page as first page or a blog-roll, the front page's title is empty on either case.

// I googled a bit and swapped the wp_title for the following:

<title><?php bloginfo('name'); ?> | <?php is_home() ? bloginfo('description') : wp_title(''); ?></title>

Front page then had "Reverie Testflight |" title, the blog had "Reverie Testflight | Just a soon-to-be broken site using Reverie." and the others had "Reverie Testflight | X" where X was the title of the page.

Anyone here able to help me out?

Nav-Bar instead of <dl class="nav">?

Just a quick question - any reason why you have not integrated <ul class="nav-bar"> but gone with <dl class="nav">?

I would suggest more people would expect to see a standard nav bar that supported multi level dropdowns or at least 1 level down.

I will try to paste some code to do this for header.php and functions.php if I manage to create this however if you / anyone else already has this it would be much appreciated!

Thanks again for your great work.

Menu Problem in Reverie

Hi, trying out Reverie and loving it, but stumped on why the menu isnt working as expected.

Firstly, The primary menu is created in Wordpress Menus but it does not show up as the current menu in the page.

Secondly, the menu is not inserting the DL in front of the menu and therefore is creating incorrect code:

Dont know why, any help much appreciated and thanks for the great work on reverie so far.

Bodhi

orbit only working JQUERY call after wp_head

ive been wondering what is going on the last hours with orbit not working, and besides a no conflict script, i found that a jQuery.js call AFTER wp_head is making it work, otherwise not. (my other javascripts work fine)

jquery scripts register/enqueue?

Isn't the 'correct' way of using jquery with WP using wp_register_script and wp_enqueue_script?

Search-button not resizing to mobile width(?)

Just wondering if I'm the only one seeing this. Let's say you have a widget, go ahead and add the Search on there.

The problem or bug arises when I collapse the browser width to a narrower one to that of almost a mobile phones. According to these example, the behavior should be that it would resize to a mobile browser's width per se:

http://foundation.zurb.com/docs/buttons.php

Please do advise if this is clear, and that this does happen on your end as well. Thanks in advance.

deprecated get_theme_data

in functions.php presstrends has get_theme_data which is now deprecated and should be replaced with wp_get_theme()

Child theme, override reverie_entry_meta()?

Hi there.

I'm trying to customize the display of reverie_entry_meta() HTML. I have the following in my child theme's functions.php file

add_action('init', 'remove_reverie_entry_meta'); 
add_action($tag, 'reverie_entry_meta');

//Remove the default Reverie entry-meta function
function remove_reverie_entry_meta() {
    remove_action($tag, 'reverie_entry_meta');
}
...

However, I am unsure what $tag should be in this case.

The other option which I'm trying to avoid is to directly edit the main reverie/functions.php file like so

if (!function_exists('reverie_entry_meta')) {
    function reverie_entry_meta() {
        echo '<time class="updated" datetime="'. get_the_time('c') .'" pubdate>'. sprintf(__('Posted on %s at %s.', 'reverie'), get_the_time('l, F jS, Y'), get_the_time()) .'</time>';
        echo '<p class="byline author vcard">'. __('Written by', 'reverie') .' <a href="'. get_author_posts_url(get_the_author_meta('id')) .'" rel="author" class="fn">'. get_the_author() .'</a></p>';
    }
}

Please advise at your earliest convenience. Greatly appreciated. TIA

sidebar issue

page-full.php has the sidebar included, which shouldnt be there as the page is full width

Integrate Wordpress Menu with Foundation Tabs with Flyouts

Hey, loving reverie!!! How can I integrate the built-in wordpress menu system with the tabbed navigation wiht flyouts of foundation css? I see .tabs in reverie, but things still seem missing. Thanks!

What's about pingback?

The pingbacks and comments has counted in comment section but the pingbacks not show and not available in comments.php

Making forms work: what goes into <form action="">?

To make my hand-coded form work, what do I put between the quote marks? And should I use GET or POST? I want all the benefits of Foundation in my forms, so I'm not using a plugin. But that requires me to know what goes into

...

Thanks in advance!

$attributes not declared before concatenation (functions.php)

When adding images with captions to posts, I get the following error:

Notice: Undefined variable: attributes in \wp-content\themes\reverie\functions.php on line 75

Here's the line in question:

$attributes .= ' class="figure ' . esc_attr( $attr['align'] ) . '"';

Shouldn't this rather be:

$attributes = ' class="figure ' . esc_attr( $attr['align'] ) . '"';

without the concatenation?

Translation

Hi,
I want to translate the comments on single post to another language. The source of comments.php looks as if GetText is integrated, but I can't find the .pot or .mo file. Could anyone please help?

How to hook SlideDeck after Header?

I'm amazed with using Reverie!

How do I add Slidedeck as a hook to Reverie? I can't find the element to call the position:

add_action('after_header???', 'feature_slidedeck');

It should be after the header.

The code in functions.php looks like this at the moment:

---

//SLIDEDECK HOOK FEATURE
// add_action('hook_name','function name');
add_action('pagelines_before_maincontent', 'feature_slidedeck');

// function name
function feature_slidedeck(){
    if (is_home() || is_category() || is_front_page()) {
        slidedeck( 10341, array( 'width' => '100%', 'height' => '420px' ) );
    }
}
// end function

---

I'm not shure if a Hook after Header is the right thing to do. Is there a chance to wrap the Slider responsive like the rest?

Thanks in advance

Child theme CSS

Hello. Nice work.

I was trying to do a child-theme to keep the main one in tact. Seems it doesn't support it? (just me or anyone else getting this issue?)

html5shiv + modernizr?

In reading, it seems like all the functionality of html5shiv is now included in Modernizr as of v1.5.0 - does html5shiv still need to be included? (see http://modernizr.com/docs/#html5inie )

"Blog Menu"

Love this theme, but what's the purpose of having "blog menu" before the menu? Isn't that obvious?

How do I remove this? I'm looking at the header file and see the "items-wrap" array and I try deleting it, and this causes errors.

My php level is quite basic, so I'd really appreciate some help with this issue. Thanks a lot :)

C

Mobile Navigation

Hi there, first of all let me congratulate you for such a great theme.
I'm starting going through responsive to dev my new sites under this method. I'd like to ask you a question about the theme I'm having doubts about.

I saw that main navigation is hidden for mobile devices, I'm sure this is being hidden because of a good reason. I tried to find some documentation about this matter but couldn't find anything helpful until this point. So I'd like to know why is it hidden and what should I do to include navigation on mobiles, because I have sites where I must include it.

Kindest regards and thanks in advance for any help.

Juan.-

use with infinite scroll plugin

I'm trying to adapt this theme to use with the Infinite Scroll plugin (http://www.infinite-scroll.com/) but it's breaking because of the sidebar placement. When the plugin runs it seems to break a div so that the newly loaded content overtakes the div area occupied by the side bar, and the sidebar renders at the bottom of posts. The only way the plugin runs without incident is if the main div is set to twelve columns and the sidebar is disabled.

Best Location for Activating Orbit Plugin

Wanted to get your opinion on the best location for activating the orbit plugin.

<script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script>

Im currently using the above code in the footer template after all other orbit and jquery files have been loaded. In the past, I have put these in the header template. So, I wanted to confirm that Im doing this in the best practice for the reverie theme and also wanted to just ask why its all in the footer and not the head? Is it purely so that the page content loads first?

Thanks again for reverie and for the support. Im doing some testing and if things continue to go well I will be using for a very large website and look forward to sharing the process on this forum.

Notice: Undefined property: stdClass::$menu_item_parent in class-wp-walker.php on line 205

I've been playing around with Reverie for a short while on the 3.3rc. But since I've updated to 3.3 stable, I keep on getting the following errors:

Notice: Undefined property: stdClass::$menu_item_parent in \wp-includes\class-wp-walker.php on line 205

Notice: Undefined property: stdClass::$db_id in \wp-includes\class-wp-walker.php on line 127

...and so forth.

To verify, I installed a brand new copy of Wordpress 3.3 with a new database, enabled WP_DEBUG, and I get the same errors.

Utility menu items

Just starting to play around with Reverie and like what I see so far. I am puzzled why the utility menu items are in the reverse sequence from the primary menu.

I made a new wp 3.3 install, created three pages (One, Two, Three), created two menus (Primary, Utility), added all three pages to both menus, and made Primary my primary menu and Utility my utility menu. The pages are listed in the same order (One Two Three) in both menus. The primary menu at the top of the home page shows the items in the expected order: One Two Three. The utility menu shows the items in reverse order: Three Two One.

The Reverie page on themefortress.com/reverie displays this behavior. Is this intentional?

Thanks

Alignment problems

I created a new page in wordpress with the following code:
div class="row"
div class="twelve columns"
h1 A Bunch /h1
/div
/div

When I open the page, the index page is aligned fine with the the twelve column header, but when I navigate to the link for this page, the heading appears justified all the way left, and only appears aligned properly if I resize the browser.

Why does it not seem to honor the foundation classes in the div tags, when header.php and index.php do?

How to add Header Image?

HI there.. love the theme.

Trying to replace the header image and description with a header image... Not sure how to go about this.

I wasn't sure if this was the peice of code I should be looking at in header.php:

<title></title>

Missing form.css style declarations in foundation.css

Sorry to bring this up again, but in the process of making a pull request to Foundation for the sidebar input width bug, I noticed your foundation.css is missing a style declaration that is present in forms.css that may solve the issue:

Line 35 of forms.css

    input.expand, textarea.expand { width: 100%; }

Line 41 of forms.css

    textarea.locked.expand  { max-width: 100%; }

I'm not sure if you left these out intentionally, but this gets rid of the bug in the Foundation framework demo (test.html, although I had to manually add the input field to the sidebar).

custom menu output by hCante causing error 500

just pulled version 3 and activated but its breaking wordpress with a 500 error. i pinned it down to the custom output for menu at line #121 in functions. dont really have any idea further why.

im running on MAMP locally.

Foundation 3 released

Hi,

This is not really an issue, but foundation was updated to version 3 today, an update would be awesome!

Best Regards
Rasmus

Zurb Reveal jQuery fn

Here's some code I wrote to automatically turn any Wordpress generated thumbnail into a modal Reveal from Foundation's reveal plugin:

        jQuery(function($) {
            $(".size-thumbnail").each(function(index){
                var html;
                var parent = $(this).parent();
                html = "<div id='reveal-"+index+"' class='reveal-modal'>";
                html +="<img src='"+parent.attr('href')+"' />"
                html += "</div>";
                parent.attr("data-reveal-id","reveal-"+index);
                $("body").append(html);
            });
        });

I put it in footer.php

archive.php not working

archive.php not working and hopefully we can improve the template.

Thanks

using SASS?

Ive used SCSS and SASS a bit in the past, so without going into it to much, is anyone using this with the new SASS feature? and what would i need to get started? could be as simple as using the SASS plugin, then using Foundations pure SASS file?

Drop down menu

Multi-level menus do not function as expected. Secondary levels are not hidden.

Logo not displaying on Android?

I am building a site using Reverie and really like the theme, but I have one issue - for some reason, the logo image doesn't show up on my Android phone... no problems with browser, even at narrow widths, but on Android, while the spacing is there and the link is there, the img doesn't display. I have tried z-index in the css but to no avail.

http://kralrealestate.com

mobile-load.png

This is not working?

I can't find the mobile-load.png?

Thanks

Is reverie dead?

I don't know about Reverie status? The author not answer any questions

IE Sidebar

The sidebar is falling below the content in pre v9 Internet Explorer

jQuery question

Just wondering something about jQuery.

There's a link to the Google version, and a local fallback version. It's also included in the Foundation framework in foundation.js.
Also, jQuery version 1.7.1 is included in WordPress.

I've done some testing and removed the Google CDN and local fallback versions, leaving only the one in foundation.js (and of course the one included with WP), and it seems to work just fine.

Do you know of any issues with this scenario?

header.php order of CSS

Hey Zhen.

Saw this in header.php file of Reverie

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

<!-- Included Foundation CSS Files -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/foundation.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/app.css">

Wondering if that should be like below instead

<!-- Included Foundation CSS Files -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/foundation.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/app.css">

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

HTH TIA

Image folder and CSS folder redirect like roots

I much prefer zurb over bootstrap but really like the functionalities of roots. I was wondering if it's possible to create the folder rewrite akin to that of roots.

description_walker() not closing dd correctly

Seems there's an issue w/ extending Walker_Nav_Menu. Here's a sample output with the current function from Reverie (functions.php)

<dl class="nav hide-on-phones"><dt>Nav:</dt><dd id="menu-item-9087" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="/">Home</a></li>
</dl>

Notice, </li> which should be </dd> instead.

Thanks.

Responsive Buttons

Hi Guys,

First off...great framework. First time using it, but loving it already.

I did find 1 problem though. To be honest I am lazy, as most programmers are, and didn't read the documentation so I don't know if this is the kind of behavior you actually wanted.

A button element is responsive until I add a class of .small, .medium, or .large. Once this is added it seems as if, at least in Firefox, the width:auto rule kept the button the same.

I was able to remedy this by simply adding the following:
button.small.button, button.medium.button, button.large.button { width: 100%; }

This was added to:
media only screen and (max-width: 767px)

Thanks and keep up the good work.

Scroll stuck on Android 2.3.6 browser

Great work on this!

One small issue, on the default zoom level, the page loads, but the scroll function doesn't work,

it only works when i zoom into(+) a level,

h1 tags

i noticed all page / post titles are wrapped in h1 tags, however only one h1 tag is supposed to appear on a page for validation reasons etc, as the site title is already a h1 which is right, might i suggest changing post/page titles to h2 which is less strict.