Struggling to get started

Ryk Melck

Hi! I'm new to Beans and really struggling to get started.

I've gone through quite a few Tutorials and as newbie I feel lost. I've always relied on Themes from themforest ect. and really want to migrate my site on the beans framework.

I've installed the Beans Framework and the Beans-child-theme on my site. Here is my dilema. When I try to implement any of the components onto a page it just does not work as it should.

I’m taking code examples from Ulkit in the documentation section. When I copy say the Accordion component and copy their markup and on my page, it does not behave like an accordion. It’s static text on my page. Somehow it’s not picking up the code or I’m not pasting extra code into the function or css or less files.

Thanks, any help will be valued.

Nick van der Burg

Hi Ryk,

Could you perphaps give an example of how you implement the code examples? That would help finding out what the exact problem is, and why it's not working for you.

Regards,

Nick

Ryk Melck

Hi Nick,

I took this this snippit of code as an example and added it to a page. 

<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

This is what I get when it's inserted onto my page.

  • Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Item 2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
  • Item 3 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

The following codes are in my child theme.

Style.css:

/*
Theme Name: Beans child
Description: Starter Child Theme for the Beans Theme.
Author: Beans
Author URI: http://www.getbeans.io
Template: tm-beans
Version: 1.0.0
Text Domain: tm-beans
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Style.less

/*
 * In this file, you may style your site using CSS or LESS as well as overwrite UIkit LESS variables.
 * Make sure to enable development mode via the Admin->Appearance->Settings option while working on your website. LESS will then be processed on the fly.
 */

Functions.php

<?php

// Include Beans. Do not remove the line below.
require_once( get_template_directory() . '/lib/init.php' );

/*
 * Remove this action and callback function if you do not whish to use LESS to style your site or overwrite UIkit variables.
 * If you are using LESS, make sure to enable development mode via the Admin->Appearance->Settings option. LESS will then be processed on the fly.
 */
add_action( 'beans_uikit_enqueue_scripts', 'beans_child_enqueue_uikit_assets' );

function beans_child_enqueue_uikit_assets() {

    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

// Remove this action and callback function if you are not adding CSS in the style.css file.
add_action( 'wp_enqueue_scripts', 'beans_child_enqueue_assets' );

function beans_child_enqueue_assets() {

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );

}

I even tried to put some css code to overwrite the font size of 14px and that was not taking effect. So I just removed it.

I even went into UIkit - Customizer, dowloaded the .css, pasted the css into the style.css. No changes took effect.

Hope I'm explaing my self correctly.

Thanks

Nick van der Burg

Hi Ryk,

I see you're using the UIkit V3 documentation for the snippet. Right now beans uses UIkit V2. You can find V2 here. All you need to know about UIkit V2 can be found under Core and Components.

it's best to replace the snippet with the snippet below so it complies with V2.

<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">Item 1</h3>
    <div class="uk-accordion-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

    <h3 class="uk-accordion-title">Item 2</h3>
    <div class="uk-accordion-content">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</div>

    <h3 class="uk-accordion-title">Item 3</h3>
    <div class="uk-accordion-content">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</div>

</div>

I believe the accordion will not show as expected, because the specific component is not enqueued to the uikit compiler. Try to add the component using the following snippet.

beans_uikit_enqueue_components( array( 'accordion' ) );

Place this snippet in your beans_child_enqueue_uikit_assets() function.

Hope this solves your issue!

Regards,

Nick

Ryk Melck

Thanks Nick!

I'll take a look now!

Nick van der Burg

Hi Ryk,

You place the snippet in the function that also enqueues your style.less file.

function beans_child_enqueue_uikit_assets() {

    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

the function above is where you place it, I usually put it before the beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );, but anywhere within that specific function is fine.

Ryk Melck

Hi Nick,

This code snippet is allready in the functions php

