Thêm Tìm kiếm và Simple Social Icons vào Primary Navigation trong Genesis

Bước 1

Vào Genesis > Theme Settings. Cài đặt Primary Navigation Extras không hiện bất cứ cái gì

Bước 2

Thêm đoạn code sau vào file functions.php trong thư mục theme child của Genesis:

genesis_register_sidebar( array(
	'id'          => 'nav-social-menu',
	'name'        => __( 'Nav Social Menu', 'your-theme-slug' ),
	'description' => __( 'This is the nav social menu section.', 'your-theme-slug' ),
) );
 
add_filter( 'genesis_nav_items', 'sws_social_icons', 10, 2 );
add_filter( 'wp_nav_menu_items', 'sws_social_icons', 10, 2 );
 
function sws_social_icons($menu, $args) {
	$args = (array)$args;
	if ( 'primary' !== $args['theme_location'] )
		return $menu;
	ob_start();
		echo '<li class="search-social">';
		get_search_form();
		genesis_widget_area('nav-social-menu');
		echo '</li>';
	$social = ob_get_clean();
	return $menu . $social;
}

Bước 3

Vào Appearance -> Widgets, đưa một Simple Social Icons widget vào Nav Social Menu widget area và cài đặt nó.

Bước 4

Thêm đoạn code sau vào file style.css trong thư mục child theme của Genesis:

Lưu ý: Đoạn code sau hoạt động tốt đối với theme Lifestyle Pro và tất nhiện cũng chạy được trên các theme Genesis khác nhưng bạn có thể chỉnh sửa nó cho phù hợp với blog của mình.

/* Adding Search Form and Simple Social Icons to Primary Navigation
---------------------------------------------------------------------- */
 
.nav-primary {
	margin-bottom: 20px;
}
 
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
 
.search-social {
	float: right;
	list-style-type: none;
	list-style-image: none;
	padding-top: 6px;
}
 
.search-social .search-form {
	float: left;
	width: auto;
	margin-right: 10px;
}
 
.search-social .widget-area {
	float: left;
	padding-top: 2px;
}
 
.search-social .simple-social-icons ul li {
	margin-bottom: 0 !important;
}
 
.search-social .simple-social-icons ul li:last-child {
	margin-right: 0 !important;
}
 
@media only screen and (max-width: 1024px) {
 
	.search-social {
		float: none;
		display: table;
		margin: 0 auto 20px auto;
	}
 
}
 
@media only screen and (max-width: 320px) {
 
	.search-social .search-form {
		float: none;
		margin-bottom: 20px;
	}
 
	.search-social .widget-area {
		float: none;
	}
 
}