Just curious, something that appears to be missing is the "skip to main content link". Which is a bit of a bummer. Is this by design, or something in the queue?
I don't know why is it missing. Maybe because it is not that important and necessary to have it on the parent theme as it is just a one line of code and anyone with simple php and html knowledge can do this.
If you are looking for the code -
//add the id of the tag like #id in href attribute
<a href="" >Skip to top</a>Thank you!
I presume I should be able to put that in the child theme functions.php, but how do I make sure it arrives at the location within the generated markup so that it's compliant with Accessibility? I think I need to hook into function beans_header_template() { with beans_add_action?
add_action( 'the_markup_id', 'hyperindian_skip_to_content' );
function hyperindian_skip_to_content() {
?>
//your code goes here
<?php
}the markup id depends upon where you want to put the link.
Hi J.C. I am not sure I understand a 100% what you are after. Do you just want to add an anchor link? If yes, where to you want to add the link and to which markup is the anchor?
Thanks,
Eh, how to best explain.
I originally was looking for a way to insert a "back to top" link, after seeing that UIKit has a SmoothScroll component. While running a test (which ended massively badly) through an automated test I noticed that out of the box beans scores pretty damn high for accessibility - except for a "skip to main content" link within the markup (keep in mind, the regular user doesn't see this, unless it uses special reader software).
I know, it was late. Somehow I saw "top" here, then there, and I ended up on the forum again 🙂
Anyhow, to not confuse the topic, the aim is to provide the child theme with such Acessibility "skip to main content" markup similar to bootstrap. Maybe that's more clear?
Thanks for clarifying, that makes more sense. I have made a note of it in the feature requests so it might well be added in Beans Core in the next stable version.
Regarding adding a link to scroll back to top, here is the code snippet you may add to your child theme functions.php:
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
function example_enqueue_uikit_assets() {
beans_uikit_enqueue_components( array( 'smooth-scroll' ) );
beans_compiler_add_fragment( 'uikit', get_stylesheet_directory() . '/style.less', 'less' );
}
// Add scroll to top id anchor.
beans_add_attribute( 'beans_body', 'id', 'example-top' );
// Add scroll to top button.
add_action( 'beans_body_after_markup', 'example_scroll_to_top' );
function example_scroll_to_top() {
?><a class="example-top uk-button" href="#example-top" title="Scroll to top" data-uk-smooth-scroll><i class="uk-icon-arrow-up"></i></a><?php
}Then you may add the following in your child theme style.less:
.example-top {
position: fixed;
bottom: 10px;
right: 10px;
}Happy coding,
Just to be sure ..
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
function example_enqueue_uikit_assets() {
beans_uikit_enqueue_components( array( 'smooth-scroll' ) );
beans_compiler_add_fragment( 'uikit', get_stylesheet_directory() . '/style.less', 'less' );
}
// Add scroll to top id anchor.
beans_add_attribute( 'beans_body', 'id', 'example-top' );If I add this to the child theme functions.php, I could also use a link within a widget or footer to use the smooth scroll to top function? For example:
<a class="example-top uk-button" href="#example-top" title="Scroll to top" data-uk-smooth-scroll><i class="uk-icon-arrow-up"></i></a>Correct? The same way, this could be used for in-content navigation for long text articles, I think. Hmm.
Correct J.C. using the #example-top link will scroll to the top of the page no matter where you add the link.
Bear in mind that you might want to remove the example-top class from the link if you place it somewhere else since that class is used to absolutely position it.
Cheers,
Yes, I've been using a temporary child theme name for those things. I'm not sure if it is a best practice.
So for example example_enqueue_uikit_assets on this end is medk_enqueue_uikit_assets
Along the same way, example-top became medk-top.
That said, I haven't gotten it to work yet. Not sure where I'm going wrong, could indeed be I still need to ditch the example-top class from the actual button and clear cache.
Feel free to create an archive for your child theme and share it using Cloudup.
Going through it is like voluntarily signing up to play in a b type slasher movie from the 1920's ... 😛
https://cloudup.com/c2DcnyVrRZV
The live version is quite a bit more clean.
Thanks J.C. but you made it private so we can access it.
I can't seem to figure out how to set it to public.
Hey J.C. it is accessible now.
I see in your child theme that you still have beans_add_attribute( 'beans_body', 'id', 'example-top' );. If you changed the link href, you also need to change the instance of example-top there.
Thanks,
Yeah, I've been cleaning up my functions.php after that 😛
It works, more or less. I have to figure out how to best use the functionality, aka where / how to implement on page. Cheers for the assist!
Is there a way to assign the data-uk-smooth-scroll to a menu item in a navbar? For example when having the back-to-top link in a footer menu?
Hi J.C.
You can add HTML attributes to any markup with a markup id on the page. This discussion has come up so many times on the forum I would suggest to check other discussions (this reply for example) or simple refer the Beans Markup and Attributes documentation. It is the basic of Beans magic it is totally worth investing a little bit of time to make sure you understand it as it will really give you wings 🙂
I am going to give you an example but you shouldn't just grab it without understanding as it might help in this case, but then you will get stuck further while if you understand it, you will be able to make some magic next time you encounter such a situation. If you inspect one of your menu item in your browser (in Beans dev mode as explained in the article linked further up), you will see that your <a> tag as a markup id which would look like beans_menu_item_link[_1639] (with a different integer indeed). From there all you have to do is grab this markup id and add the data-uk-smooth-scroll attribute by adding the following in your child theme functions.php.
beans_add_attribute( 'beans_menu_item_link[_1639]', 'data-uk-smooth-scroll', '' );The last parameter may be used to add the UIkit smooth scroll options if needed.
Happy coding,
Hang on. If I understand this correctly, so basically I check the default menu output, find which menu item I added within WP as a "custom item", and apply add_attribute to that. That is nifty.
This is something to keep in mind for making a one-page design as well, but also for page menu instances which function as jump links (h1, h2, etc).
Yes that is correct J.C. and this apply to all the HTML markup on the page which has a markup-id when you inspect them 🙂