Build an one page portfolio website with WordPress

No doubt that the one page portfolio website is more and more popular in this year. It seems that it’s simple and clean, however, it’s not very easy to intergrate the one page system in WordPress, because you must think about how to sync the navigation menu and each page sections, this is one of a big nodus, and the other nodus is how to call the loop of each page sections on the home page. I will discuss how to make an one page portfolio WordPress Theme in the following tutorials, I’m emphasizing the most important steps.

First of all, nothing will make it easier than using a Ready One Page WordPress Theme, actually, we only need the one page framework, so whatever how about the appearance of this theme. For example, you can looking for a free or premium One Page WordPress Theme on google or Themeforest. All codes in this tutorials are from SimpleKey Theme. Well, let’s get down to bussiness!

First step: Sync the navigation and each page sections

We must improve the navigation, change all menu hyperlink to anchors, for example, change “http://domain.com/about” to “http://domain.com/#about”, so please put the following codes in functions.php

class description_walker extends Walker_Nav_Menu{
      function start_el(&$output, $item, $depth, $args){
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
           $class_names = $value = '';
           $classes = empty( $item->classes ) ? array() : (array) $item->classes;
           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';
           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           if($item->object == 'page')
           {
                $varpost = get_post($item->object_id);
                if(is_home()){
                  $attributes .= ' href="#' . $varpost->post_name . '"';
                }else{
                  $attributes .= ' href="'.home_url().'/#' . $varpost->post_name . '"';
                }
           }
           else
                $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID );
            $item_output .= $args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
     }
}

At the meanwhile, you must set walker argument to new Description_walker in wp_nav_menu function as below:

<?php
   wp_nav_menu(array(
   'theme_location' => 'primary_navi',
   'echo' => true,
   'walker'=> new Description_Walker,
   'depth' => 4) );
?>

Then, all pages you have added to the navigation menu with custom menu will be changed to anchor links.

Second step: call the page loop in the home page

In this step, you must display all pages which you have added to the navigation menu. You’d better create a new home page, for example home.php,  add the pages loop first:

<?php 
query_posts('post_type=page');
while(have_posts() ) : the_post();
?>
     <div id="<?php echo $post->post_name;?>">//Add page content here</div>
<?php endwhile;?>

Then it will display all pages in your website, but we only need to call the pages which we have added to the navigation menu, so we should add the following codes in front of the query_posts() method.

if (($locations = get_nav_menu_locations()) && $locations['primary_navi'] ) {
        $menu = wp_get_nav_menu_object( $locations['primary_navi'] );
        $menu_items = wp_get_nav_menu_items($menu->term_id);
        $pageID = array();
        foreach($menu_items as $item) {
            if($item->object == 'page')
                $pageID[] = $item->object_id;
        }
	query_posts( array( 'post_type' => 'page','post__in' => $pageID, 'posts_per_page' => count($pageID), 'orderby' => 'post__in' ) );
}
        while(have_posts() ) : the_post();
        //Loop here.
        endwhile;

Looking at “primary_navi“, this is the custom menu name you have defined. That’s it, a basic one page theme is finished, you can try it. If you want to get the compete theme source, you can purchase and download the SimpleKey here.

The article source: http://wplofter.com/build-an-one-page-portfolio-website-with-wordpress/

Leave a Reply