Contact Form on the Homepage too – Modern Portfolio

Community Forums Forums Design Tips and Tricks Contact Form on the Homepage too – Modern Portfolio

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  braddalton 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #51793

    eluviis
    Participant
    Post count: 115

    I like the jump links in the menu on Modern Portfolio. However, even though the quick start guide states there is a jump link menu item for “contact”, there is no widget for it, therefore it doesn’t work. Out of the box, the only way to link to the contact page is a direct link to an actual contact page.

    Having said that, how to I make it so I can have a contact widget at the end of the homepage, but before the 3 footer widgets so that the “contact” jump link will take the user to it without having to navigate to the contact page?

    This is the site (in the works) by the way: http://dannycruzcreations.com

    Thanks

    #51794

    braddalton
    Participant
    Post count: 7467

    Hi Danny

    You’d use something like this and change the hook position.

    http://genesistutorials.com/visual-hook-guide/

    Another option is to add code to the home.php and functions.php files.

    Entire home.php code:

    <?php
    /**
     * Controls the homepage output.
     */
    
    add_action( 'wp_enqueue_scripts', 'mp_enqueue_scripts' );
    /**
     * Enqueue Scripts
     */
    function mp_enqueue_scripts() {
    
    	if ( is_active_sidebar( 'about' ) || is_active_sidebar( 'portfolio' ) || is_active_sidebar( 'blog' ) || is_active_sidebar( 'contact' ) ) {
    		wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
    		wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
    		wp_enqueue_script( 'scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array( 'localScroll' ), '', true );
    	}
    }
    
    add_action( 'genesis_meta', 'mp_home_genesis_meta' );
    /**
     * Add widget support for homepage. If no widgets active, display the default loop.
     *
     */
    function mp_home_genesis_meta() {
    
    	if ( is_active_sidebar( 'about' ) || is_active_sidebar( 'portfolio' ) || is_active_sidebar( 'services' ) || is_active_sidebar( 'blog' ) || is_active_sidebar( 'contact' ) ) {
    
    		// Force content-sidebar layout setting
    		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
    
    		// Add mp-home body class
    		add_filter( 'body_class', 'mp_body_class' );
    		function mp_body_class( $classes ) {
    			$classes[] = 'mp-home';
    			return $classes;
    		}
    
    		// Remove the navigation menus
    		remove_action( 'genesis_after_header', 'genesis_do_nav' );
    		remove_action( 'genesis_after_header', 'genesis_do_subnav' );
    
    		// Remove the default Genesis loop
    		remove_action( 'genesis_loop', 'genesis_do_loop' );
    
    		// Add homepage widgets
    		add_action( 'genesis_loop', 'mp_homepage_widgets' );
    
    	}
    
    }
    
    function mp_homepage_widgets() {
    
    	genesis_widget_area( 'about', array(
    		'before' => '<div id="about"><div class="wrap">',
    		'after' => '</div></div>',
    	) );
    
    	genesis_widget_area( 'portfolio', array(
    		'before' => '<div id="portfolio"><div class="wrap">',
    		'after' => '</div></div>',
    	) );
    
    	genesis_widget_area( 'services', array(
    		'before' => '<div id="services"><div class="wrap">',
    		'after' => '</div></div>',
    	) );
    
    	genesis_widget_area( 'blog', array(
    		'before' => '<div id="blog"><div class="wrap">',
    		'after' => '</div></div>',
    	) );
    	
    	genesis_widget_area( 'contact', array(
    		'before' => '<div id="contact"><div class="wrap">',
    		'after' => '</div></div>',
    	) );
    
    }
    
    genesis();
    

    And functions.php:

    genesis_register_sidebar( array(
    	'id'				=> 'contact',
    	'name'			=> __( 'Contact', 'mp' ),
    	'description'	=> __( 'This is the Contact section.', 'mp' ),
    ) );
    

    Then you can use this link to jump to the contact widget on the home page. http://yourdomain.com/#contact


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #51795

    eluviis
    Participant
    Post count: 115

    Hi Brad. Thanks. I’ll give it a shot and report back.

    #51798

    braddalton
    Participant
    Post count: 7467

    Just added another option Danny.

    Tested locally of course, and works.

    And here’s some CSS code you can modify:

    /* 04d - Homepage ----------- */
    
    #about,
    #blog,
    #contact,
    #portfolio,
    #services {
    	clear: both;
    	overflow: hidden;
    }
    
    #about,
    #services {
    	background-color: #222;
    }
    
    #about,
    #services {
    	padding: 64px 0;
    	padding: 4rem 0;
    }
    
    #blog,
    #contact,
    #portfolio {
    	padding: 64px 0 16px;
    	padding: 4rem 0 1rem;
    }
    

    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.