Hello, firstly I have to say, that I love Uikit, and I'm glad that there is framework like beans for WP, based on Uikit.
I wonder how can I alter header section for home page, and other pages. On front page I will have full-width slider with some captions and on other pages, I'll have one static image, lower than on home page.
I also want to pull main content up several pixels (inside uk-container), so it will be overlap on header image. I think that on home page it will be more pixels, than on other pages, so I need possibility to add extra classes only to homepage,
Could You help me with this? 🙂
Regards, Mariusz
Hey Mariusz,
Glad to have you onboard. Adding/modifying and removing things on the page is indeed possible with Beans as it was built for that specific purpose.
I would suggest to read the two following posts attentively as a lot was mentioned relating your request:
- https://community.getbeans.io/discussion/how-to-create-page-template/
- https://community.getbeans.io/discussion/how-do-i-build-a-page-structure/
Regarding adding/replacing or removing attributes, you can really easily do that using Beans HTML API.
To do so, you’ll need to first enable Beans development mode in your WordPress Admin->Appearance->Settings. Once the development mode is enabled, the Markup ID’s are output in a data-markup-id tag in the front-end. So if you inspect your page using your browser inspector, you will see that all modifiable markup have a data-markup-id. These are what you will use to modify your markup and attributes (and identify actions which is another topic covered in the discussions I provided you links for).
For example, let's say we want to add a class example-class to the header markup. So we inspect the page and see that the data-markup-id is beans_main. Great now we have everything we need to add our class using the following line in our child theme functions.php
beans_add_attribute( 'beans_main', 'class', 'example-class' );Awesome, the line above added our class. You mentioned that you wanted it only on the blog home page so for that we to do add our class conditionally and likely we can use WordPress Conditional Tags. One issue is that Conditional Tags are not available at our child theme functions.php level, so we have to wrap it in a wp action as mentioned in the WP documentation. So here is what the code look like:
add_action( 'wp', 'example_page_setup' );
function example_page_setup() {
// is_home() is used to check if we are on the blog home, use is_front_end() for website home page.
if ( is_home() ) {
beans_add_attribute( 'beans_main', 'class', 'example-class' );
}
}If you have a lot of modifications to do, it is good practice to avoid adding everything in your functions.php and rather structure it in template files. This article covers how to use page templates.
I would strongly suggest to read Beans documentation, check the code snippet and browse the forum as you will find a lot of answers and hopefully find Beans magic 🙂
Happy coding,
Powerful stuff! It started to look pretty cool, but I'm struggling with navbar, which i want to be inside slideshow. I added function to add slider inside header like this:
add_action( 'beans_header_prepend_markup', 'add_slider' );
function add_slider() {
?>
<div data-uk-slideshow="{autoplay:true}">
<ul class="uk-cover-background uk-slideshow">
<li><img src="wp-content/uploads/slide1.jpg" width="" height="" alt=""></li>
<li><img src="wp-content/uploads/slide2.jpg" width="" height="" alt=""></li>
</ul>
</div>
<?php
}but then I need to move beans_fixed_wrap[_header] to be inside "slideshow" div, not after it.
Using markup hooks i can only add code before, or after markup. Is there way to move things arround maybe with beans_open_markup and beans_close_markup somehow?
Or I have to remove markup with navbar and write my own?
I just found solution, which works for me. As always there is many ways to do this 🙂
Here's what I have:
// th-header contains static background for other pages, so i don't need it here
beans_remove_attribute( 'beans_header', 'class', 'tm-header');
//uk-position-cover class gives position absolute for element
beans_add_attribute( 'beans_header', 'class', 'uk-position-cover');
add_action( 'beans_header_before_markup', 'add_slider' );
function add_slider() {
?>
<ul>
<li><img src="img/slide1.jpg" width="" height="" alt=""></li>
<li><img src="img/slide2.jpg" width="" height="" alt=""></li>
</ul>
<?php
}
I also added in style.less:
html {
position: relative;
}
because (without it) absolute positioning move header section up, and it overlapping wpadminbar
PS. I tried to edit post few times, but after click Submit there is <... instead of preety code 🙂
Hey Mariusz,
Well done on getting control over Beans so quickly 🙂 I am not sure I understand the following:
I need to move
beans_fixed_wrap[_header]to be inside "slideshow" div, not after it.
I am happy to assist if you can give me a bit more details about that. Just a quick tip, you can combine remove and add attribute using beans_replace_attribute() function. So in your example you have:
beans_remove_attribute( 'beans_header', 'class', 'tm-header' );
beans_add_attribute( 'beans_header', 'class', 'uk-position-cover' );I can instead to the following:
beans_replace_attribute( 'beans_header', 'class', 'tm-header', 'uk-position-cover' );You can even replace all the markup classes without having to specify one as such:
beans_replace_attribute( 'beans_header', 'class', 'uk-position-cover' );Happy coding,
Hi Thierry, thanks for all your help 🙂
Here's wireframe of my project: https://wireframe.cc/JaaGht
First thing you'll see is full width slider. What i wanted to do is to move things around, by changing this piece of code:
<header class="tm-header uk-block" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader" data-markup-id="beans_header">
<div class="uk-container uk-container-center" data-markup-id="beans_fixed_wrap[_header]">
<nav class="tm-primary-menu uk-navbar" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" data-markup-id="beans_primary_menu">
(...)
</nav>
</div>
</header>to contain slideshow component, like that:
<header class="tm-header uk-block" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader" data-markup-id="beans_header">
<div data-uk-slideshow="{autoplay:true}">
<ul class="uk-cover-background uk-slideshow">
<li><img src="wp-content/uploads/slide1.jpg" width="" height="" alt=""></li>
<li><img src="wp-content/uploads/slide2.jpg" width="" height="" alt=""></li>
<div class="uk-container uk-container-center" data-markup-id="beans_fixed_wrap[_header]">
<nav class="tm-primary-menu uk-navbar" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" data-markup-id="beans_primary_menu">
(...)
</nav>
</div>
</ul>
</div>
</header>But i found that slideshow could be before header, so i end up only adding this:
beans_replace_attribute( 'beans_header', 'class', 'tm-header', 'uk-position-cover' );
add_action( 'beans_header_before_markup', 'add_slider' );
function add_slider() {
?>
<div data-uk-slideshow="{autoplay:true}">
<ul class="uk-slideshow">
<li><img src="img/slide1.jpg" width="" height="" alt=""></li>
<li><img src="img/slide2.jpg" width="" height="" alt=""></li>
</ul>
</div>
<?php
}Second thing I want to do is to has three parts of navbar: 1. Brand on the left, main menu on the center and social icons + 2 extra links for trasnlated version of site on the right.
I noticed, that you used other approach that there is on uikit documentation for branding, and it looks like this:
<div class="tm-site-branding uk-float-left uk-margin-small-top" data-markup-id="beans_site_branding">
<a href="#" rel="home" itemprop="headline" data-markup-id="beans_site_title_link">
<!-- open output: beans_site_title_text -->Brand<!-- close output: beans_site_title_text -->
</a>
</div>
<nav class="tm-primary-menu uk-float-right uk-navbar">
...
</nav>I consider to do this like described here: http://getuikit.com/docs/navbar.html
<nav class="uk-navbar">
<a class="uk-navbar-brand" href="#">
Brand
</a>
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
Social icons + Translation links
</ul>
</div>
<div class="uk-navbar-content uk-navbar-center">
<ul class="uk-navbar-nav">
Main menu (centered)
</ul>
</div>
</nav>I also considered to use uk-flex to even (balance) all components: logo, main menu and social menu, but for some reasons using uk-flex classes didn't work well.
Could you also help me with register second menu (for social links), so i can change them if needed in WP panel, without changing code?
One last question: how can i get excerpt for specific blog posts. I need to use them on homepage.
PS. for main content, which on my wireframe is overlaping to header section i just added negative margin to beans_fixed_wrap[_main]
I just found that i messed up with slideshow on home page, header section covers slideshow component, so if I add dotnav and slidenav, there are non-clickable 🙁
Which you will reccomend to have working slideshow component? Here's how saved html code from beans looks sofar: https://www.dropbox.com/s/c714t5pbhpmi0ov/header-problem.zip?dl=0
Small update: I found the way to add second menu, and i rearrange navbar section.
It works fine on other pages, but I still searching solution for slider on homepage, which wouldn't cover navbar.
here's how I added secondary menu and change structure:
functions.php
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'wbr-theme'),
'secondary' => __( 'Secondary Menu', 'wbr-theme' ),
) );
add_action( 'wp', 'setup_document' );
function setup_document() {
// move branding inside nav tag
beans_modify_action_hook( 'beans_site_branding', 'beans_primary_menu_prepend_markup' );
// remove float and add uk-navbar-brand class
beans_replace_attribute( 'beans_site_branding', 'class', 'uk-float-left uk-margin-small-top', 'uk-navbar-brand' );
//remove float from primary menu
beans_remove_attribute('beans_primary_menu', 'class', 'uk-float-right');
// add div before primary menu
beans_wrap_markup( 'beans_menu_navbar_primary', 'main-menu-centered', 'div', array( 'class' => 'uk-navbar-center' ) );
// Add secondary menu
add_action( 'main-menu-centered_before_markup', 'add_secondary_menu' );
function add_secondary_menu() {
wp_nav_menu( array(
'menu' => 'secondary menu',
'container' => 'div',
'container_class' => 'uk-navbar-flip uk-hidden-medium',
'theme_location' => 'secondary',
'beans_type' => 'navbar'
) );
}
}Another update 🙂
Slider on homepage works. Solution lays somewhere in beans_uikit_enqueue_components function. I just added another function for enqueue overlay: beans_uikit_enqueue_components( 'overlay' );
But i have no clue how to add many component right. I have to add contrast, flex, slideshow, sticky, overlay and parallax.
For now i have:
beans_uikit_enqueue_components( array( 'contrast', 'flex', 'slideshow', 'slideshow-fx', 'sticky', 'parallax' ), 'add-ons' );
beans_uikit_enqueue_components( 'overlay' );But i'm not sure if beans loads everything I need. I also noticed, that flex loads few times. Here's printed components:
Array
(
[components] => Array
(
[core] => Array
(
[0] => base
[1] => block
[2] => grid
[3] => article
[4] => comment
[5] => panel
[6] => nav
[7] => navbar
[8] => subnav
[9] => table
[10] => breadcrumb
[11] => pagination
[12] => list
[13] => form
[14] => button
[15] => badge
[16] => alert
[17] => dropdown
[18] => offcanvas
[19] => text
[20] => utility
[21] => icon
[22] => animation
[23] => flex
[24] => flex
[25] => overlay
[26] => flex
)
[add-ons] => Array
(
[0] => dotnav
[1] => slidenav
[2] => contrast
[3] => flex
[4] => slideshow
[5] => slideshow-fx
[6] => sticky
[7] => parallax
)
)
)My question is: how load multiple components properly with necessary addons? Is there a list for all components? I searched forum and I found note about "slideshow-fx". Are there other components that needs *-fx suffix?
Hey Mariusz,
Sorry for the late reply, I am re-locating back to Switzerland so this week as been crazy. I see that you are getting there 🙂
Regarding UIkit components, don't worry if you see duplicate components in the list, it will only load once. When it comes to which component loads, here are the components loading by default. Then when you load other components, Beans will automatically load the dependencies to make it easier for you, for example if you load slideshow it will automatically load slidenav. slideshow-fx is only for special animations so Beans doesn't automatically load it to avoid unecessary page weigth, which is why you have to add it yourself.
It is pretty straight forward, just enqueue the components you need and don't worry if they are duplicated in the list 🙂
Just a quick note, all your stuff in setup_document don't need to be in a wp action callback. You only need to do that if you use Conditional Tags.
Hope that helps,
Thanks a lot 🙂 but I still don't know how to load multiple components. For instance, for overlay it started to work when i wrote separated line beans_uikit_enqueue_components( 'overlay' );
Do I have to write separated lines for every component + addons if needed, or there is efficient way to load many components in one, or two line like this:
beans_uikit_enqueue_components( array( 'contrast', 'flex', 'slideshow', 'slideshow-fx', 'sticky', 'parallax', 'overlay' ), 'add-ons' );
Which didn't load overlay component (last item), only js for overlay.
Good luck with relocation 🙂
Hi Mariusz,
The way you are adding it above is correct but you must keep in mine that there are two types of components which are Core and Add-ons (more info in this article).
When enqueuing a component from the Add-ons, you have to add the add-ons second parameter to the beans_uikit_enqueue_components() function. For the Core and Add-ons components, you are not obligated to add the parameter as it is core by default.
Does that make sense?
I think so.
If i want to load many components i have to check if they are in core or in add-ons (called components in UIkit docs). Then i use two functions like this:
// core components
beans_uikit_enqueue_components( array( 'flex, overlay, contrast, ' ) );
// add-ons
beans_uikit_enqueue_components( array( 'slideshow, slideshow-fx, sticky, parallax ' ), 'add-ons' );Is that correct?
Yes that is absolutely correct!
Thank You very much 🙂
I tried that, but for some reasons slideshow didn't work properly, so i added it to first line enqueue (for core) and second one (for addons), like this:
// add UIkit core components
beans_uikit_enqueue_components( array( 'contrast', 'flex', 'overlay', 'slideshow' ) );
// add UIkit extra components
beans_uikit_enqueue_components( array( 'sticky', 'slideshow', 'slideshow-fx', 'parallax' ), 'add-ons' );
and it works, but... i'm confused 😉 slideshow belongs to "addons" not for core.
Second thing i noticed is that components only loads when every entry is surrounded by parenthesis separately, like this:
('contrast', 'flex', 'overlay', 'slideshow')
this notation (comes from article you linked) is not working: ('contrast, flex, overlay, slideshow')
Hey Mariusz,
The reason it still works if because you aslo have slideshow in the add-ons list. So the one in your core list is not doing anything, but because you added it in the add-ons list (which is the correct way) it works 😉
Regarding parenthesis, I am not sure what your mean there. The list of components must be an array() which is maybe what you mean.
Thanks,