Minimum Theme: Add Responsive Slider to all pages

Community Forums Forums Design Tips and Tricks Minimum Theme: Add Responsive Slider to all pages

This topic is: resolved

Tagged: ,

This topic contains 6 replies, has 3 voices, and was last updated by  wyattwerner 11 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #51780

    pgless
    Participant
    Post count: 4

    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.

    #51787

    braddalton
    Participant
    Post count: 8868

    In 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++.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #51812

    pgless
    Participant
    Post count: 4

    Hi braddalton,

    Copied the code into functions.php as instructed. What code should use to view the slider on pages?

    #51846

    braddalton
    Participant
    Post count: 8868

    In 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


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #52064

    pgless
    Participant
    Post count: 4

    Finally 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.

    #58013

    wyattwerner
    Participant
    Post count: 15

    This 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?

    #58110

    wyattwerner
    Participant
    Post count: 15

    OK, 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%
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.