Hi there, Im a bit baffled by the documentation, maybe this isn't my solution. Im used to working with uikit and placing grids within pages in Joomla. I was hoping to recreate this with Wordpress, but finding that the text editor strips out the grid code on saving. Also, there was a list of items that Beans included on every page, such as grid, buttons, panel etc. How to access those? I assumed they would be options when creating a page. Wrong? Thanks for your work!
What do you mean by list of items that beans includes on every page?
Beans can individually load Components or Add-ons from UiKit. For instance the Overlay component isn't enabled by default so you have to call it in the relevant page template or functions.php.
If you want to add stuff other than content, such as buttons, you need to do it with custom fields.
Hi Olaf, Thanks for responding. Here is where I got the list of "UIkit components are included by default on every page" link From what I understand you said, I cannot create grids or buttons within the content area, without custom fields which you need to set up in the functions.php file of the child theme. Is this correct? Thanks.
No, I guess I misunderstood.
So, what the documentation says is that the CSS of all those elements are included on every Beans page by default. There are extra components that are not included that you might have to call if needed.
You can create grids and buttons on any page, but it is not in the WP backend like a visual page builder.
If you put for instance:
<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>In a template file or in a page/post (in HTML view) it should show up on your page.
Beans is a developer friendly framework, and you need a certain degree of experience with WP and PHP to get it. I'm having issues too.
Thanks Olaf. I can get the buttons to render, however when I put this grid code in
Item
Item
Item
the editor strips out the grid div, and it becomes this:
Item
Item
Item
which means there is no grid layout or styling association with it. Suggestions? Thanks so much for your patience!
Am I missing a crucial setting in Wordpress? I can't get anything to render, because the html keeps getting stripped out. Thanks.
DId you wrap the grid items with a container element with the .uk-grid class ?
I used to work with Joomla and I guess you're trying to put HTML within the wysiwyg editor of a page, that's unfortunately not good practice in WP as it "cleans up" HTML tags.
You should put HTML on a template PHP file, be it page.php with a conditional for displaying only on the page you want, or making a copy of that page and renaming it to something appropriate (following these guidelines https://developer.wordpress.org/themes/basics/template-hierarchy/), there are many ways to do this. Just don't put HTML code directly in a page wysiwyg editor, it will almost never remain untouched by WP.
Okay, thanks so much Stefano.
but finding that the text editor strips out the grid code on saving.
I think the "Don't Muck My Markup" plugin will help you.
Thanks Omar. Do you know if it works with the Beans Theme? I'll give it a try anyway.
Hi Stafano,
While there is various ways to allow HTML in WordPress editor, I strongly suggest to avoid building your page layouts in the editor which doesn't belong there, defeat the purpose of templates and CMS, doesn't make it re-usable, makes hard for you and others to maintain the content (especially for those without HTML knowldeges), may cause security issues etc etc etc.
Instead, I would advise to build page templates and custom fields if need be. This is a bit too long to explain in details and take some learning but I would strongly advise to look at some of the ressources here. Alexandra's uses this method extentively for her client websites and does some pretty cool stuff using Carbon Fields so I would advise you to check her bitbuckets repositories.
Have fun,