Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minimum Theme: Add Responsive Slider to all pages
- This topic has 6 replies, 3 voices, and was last updated 10 years, 8 months ago by wyattwerner.
-
AuthorPosts
-
July 21, 2013 at 5:44 pm #51780pglessMember
Trying to add Genesis Responsive Slider to all pages, I've checked to code in 'home.php' and 'page-title.php'. Nothing I've tried has worked. Any help I can get would be good.
July 21, 2013 at 6:23 pm #51787Brad DaltonParticipantIn which hook position do you want to display the slider?
Here's some sample code which you can use or modify:
Please copy this code from the view raw or Gist link and paste it at the end of your child themes functions.php file using a text editor like Notepad++.
July 22, 2013 at 1:27 am #51812pglessMemberHi braddalton,
Copied the code into functions.php as instructed. What code should use to view the slider on pages?
July 22, 2013 at 10:35 am #51846Brad DaltonParticipantIn which hook position do you want to display the slider?
To display the slider on static pages only, simply add a conditional tag after the function.
https://gist.github.com/braddalton/6055355
July 23, 2013 at 9:29 am #52064pglessMemberFinally worked it out.
Here is the full solution for those of you wanting to do the same for the minimum theme.
Did a search and found this useful site: http://www.carriedils.com/add-slider-minimum-theme - did I say this was really useful.
1. Register a widget area - add the following code to your functions.php
/** Register widget area */ genesis_register_sidebar( array( 'id' => 'home-slider', 'name' => __( 'Home Slider', 'minimum' ), 'description' => __( 'This is the home slider', 'minimum' ), ) );
2. Search for the following and replace with the code in 3.
/** Add the featured image section */ add_action( 'genesis_after_header', 'minimum_featured_image' ); function minimum_featured_image() { if ( is_home() ) { echo '<div id="featured-image"></div>'; } elseif ( is_singular( array( 'post', 'page' ) ) && has_post_thumbnail() ){ echo '<div id="featured-image">'; echo get_the_post_thumbnail($thumbnail->ID, 'header'); echo '</div>'; } }
3. Add the widget areas to your pages (home and single pages) - add the following code to functions.php
/** Add the featured image section */ add_action( 'genesis_after_header', 'minimum_featured_image' ); function minimum_featured_image() { if ( is_home() ) { echo '<div id="home-featured"><div class="wrap">'; genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', ) ); echo '</div></div>'; } elseif ( is_singular( 'page' ) ) { echo '<div id="home-featured"><div class="wrap">'; genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', ) ); echo '</div></div>'; } }
This solution replaces the big image on the home page with Genesis Responsive Slider. If you wanted to put the slider on all pages all you have to do is add the following.
elseif ( is_404() ) { echo '<div id="home-featured"><div class="wrap">'; genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', ) ); echo '</div></div>'; } elseif ( is_post_type_archive( 'portfolio' ) || is_singular( 'portfolio') ) { echo '<div id="home-featured"><div class="wrap">'; genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', ) ); echo '</div></div>'; } elseif ( is_singular( 'page' ) ) { echo '<div id="home-featured"><div class="wrap">'; genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', ) ); echo '</div></div>'; } elseif ( is_author() || is_category() || is_date() || is_search() || is_singular() || is_tag() ) { echo '<div id="home-featured"><div class="wrap">'; genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', ) ); echo '</div></div>'; }
Hope you find this useful.
August 21, 2013 at 2:34 pm #58013wyattwernerMemberThis is helpful; thanks! But, I want the slider to be the full width of the page just as the featured images in the Minimum normally are. I can't seem to get it to go any further left than the content area or header. My guess is that it has something to do with the slider's width being set in the Genesis > Slider Settings area, but I don't know how to bypass that.
Any ideas?
August 21, 2013 at 8:44 pm #58110wyattwernerMemberOK, solved my own question. I must have been looking at it for too long this afternoon.
For posterity, here's what I did:
I followed the instructions above for adding a new widget area. Then I added the following CSS entry:
genesis-responsive-slider { width: 100% }
Then I adjusted two other CSS entries:
#inner { width: 1140px;
and
.wrap { max-width: 100%
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.