Hello, I'm Fabio, I'm a new member.
First, thanks for having developed this framework to wordpress and thanks to this community.
I tried Beans framework and discovered that I love him.
In a short time, I have already customize it by installing a child theme and creating new widget areas.
I never developed so quickly.
But I would have a question for finish my website with Beans.
I'd like to realize a full-width slideshow on the homepage, or insert a full-width image on the homepage. (I have already insert a widget area in "hero position", but it is always visible in all page).
I want it only at home.
How can I develop it?
Tank you.
Fabio
Hi Fabio and welcome to Beans Community 🙂
If you have two options to deal with this which is using WordPress Conditional Tags or template files. Using Beans and template files is exampled in details in this article.
At the moment, I suspect that you have your code in your child theme functions.php. If you wish to keep it there, then use WordPress Conditional Tags in your functions to conditionally apply your code.
A better alternative is to use template files which will keep your code nicely organized. In your case, you may create a home.php or front-page.php file in your child theme depending on your Settings (read more about template hierarchy and the difference between these two template files). In this file, all the code you will add will only apply to your home/front-page. All what is left to do is move the code you added in your functions.php to display your slider in your newly created template file. Note that you should not move the code which registers your widget area as that is used for the admin side. Also note that you have to add beans_load_document() right at the bottom of your file otherwise you will get a blank page as explained in the article I linked to above.
Hope that helps 🙂
Hello Fabio,
I recently had to create the same kind of slideshow. The snippet below could help. It adds a slideshow with three posts from the category "Featured" in the frontpage of your theme. You can add this snippet in the functions.php file of your child theme.
You should have a look at this thread to.
Hote it helps !
<?php
function mytheme_home_slider_section () {
if ( !is_front_page () )
return;
{
$query = new WP_Query( array(
'category_name' => 'featured',
'paged' => get_query_var( 'paged' ),
'nopaging' => false,
'posts_per_page' => 3
) );
?>
<div class="uk-slidenav-position uk-margin-large-bottom" data-uk-slideshow="{animation:'scroll',autoplay:'true'}">
<ul class="uk-slideshow">
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post();
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$resized_src = beans_edit_image( $thumb_url_array[0], array(
'resize' => array( 1200, 540, true )
) );
$slider_excerpt = get_the_excerpt();
$categories_list = get_the_category_list( esc_html_x( ', ', 'category separator', 'sps' ) );
?>
<li style="animation-duration: 100ms; height: 300px;">
<div class="slider-image">
<a href="<?php the_permalink();?>" rel="bookmark" title="<?php esc_html( get_the_title() );?>">
<picture><img src="<?php echo $resized_src; ?>"></picture>
</a>
</div>
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-bottom uk-flex-middle">
<div class="uk-width-small-1-1 uk-width-large-4-6">
<span class="uk-badge"><?php echo $categories_list; ?></span>
<h2 class="uk-article-title" itemprop="headline"><a href="<?php the_permalink();?>" title="<?php esc_html( the_title() );?>"><?php the_title(); ?></a></h2>
<p class="uk-margin-top-remove uk-article-meta uk-contrast"><?php the_date () ?> · <?php the_author () ?></p>
<p class="uk-contrast uk-hidden-small"><?php echo $slider_excerpt ?></p>
<a class="uk-button uk-button-primary" href="<?php the_permalink();?>">Lire l'article</a>
</div>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</ul>
<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
</div>
<?php
}
}
add_action( 'beans_fixed_wrap[_main]_prepend_markup', 'mytheme_home_slider_section' );
Thank you Thierry Muller, and thank you Mathieu Rouault. Good notions. Thanks.
Another question: In my function.php I put the following code:
add_action( 'beans_header_after_markup', 'beans_child_home_add_title' );
function beans_child_home_add_title() {
// Only apply to front-page.
if ( is_front-page() ) {
?>
<div class="uk-container uk-container-center">
<br/>
<h1 align="center">Added Title</h1>
</div>
<?php
}
}
add_action( 'beans_content_prepend_markup', 'beans_child_home_add_description' );
function beans_child_home_add_description() {
// Only apply to front-page.
if ( is_front-page() ) {
?><p align="center">Added description</p><?php
}
}( I copy this code show in this article, and i change the Conditional Tag: is_home() ). The result is an error in my homepage. What is wrong?
Thank you.
Perfect done, and, for example, can I rename the function: beans_child_home_add_title in beans_child_frontpage_add_image ?
Because i want an image for the static front page i wrote this:
//add a image full-width on front-page
add_action( 'beans_header_after_markup', 'beans_child_frontpage_add_image' );
function beans_child_frontpage_add_image() {
// Only apply to front-page.
if ( is_front_page() ) {
?>
<div class="uk-container uk-container-center">
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" align="center" width="100%" />
</div>
<?php
}
}
it seems to work. What do you think about?
Fabio
Hey Fabio,
You may rename your functions the way you like it, in fact we encourage your to change the child_theme_ prefix (you will also very often see the example_ prefix) with your own project prefix. Here is an interesting article about it.
Have fun,
Hello all, This is my best solution, that I've found to put a cover on my website homepage with beans framework. I thought to post it here. Hope like it.
SOLUTION 1: The following code is for function.php file of the child theme.
//add a image full-width only static front-page
add_action( 'beans_header_after_markup', 'beans_child_home_add_cover' );
function beans_child_home_add_cover() {
// Only apply to static front-page.
if ( !is_front_page() )
return;
?>
<div class="uk-cover-background uk-position-relative">
<img src="http://www.example.com/image.jpg" width="" height="" alt="cover-image">
</div>
<?php
}SOLUTION 2: The following code is for home.php or front-page.php file of the child theme.
//add a image full-width on home or front-page
add_action( 'beans_header_after_markup', 'beans_child_home_add_cover' );
function beans_child_home_add_cover() {
?>
<div class="uk-cover-background uk-position-relative">
<img src="http://www.example.com/image.jpg" width="" height="" alt="cover-image">
</div>
<?php
}
// load the document after the customizations
beans_load_document();Fabio
Hey Fabio, thanks for sharing you solution which I am sure will be helpful to others!
Both solutions above demonstrates that you have a good understand of how Beans works which put a smile on my face 🙂
Happy coding,
Thank you for sharing the result Fabio!
Hello Thierry Muller.
I understand the basics of what I'm seeing in this code but I'm a little lost with getting this to work. I've designed WordPress sites for years but I've never gone this deep. What I want to do is create a Full Width Hero Image with a couple of buttons on it. I could use some advice.