How to add featured Slider to Genesis Framework Child Themes

The popularity of the eleven40 child theme has made it one of the most widely used theme by tech-bloggers and the most widely used single genesis child theme . It’s sleek and responsive nature coupled with thousands of reviews online actually garnered it this unmatched popularity.

In a bid by some tech bloggers to achieve a look completely different from what every other persons have, they have added many features like custom css, custom function, custom graphics and many other tweaks. So the question of   How to add featured Slide to eleven40 Child Theme-on Genesis Framework  shouldn’t come as a surprise to you at all.

I choose to share this after many of my subscribers keep contacting me privately on how they can possibly add something like slides to their genesis framework powered blog.

It’s no surprise, many genesis child themes already comes with wp-circle enabled by default for slideshow, child themes  like crystal, ventures, enterprise and news already have custom slide show widget area enabled by default leaving out other ones that were developed for blog purposes without such.

While you can simply snip these codes from those child themes with slide show area and add them to others without it, it might just not work fine with your current theme except you know what you are doing. That is why I decided to share this today to give you a pretty good idea on how you can add a custom slideshow area to your eleven40 child theme.

If you are not very good with genesis framework and conditional wordpress (Genesis )   tags this may be a little bit difficult for you as in styling it to suit all you may want with it, But believe me, I will write a more pragmatic tutorial when I have really good time again.

Let me give you few ideas why you might need a slide show or featured slides area in your blog.

• When you have another legitimate business you want to promote
• When you have an official Portfolio website you will like to be always featured in your primary blog
• When you have a “featured category” in your blog that contains post you value so much and believes will reduce bounce rate
• When you blog on pictures, fashion or ministry related  niche that needs such slides to stand out
• When you are selling products with images or preview and will like them to be noticed by every visitor

Now you ‘ve got few ideas why you may want a slide show area for your blog right?

Now let’s take into consideration the possible positions you can place your slide show / featured slides taking users experience and user-friendliness as the chief determiner.

• Before the content area
• Before  and after Topic titles
• Before and after contents
• Before Footer widget section
• After Footer Widget Section
• Inline with the footer itself

Now let’s proceed to code snippet and possible plugins you may need to add these slides

• Enhanced Text Widget
• Vslider Plugin
• Genesis Responsive Slider or featured Slider
• Genesis Simple Hook

The position you have decided for your slides will determine what plugin to use. For the  sake of this tutorial we will be making use of vslider plugin, the short code and php snippet using either genesis simple hook or  the enhanced text Widget.

To Register a section called   Before Post section ( after the header before the content/sidebar) in your widget area  log in to your admin dashboard ==> go to appearance ==> Editor ==> Select Function.php and post the following code  in the last line of  it.

Here is the code to copy

/** obasimvilla.com/how-to-add-featured-slide-to-eleven40-child-theme-genesis-framework */
 
add_action( 'genesis_before_loop', 'genesis_before_loop_widget_box' );
function genesis_before_loop_widget_box() {
   if ( is_single() || is_home() || is_category || is_archive || is_page || is_front_page ) {
?>
<?php if ( is_active_sidebar( 'genesis_before_loop_widget' ) ) : ?>
    <div class="before-content">
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('genesis_before_loop_widget') ) : ?>
            <div class="widget">
                <h3><?php _e( 'Top Widget Area', 'focus' ); ?></h3>
                <p><?php _e("a widget area comes here.", 'genesis'); ?></p>
            </div><!-- end .widget -->
        <?php endif; ?>
    </div>
<?php endif; ?>
<?php
} }
 
genesis_register_sidebar( array(
    'id'                => 'genesis_before_loop_widget',
    'name'          => __( 'Before Post', 'genesis' ),
    'description'   => __( 'after the header before the content/sidebar.the slides, adsense or any html can be used here.', 'focus' ),
) );

save your function.php and proceed….

Now this will add a place called before post section you can drag any slider widget to it including the genesis featured slider .

If you just want to add the slide show / featured slides to after post contents simply skip this steps and use the already registered after post section in your eleven40 child theme or use the php code below

/**
 obasimvilla.com/how-to-add-featured-slide-to-eleven40-child-theme-genesis-framework
 */
function ad_after_posts() {
 if ( is_single() ) {
?>
Your slider shortcode or php code here 
<?php
}
}
add_action('genesis_after_post_content', 'ad_after_posts');

Eg. assuming I want my vslider featured slides to display after my post contents I will be using the code above together with

vslider short code or php code which is [vslider name=”vslider_options”] and <?php if(function_exists(‘vslider’)){ vslider(‘vslider_options’); } ?> respectively

as in:

/**
 obasimvilla.com/how-to-add-featured-slide-to-eleven40-child-theme-genesis-framework
 */
function ad_after_posts() {
 if ( is_single() ) {
?>
[vslider name="vslider_options"]
<?php
}
}
add_action('genesis_after_post_content', 'ad_after_posts');

Same way you can play around various position using genesis simple hook or the enhanced text widget that already has support for short codes and php snippets.

Bonus Trick

You can save yourself from the stress of reading all this instruction if you just want your slide show / featured slides to display immediately after the footer widget area section

by editing this lines in your function.php .

Press ctrl+f to search for

/** Add 3-column footer widgets */
add_theme_support( 'genesis-footer-widgets', 3 );

Replace with

/** Add 3-column footer widgets */
add_theme_support( 'genesis-footer-widgets', 4 );

This will increase your footer widget area to 4 making it possible for you to just drag and drop the slider widget
to footer 4 which will automatically assume the whole width since no style has been added for it in your style.css . you can still re-position it to before footer widget area section using this same trick.

You can use this conditional statement to place your slides using either enhanced text widget or the genesis simple hook along any position of your choice. always take note of this statements to control where your slide should display .

more examples

with the php code of vsilder

with the short code of vslider

Concluding Lines :

This is to give you idea as suggested in the beginning of the article, so you should just know you are doing it right or simply follow the instruction to make sure there isn’t any error from your end. feel free to ask me any question or help improve the tutorial by placing your valuable comments.