Contact Form on the Homepage too – Modern Portfolio

[eluviis]

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

[Brad Dalton]

Hi Danny

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

Genesis 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

---

Tutorials for StudioPress Themes.

[eluviis]

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

[Brad Dalton]

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;
}

---

Tutorials for StudioPress Themes.

[Author]

Posts