function beans_child_enqueue_uikit_assets() {

    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

If you take a look above these post you will find the Functions.php code I posted.

Nick van der Burg

Hi Ryk,

That function will look like this if you add my snippet to it:

function beans_child_enqueue_uikit_assets() {

    beans_uikit_enqueue_components( array( 'accordion' ) );

    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

it's pretty standard to enqueue all things uikit within the same function, so you only have to pass it to the action hook once.

edit:

There is a small addition that needs to be added to the beans_uikit_enqueue_components() function. As it is now it won't work as the accordion is seen as an add-on.

function beans_child_enqueue_uikit_assets() {

    beans_uikit_enqueue_components( array('accordion'), 'add-ons'  );

    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

This is the correct way to enqueue the accordion component. I tested it and it works as it should.

Regards,

Nick

Ryk Melck

Thanks Nick! The last addition did the job.

If I use another addon, How do I add to the code. Do i just add a new line of code below the existing addon. Now the fun and learning begins.

Are you working on your site? I can't seem to access certan links on your website. eg. Homepage

Nick van der Burg

Hi Ryk,

Nice to hear you got it working!

if you want to add several add-on components, all you need to do is add strings to the array. Something like this:

beans_uikit_enqueue_components( array('accordion', 'slideshow'), 'add-ons'  );

I believe beans sees all the components under "components" on the UIkit V2 doc site as add-ons. Everything under core can be added the same way as add-ons with a slight difference, just add a new line of code and omit the add-ons part from the function call. It might look like this:

beans_uikit_enqueue_components( array( 'toggle', 'overlay', 'smoot-scroll' ) );

Now I don't know what website you're referring to as my site. If you mean getbeans.io I wouldn't know about it. I seem to be getting a blank page for it as well. Now if you are interested in sites I'm currently working on, I'd be happy to tell you which ones those are.

If you have any further trouble don't hesitate to ask.

Regards,

Nick

Ryk Melck

It was your getbeans.io site. It tells me your site can't be reached.

Nick van der Burg

I'm afraid that getbeans.io is not mine. Thierry is the owner and creator of getbeans.io. Maybe you could try to get in touch with him about the issue.

Regards,

Nick

Ryk Melck

Oh! I assumed when I created an account on the community tab on getbean.io that this was your site too.

Have you got some example sites that I could look at.

I'm trying to figure out how to divide a page into colums and rows. (not Sidebars)

(1/3 +1/3+1/3) or (1/2 +1/2) etc. Then add a line break to insert a different column eg. 1/1

I want to avoid page builders as much as possible.

Nick van der Burg

No, I'm just someone who is part of the community as well ;).

As for the sites, as of now I have 1 that does use multiple columns for the home/post page. I'm using a template file within my child theme that edits the html in such a way that the columns are created.

julestrum.nl

You can check out the source code of the site using the inspector of your browser. This theme was specificaly developed for 1 person, so there are a lot of specific additions that only apply to this specific client.

In addition to the actual website here is a link to a download of the source code. I encourage you to also check out the themes on getbeans.io once it's available again.

Breaking up pages into columns dynamically using the standard wordpress editor requires much more than I can provide. Perhaps someone else within the community can help you with that particular issue.

Regards,

Nick

Ryk Melck

I will definately explore more!

One more thing regarding the custom css. Where do I add the css that I dowload from the uIkit customizer.

The customizer has both a 'get css' (style.css) or 'get less' (style.less). When I tried to add the css the other day no changes where taking effect.

Nick van der Burg

your child theme actually uses style.less as a fragment to the uikit compiler. Meaning you could use style.less as your main style file.

My personal preference goes towards less files as it has a lot of nifty tricks to make life easy creating styles. if you upload the style.less file to your root child theme directory, the compiler should pick it up. I do recommend going to Appearance > settings in your wordpress admin dashboard and enable development mode. This setting forces the compiler to recreate all styles on every page load/reload. If you don't Beans won't be able to pick up changes you make to the css/less files as it caches them for faster load times.

When you're done creating your theme you can disable development mode and check the compile all css and js checboxes for even faster load times.

Ryk Melck

Thanks for the tip Nick. Really appreciate the help.

Will most likley call out for assistance again.

Ryk Melck

Sorry to come back! Adding the less updates does not change. I upate the page, preview it and still rmeains the default 14px font.

This is the code that is added to my child theme .less 

/*
 * In this file, you may style your site using CSS or LESS as well as overwrite UIkit LESS variables.
 * Make sure to enable development mode via the Admin->Appearance->Settings option while working on your website. LESS will then be processed on the fly.
 */

 /* theme: Almost Flat */

//
// Typography
//

@global-font-size: 17px;
@global-line-height: 22px;

//
// Article
//

@article-title-font-weight: normal;
@article-lead-font-weight: normal;

//
// Badge
//

@badge-font-weight: normal;

//
// Base
//

@base-body-font-weight: normal;
@base-code-font-family: Consolas, monospace, serif;
@base-heading-font-weight: normal;

Update: Once I deactivate development mode. The changes take effect. I thought I would see the changes on the fly.

Nick van der Burg

Hi Ryk,

Reviewing some of the snippets you use in your functions.php file I think I found the problem.

function beans_child_enqueue_uikit_assets() {

    beans_uikit_enqueue_components( array('accordion'), 'add-ons'  );

    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

in the beans_compiler_add_fragment function there is a function call to get the stylesheet directory uri, I don't know the specifics, but I do know this won't work with either Beans, Wordpress, or PHP itself to find certain files in the theme folder structure. The snippet should be changed to:

function beans_child_enqueue_uikit_assets() {

    beans_uikit_enqueue_components( array('accordion'), 'add-ons'  );

    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory() . '/style.less', 'less' );

}

It's a small change that is easily overlooked, let me know if it works!

Regards,

Nick

Ryk Melck

The snippets of code you see are the defaults when installing the theme. I did not adjust anything there.

Write a reply

Login or register to write a reply, it's free!