Beans API help

Hello Beans Team

Firstly thanks for making such a great, clean framework to build Wordpress websites on! Couple quick questions from a newbie to Beans, would be great if you could help:

1. How can I use Beans API to replace the defaut menu with one I have coded myself in Sublime Text using UI Kit?
2. How can I make this menu transparent, like you have on your homepage? - https://www.getbeans.io/ - except I want to use a Hero background image to overlap from my main content over the menu (rather than a background colour or gradient that could just be set on both menu and main content).
3. I have Visual Composer installed as I want to use that for simple pages. Will that cause any problems?
4. I've tried removing the primary sidebar on a Woocommerce single product page using:

remove_action( 'beans_primary_sidebar' );

It hasn't worked though, am I doing something wrong?

1. Linking to my question above, how would I remove an action on a specific page only

Sorry If I'm supposed to create multiple threads for multiple questions. Figured this was easier.

Thanks in advance!

Hello Mat,

First of all, make sure you are using a child theme of Beans. remove_action doesn't work, because you are calling it too early. Use Beans actions instead.

Linking to my question above, how would I remove an action on a specific page only?

Method 1 functions.php. Use WordPress functions is_* with conditionals.

// remove action only in pages.
if ( is_page() ) {
  beans_remove_action( $action_id ); // no extra parameters needed, just his ID.
}

Method 2 page.php. Create if it doesn't exist.

beans_remove_action( $action_id ); // no extra parameters needed, just his ID.

// After changes being made, always load document at the end of the file.
beans_load_document();

I've tried removing the primary sidebar on a Woocommerce single product page using:

You are targeting the wrong action. Even if you remove actions hooked to beans_primary_sidebar, the markup will be visible and the content will be 3/4 of width.

The best way is to tell Beans that this page has no sidebars. Put this code with conditionals..

functions.php

if ( is_product() ) {
  beans_add_filter( 'beans_layout', 'c' ); // 'c' means content only.
}

How can I make this menu transparent, like you have on your homepage? - https://www.getbeans.io/ - except I want to use a Hero background image to overlap from my main content over the menu (rather than a background colour or gradient that could just be set on both menu and main content).

As far as i know, the menu is transparent by default, but header markup has white background. You can modify it using .less files and create new CSS rules for class .tm-header or you can add inline styles in the header element using PHP.

functions.php

/*
 * Helper function to add inline styles.
 */
function my_inline_style( $styles = array ) {
  $sep = ':';
    $end = ';';
  $inline = array();
  foreach ( (array) $styles as $property => $value ) {
      $inline .= $property . $sep . $value . $end;
    }
    return $inline;
}

beans_add_attribute( 'beans_header', 'style', my_inline_style( array(
  'background' => 'linear-gradient(red, yellow)',
    // add other styles ...
) ) );

// priority must be higher than primary menu has, 100 looks fine.
add_action( 'beans_header', 'my_header_hero', 100 ); 
/**
 * Adding hero to header.
 */
function my_header_hero() {

    // Your hero template goes here.

    // You can use pure HTML if you want:
    ?>
     <!-- HTML -->
    <?php

}

Enjoy!

Hey Joseph - all looks really helpful, thank you for taking the time to answer my reply and share your skills!

One other quick question - I'm using Visual Composer with Beans. Does Visual Composer block UI KIt classes being used? Or will it cause any problems for me?

I ask because I'm sure when I'm using Raw HTML block things like Flex and Grid aren't working as they should, because they are being overriden by VC classes on the HTML block (maybe I don't know what I'm talking about!)

I am new to Web Development, I never used Visual Composer and i WILL NEVER use it.

VC comes with his own styles and all of them are prefixed with vc* just like UIKit is prefixed with uk-*, so propably there won't be any problem except one:

While VC will do his dirty job the UiKit will watch it, doing nothing ^-^

Hi Joseph

I tried this code:

if ( is_product() ) { beans_add_filter( 'beans_layout', 'c' ); // 'c' means content only. }

But it didn't do anything

Hello again,

According to WooComerce documentation:

is_product() – Returns true when viewing a single product.

According to Beans documentation:

beans_add_filter( 'beans_layout', 'c' ) - Returns only the content without sidebars.

I suggest you to copy/paste the code to the functions.php file.

if ( is_product() ) {
  beans_add_filter( 'beans_layout', 'c' );
}

Hi Joseph

I've added it to my functions.php file, unfortunately it's not working. The other code in my functions.php file works.