getbeans/beans

Beans WordPress Theme Framework. The default branch is set to development, please switch to the master branch for production.

beans's Issues

Change `tm-beans` to `beans

In versions < 2.0, Beans' child themes set the Template (parent theme) as tm-beans. Within Beans, the text domain is set to tm-beans. The proposal is to change these to beans for naming consistency.

This change will also draw a line in the sand to differentiate an installation:

1. of tm-beans as version 1.x.x (which is PHP 5.2.x)
2. and beans as version 2.x.x (which is PHP 5.6)

"Undefined variable" message after activation

Thanks for this very nice project !

I have this error message once the theme activated, just above the navigation, in the header

Notice: Undefined variable: link_attr in /Applications/MAMP/htdocs/mywebsite/wp-content/themes/Beans-master/lib/render/walker.php on line 118

Customizing Preview Tools

Hey

I noticed there is a section in the Customizer called preview tools.
Since WordPress 4.4 added the Desktop - Tablet and mobile view ports into the Customizer there is probably no need to have the Preview Tools there any longer.

CSS minify when Compiling all assets into one file

Hi Beans,
There is some options to compress the CSS to?
Thanks, Gabor
p.s.: beans is awesome

Wrong image path in Multisite Post Options metabox

It looks like this:

http://beans-multisite.dev/site/wp-content/themes/tm-beans/lib/admin/assets/images/layouts/c.png
http://beans-multisite.dev/site/wp-content/themes/tm-beans/lib/admin/assets/images/layouts/cs.png
http://beans-multisite.dev/site/wp-content/themes/tm-beans/lib/admin/assets/images/layouts/sc.png
http://beans-multisite.dev/site/wp-content/themes/tm-beans/lib/admin/assets/images/layouts/css.png
http://beans-multisite.dev/site/wp-content/themes/tm-beans/lib/admin/assets/images/layouts/ssc.png
http://beans-multisite.dev/site/wp-content/themes/tm-beans/lib/admin/assets/images/layouts/scs.png

Beans Layout Grid Settings: Allow Prefix configuration

Currently we can change the Beans layout grid using the following code snippet:

beans_add_smart_action( 'beans_layout_grid_settings', 'beans_child_layout_grid_settings' );
function beans_child_layout_grid_settings( $layouts ) {

    return array_merge( $layouts, array(
        'grid' => 10,
        'sidebar_primary' => 3,
        'sidebar_secondary' => 3,
    ) );
}

However the prefix for the grid is always uk-width-medium

It will be great if this prefix can also be configured, so that we can change it to say uk-width-large. This will be useful for themes which want to hide the sidebar on device-width smaller than 960px.

For e,g in theme for http://superdevresources.com/, I am manually doing the following to achieve this:

if(beans_get_layout( ) != 'c') {
    beans_remove_attribute( 'beans_primary', 'class', 'uk-width-medium-7-10' );
    beans_add_attribute( 'beans_primary', 'class', 'uk-width-large-7-10' );
    beans_remove_attribute( 'beans_sidebar_primary', 'class', 'uk-width-medium-3-10' );
    beans_add_attribute( 'beans_sidebar_primary', 'class', 'uk-width-large-3-10 uk-visible-large' );
}

Currently it works as the layout is either c_sp or c. But if the layout is changed to something else say c_sp_ss then I will have to add extra checks and hence the code is not very maintainable in the long run.

It will be much better to simply be able to specify uk-width-large as a param in beans_layout_grid_settings. Something like below:

beans_add_smart_action( 'beans_layout_grid_settings', 'beans_child_layout_grid_settings' );
function beans_child_layout_grid_settings( $layouts ) {

    return array_merge( $layouts, array(
        'grid' => 10,
        'sidebar_primary' => 3,
        'sidebar_secondary' => 3,
        'prefix' => 'uk-width-large',
    ) );
}

Uikit 3

Hello
Please update the theme to uikit 3.
Thank you.

Reopened issue 36 - long titles

I reopened issue #36 that was earlier fixed.

The issue is back again. Heading 1 and 2 that goes into two lines crash into each other. I added information to the above closed issue.

Upgrade to PHP 5.6 as minimum

Beans is currently compliant with PHP 5.2. As part of v2, we'll leap Beans forward to make it compliant with PHP 5.6 as a minimum, baseline PHP requirement.

Post gallery: Link to media file not working

In the gallery settings, the link to the media file option is not working.

Object of class WP_Error

Hi there,

Latest WP and upon activation of WPML I get the msg:

Notice: Object of class WP_Error could not be converted to int in ~/Projects/wordpress/wp-includes/nav-menu.php on line 366

Deactivating WPML no luck. Changing theme all good.

Any idea?

Thank you
Alex

Editor style - a long h1 title

Hi Thierry

Creating an h1 in the content creation of a post for instance. Having the title so long that it also goes to the second line makes the second line crash into the first. This is a repeatable error.

Btw I would suggest looking at Twenty Sixteen editor style. It has nice space and in general just looks nice. Here is an example:

Consider Theme Toolkit

I've been working on Theme Toolkit, which is an external dependency which handles the logic (provides building blocks) for customising config-based themes.

It's relatively new but has been working well for a couple of themes. The bricks here should be applicable to all themes.

There is also a Genesis Theme Toolkit which extends or adds bricks specific to the Genesis Framework. Whilst that isn't going to be directly useful for Beans, it does show how it can be used to add Beans-specific adaptations that make using the Theme Toolkit easier.

The Generico theme by @craigsimps, as well as my own (non-public) starter theme use it.

The advantage of having a config-based theme, is simply to separate out data, from the logic that consumes that data, making edits easier for non-developers.

Code snippets for...

• Post articles
• Change the post meta information phrases (similar to Genesis). I notice the remove post meta is there.
• Menu. Conditional menu.
• Comments: Change phrases of commenting.
• Change copyright info on the bottom

Apperance -> Settings

Hey

Under Appearance there is a Settings section for Beans. What about writing Beans Settings if space for it instead of settings? Or perhaps even move Bean Settings to Settings -> Beans?

Include a starter child theme

In the download. Include a basic starter child theme.

Edit.
Ahhh there it is hidden inside the docs What about including a text link below the green download button that says download child theme?

Remove query strings

I tested my site with gtmetrix, I've got an 'F' grade :
"Resources with a "?" in the URL are not cached by some proxy caching servers. "

How do I remove it in Beans ?

Post options - Layout

Hey

In the Layout:
Radio button and the text Use Default. What about turning Use Default into a customizer site layout link? So instead of hesitating how to get to global default there is a direct link to it.

Conditionnally change layout

Hello,

I'd like to conditionally change the layout of some BuddyPress template page. If we are on a single group page, for instance, I want a fullwidth layout.

So, I've tried things like this

add_filter( 'beans_layout', 'beans_child_bp_force_layout' );

function beans_child_bp_force_layout( $opt ) {
if ( bp_is_group_single() ) {
    $opt = 'c'; 
    return $opt;

    } 

}

But with no success. It changes the layout of the whole site.
Maybe my approach is a little bit naïve. Is there a solution ?

Mat

PS : I know that you can change the layout on a page-template basis, but this solution is not possible in BuddyPress (as far as I know). Plus, I think it's quite convenient to be able to change the layout of some sections of a website directly, in one place (functions.php, ideally), by adding some conditionnal tags to this snippet (http://www.getbeans.io/code-snippets/force-a-layout/).

Make Beans Framework Agnostic

Our core philosophy is to empower web developers by creating an environment where they can rapidly develop and have seamless branding and user experiences.

Right now, UIKit is deeply integrated into Beans. We will want to pull it out of the framework, thereby allowing a developer to pick and choose what UI framework s/he wants including rolling his/her own.

As part of this task, we'll need to decide whether to make UIKit a separate plugin or package it with Beans. Either way, we'll provide the means via configuration for a developer to turn it on.

I am very intrigued...

Hey Thierry

I came across the mention of your framework through WPMayors newsletter that lead me to http://wplift.com/beans-wordpress-theme-framework and the article intrigued. As well as your web site.

I use Genesis today. Some of the things I like with Genesis are:

• It is easy to change stuff through code snippets. Be it the comment phrases, meta etc..
• A lot of tutorials to find. I have also made a few. http://easywebdesigntutorials.com/Articles/wordpress/wordpress-themes/themes/
  Tutorials such as: Adding breadcrumbs, adding widgets, creating a home page layout with widgets, back to top button, meta customization.

Some ideas:

• Here is a demo of a child theme made for Genesis:
  https://secure.autopilotyourbusiness.com/genesischild/
  The purpose here is to visually show widget areas for the child theme.
• Adding some screenshots to your docs will help.

Part 2.
I will download and do an initial test....
First thought where is the child theme which I found later inside the docs. I then installed both and activated the child theme. It seems like a good basic theme to start with. It would also be nice to add a customized child theme that includes custom CSS and a few more widgets. Perhaps something similar to the Genesis child them I linked to above. As one can have the bare bones basic theme and one with more information included.

Bare bones theme info. Then a custom theme info which could include these features: Multiple widget areas (top left and top right header, hero, home page widgets, after entry, footer header, etc), back to top button, a custom page menu (a conditional menu), a sticky header.

Part 3.
Test continues...
I added your sample hero widget area. I miss having a visual guide to the hook names.
I guessed and added an after markup widget area as well that showed up. I also tried adding a before header widget area did not show up.
I checked inspect element in Chrome and noticed the prefixes of tm and uk which made me wonder if your located in the UK because of the prefix. I do not know why the tm and uk prefixes though...

Internationalization - Create and Standardize

Create an internationalization project to collect and standardize translations of Beans. Consider a tool like GlotPress or other.

Change LESS Compiler

Change the LESS compiler to use JS lib.

Post gallery: images not resized using the Image API

I tested changing the gallery image size from medium, thumbnail, etc but all of them output the full image (in this case 2048). When set to the thumbnail option, the width and height attributes are added to the image, but the image used is still the original. I initially thought this was because I had no defaults set in the media settings (to prevent WP from creating additional images), but I tested setting the media defaults in the settings, recreated the gallery and the result was the same. The only difference is the width from the settings was used.

Editing forum post resets back to General forum

Hey

As I edit my post in the Support forum it automatically jumps back to General.
So I have had to a few times edit my post again to switch it back to the correct forum.

is this a starter theme, with no styles?

is this a starter theme like _s, wth no styles included? I installed it but no styles are applied.....but on the official site it is mentioned that UI kit is included.....

Integrate a Sass Compiler

I'm a Sass gal. Bringing Sass compilation to Beans is a leap forward for flexibility and developer personal preference. UIKit 3 also brings us Sass.

Currently, Beans has integrated LESS compilation. Let's give developers a choice of LESS or Sass by integrating a Sass compiler.

Rework to be WPCS compliant.

Rework the codebase to comply with WPCS. At a minimum it should comply with WordPress-Extra standards setup and Travis.

Preview Tools not need anymore

Hello, thanks for the beans theme. i am so happy with it. i think "Preview Tools" in customizer not need anymore. because wordpress added responsive checking button at bottom.

Add unit tests

1. Create tests for the codebase.
2. Integrate CI with Travis.
3. Add badging.

Improve Bean's Web Accessibility Compliance

Make Beans web accessible to comply with WCAG 2.0 and WordPress' Theme Accessibility Standards.

• Skip links
• Controls
• ARIA

Head Cleanup

A standard task in themes is to remove the unnecessary bits from the <head>, such as:

• wp_generator
• adjacent_posts_rel_link_wp_head
• wlwmanifest_link
• wp_shortlink_wp_head
• If comments are disabled, then feed_links_extra.

I propose adding the cleanup task into the framework, lifting the burden from the child themes. To ensure it's configurable, we'll add the means to turn off head cleanup.

Consider Gulp WP Toolkit

Gulp WP Toolkit is something that @craigsimps and myself have been working on, as a way to have the logic for typical theme build processes in an external dependency.

Existing tasks can be adapted via config values, including adapting for a potentially different structure in the theme, and new tasks can be added locally to the theme.

One of the open tickets is to add in a Sass Compiler - adding Sass support is something Gulp WP Toolkit can already do - so pull in Gulp WP Toolkit, set the paths, and then run gulp build:css to compile the Sass, move it to the right place, handle sourcemaps, potentially RTL style sheets etc.

Inactive widgets area Inactive sidebar (Not used) repeated multiple times

Hey Thierry

I am noticing that the Inactive sidebar (Not used) is repeated multiple times.

I have tested 2 local sites and an online site and they all have the same issue.

I switched to Twenty Sixteen and the error went away.

I believe the cause of the errors is testing out creating widget sections and then jumping between various Beans child themes. It seems to mess up things.

In a site that had the errors. I removed the Not used widget sections. Logged out and then back in again. The not used sections went away. So my conclusion is then removing the various widget sections inside the not used sections then logging out and then back in again. (Actually I could just refresh the page after having deleted the widget sections and see the Not used sections go away.)

Define our coding standards

Create a set of coding standards to clearly communicate our code style for ourselves and anyone seeking to contribute to Beans.

How to add UIKit Element ? (tab)

Hello,
Thanks for your brilliant work! Beans is a very cool framework, I'm currently testing it.
I try to add a component of the UIKit in the theme : the tab component.
(http://getuikit.com/docs/tab.html)

So, in my functions.php, I have added theses lines of code in order to register this component and its dependancies

add_action( 'beans_uikit_enqueue_scripts', 'my_function_name' );
function my_function_name() {
    beans_uikit_enqueue_components( array( 'dropdown, toggle, switcher, tab' ) );
}

Then, in a post, I have added these HTML classes

<ul class="uk-tab" data-uk-tab>
    <li class="uk-active"><a href="">hhhh</a></li>
    <li><a href="">dfghjk</a></li>
    <li><a href="">oiuytr</a></li>
    <li class="uk-disabled"><a href="">hhhh</a></li>
</ul>

But it doesn't work, the tabs don't appear.
What did I miss ?

Thanks !

Auto update of copyright year

Hey Thierry

It would be good to have somekind (shortcode perhaps) to auto update copyright year.
So that one does not need to go back to every site and update year.

How to build theme standalone with child theme.

Hi @ThierryA ,

Could you create a guild for how to build standalone with beans. I used Runway frameword, it's has a future to help admin can extract theme standalone from current child theme.

Thanks so much.

The naming of CSS files

Hey

I noticed the naming of CSS classess have prefixes of uk and tm. Why so?

Theme check

Hey Thierry

I happen to come across this site and checked Beans:
http://themecheck.org/score/wordpress-theme-beans(1).html

Visual hook image?

Hey

It would be great if you add a visual hook image.

As I am working on adding various widget areas and need to know the name of where I can place each.

Edit. After some digging I found the Structure articles on Hooks.

REM-version: UIKit + Beans

Hi Thierry

I'd like to use Beans with (converted) rem-version of UIKit.
What is the best/cleanest strategy for overwriting of UIKit- and Beans-Styles?
Can i handle it complete in a child-theme, or is Beans modification unavoidable?

thanks
paul

Problem with js compiler

I add this function under child theme

add_action( 'wp_enqueue_scripts', 'compile_js' );

function compile_js() {
    beans_compile_js_fragments( 'js_compiler', ('/wp-content/themes/beans-child/custom.js') );
}

The problem is , the output has ; character in the beginning of the file. You can see it here

How do I get rid of it ?

Thanks

off-canvas menu

Hi Thierry

I have a quick support question about the off-canvas menu. When I click on the menu button nothing happens in my setup.
I did add my primary menu widget on the off-canvas menu area (Appearance > widgets), so it is not empty. I checked and it seems that the UIkit component is being loaded. Is there something I am missing for the off canvas menu to show?

Thank you in advance ;)

Custom Post Type archive is not included in Breadcrumbs

For a custom post type, the breadcrumb does not include it's archive page.
For e.g. I created a custom post type "WordPress Themes" and added a post called "Flipster" in it.
Now when I open the page Flipster the breadcrumb displays
Home > Flipster

Where as a better way to display the breadcrumb would be
Home > WordPress Themes > Flipster

Another problem is when I open the "WordPress Themes" archive page. I expect the breadcrumb to be
Home > WordPress Themes
but it is just
Home

I digged into the code and also looked into the Breadcrumb output done by Yoast SEO plugin (which produces breadcrumb including the custom post's archive)

A custom post type doesn't have the archive page set as it's parent and therefore it doesn't get included with current code. Moreover the custom post type's archive page is not handled in the current breadcrumb's logic therefore we get an empty breadcrumb (except Home).

Is there any easy way to override/insert Custom Post Type archive in the breadcrumb? If not then what is recommended approach to fix this issue?

404 page : breadcrumb error

I got this error message in 404 page :

Notice: Trying to get property of non-object in /../wp-content/themes/beans/lib/templates/fragments/breadcrumb.php on line 32

Add Configurable Filters

There are various features and components within the framework that loaded or registered as default. For these, hooking them into a filter event allows child themes or plugins to configure what is needed for the specific web page.

Philosophy: Register or load only what's needed for this specific web page. Provide the means for the child theme/plugin to specify what should be loaded.

For Example - Theme Supports

For example, Beans registers a set of default theme support features. Moving those into a configurable filter does the following:

1. Child themes can add additional theme supports via the hook.
2. Minimize or eliminate the need to remove_theme_support.

Sample Code

add_action( 'beans_init', 'beans_add_theme_support' );
/**
 * Add theme support.
 *
 * @ignore
 */
function beans_add_theme_support() {

	/**
	 * Configurable filter for adding theme supports.
	 * 
	 * An array of theme support features is passed to each of the registered callbacks,
	 * allowing each to extend or modify the features to be added via
	 * `add_theme_support`.
	 *
	 * @since 1.5.0
	 *
	 * @param array Array of theme supports
	 *              key: is the feature name
	 *              value: is the value for this feature. If none, set to `null`
	 */
	$theme_supports = apply_filters( 'beans_add_theme_supports', array(
		'title-tag'             => null,
		'custom-background'     => null,
		'menus'                 => null,
		'post-thumbnails'       => null,
		'automatic-feed-links'  => null,
		'html5'                 => array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ),
		'custom-header'         => array(
			'width'       => 2000,
			'height'      => 500,
			'flex-height' => true,
			'flex-width'  => true,
			'header-text' => false,
		),

		// Beans specific.
		'offcanvas-menu'        => null,
		'beans-default-styling' => null,
	) );

	foreach ( $theme_supports as $feature => $value ) {
		add_theme_support( $feature, $value );
	}

}

Licensing Issue for professional template

Hello,

i am a theme developer. i am selling my theme on themeforest. i want to move from others framework to beans theme and want to develop theme with beans. but there are a problem with license. you told it's free but there are not included any license reference such as GPL or MIT or something else.

if you want to give it free to us so can you add GPL license at top of all files? if you not add license i can't use it for professional theme.

example license:

/**
* @package   Beans
* @author    Beans http://www.getbeans.io/
* @copyright Copyright (C) Beans
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

Post gallery: no markup_id on the link and image

I'm guessing that was by design, but it would really help if we were able to target the links and images. Some examples include using UIkits lightbox on the Gallery and setting uk-border-rounded on the image.

Add License

There is no license such as GNU GENERAL PUBLIC LICENSE

Please add one