Building a Single Page Website Using WordPress

4919659112_b9f6b0df8f_o

Hey Friends,

Here i am going to give you some tips to make a single page website, Nowadays single page website becomes trending. So this may help some one who are trying to make a one page website.

I am going to give an idea of building a single page website having 3-4 sections using wordpress.

Create a new home.php file in your theme.

Slider

</pre>
<section id="call-to-action">
<div class="indent clear"><!--?php 			$query = new WP_Query( 'pagename=home' ); 			// The Loop 			if ( $query--->have_posts() ) {
 while ( $query->have_posts() ) {
 $query->the_post();
 echo '
<div class="entry-content">';
 the_content();
 echo '</div>
';
 }
 }

 /* Restore original Post Data */
 wp_reset_postdata();
 ?></div>
</section>
<pre>

Services Section

</pre>
<section id="services">
<div class="indent clear"><!--?php  		$query = new WP_Query( 'pagename=services' ); 		// The Loop 		if ( $query--->have_posts() ) {
 while ( $query->have_posts() ) {
 $query->the_post();
 echo '
<h2 class="section-title">' . get_the_title() . '</h2>
';
 echo '
<div class="entry-content">';
 the_content('');
 echo '</div>
';
 }
 }

 /* Restore original Post Data */
 wp_reset_postdata();
 ?></div>
<!-- .indent --></section>
<pre>
<!-- #services -->

 

/* SERVICES */

#services {
    padding: 4rem 0;
}
#services .section-title {
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #8abf5e;
}

.services-list {
    margin: 4rem -4rem 0 -2rem;
    padding: 0;
    list-style: none;
}

.services-list li {
    display: block;
    color: #404040;
    padding: 2rem;
    margin: 0 4rem 2rem 0;
    text-decoration: none;
    -webkit-column-break-inside: avoid;
                   break-inside: avoid-column;
}

.services-list li,
.services-list li a,
.services-list li h3 {
    transition: all .5s ease;
}

.services-list li:hover {
    background: #8abf5e;
}

.services-list li:hover,
.services-list li:hover a,
.services-list li:hover a:hover,
.services-list li:hover a h3 {
    color: hsl(0, 0%, 100%)!important;
}

.services-title {
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1em;
}

.services-list .more-link {
    text-decoration: underline;
}

/* SERVICES RESPONSIVE */

@media screen and (min-width: 450px) {
    .services-title {
        margin-bottom: 0;
        margin-right: 10%;
        width: 40%;
        float: left;
    }

    .services-lede {
        width: 50%;
        float: left;
    }

}
@media screen and (min-width: 950px) {
    .services-list {
        -webkit-column-count: 2;
                column-count: 2;
    }
}

Testimonials Section

</pre>
<section id="testimonials">
<div class="indent clear"><!--?php  		$args = array( 			'posts_per_page' =--> 3,
 'orderby' => 'rand',
 'category_name' => 'testimonials'
 );

 $query = new WP_Query( $args );
 // The Loop
 if ( $query->have_posts() ) {
 echo '
<ul class="testimonials">
<ul class="testimonials">';</ul>
</ul>
<ul class="testimonials">
<ul class="testimonials">while ( $query->have_posts() ) {</ul>
</ul>
<ul class="testimonials">
<ul class="testimonials">$query->the_post();</ul>
</ul>
<ul class="testimonials">
<ul class="testimonials">echo '</ul>
</ul>
<ul class="testimonials">
<ul class="testimonials">
	<li class="clear">';
 echo '
<figure class="testimonial-thumb">';
 the_post_thumbnail('testimonial-mug');
 echo '</figure>
';
 echo '
<aside class="testimonial-text">';
 echo '
<h3 class="testimonial-name">' . get_the_title() . '</h3>
';
 echo '
<div class="testimonial-excerpt">';
 the_content('');
 echo '</div>
';
 echo '</aside>
';
 echo '</li>
</ul>
</ul>
<ul class="testimonials">
<ul class="testimonials">';</ul>
</ul>
<ul class="testimonials">
<ul class="testimonials">}</ul>
</ul>
<ul class="testimonials">echo '</ul>
';
 }

 /* Restore original Post Data */
 wp_reset_postdata();
 ?></div>
<!-- .indent --></section>
<pre>
<!-- #testimonials -->

 

#testimonials {
    padding: 4rem 0;
    background: hsl(0, 0%, 90%);
}
.testimonials {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex:  row wrap;
    -moz-box-flex:  row wrap;
    -webkit-flex:  row wrap;
    -ms-flex:  row wrap;
    flex: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
}

.testimonials li {
    padding: 2rem 0 3rem;
    width: 100%;
}

.testimonial-thumb {
    max-width: 30%;
    height: auto;
    float: left;
}

.testimonial-text {
    float: left;
    width: 60%;
    margin-left: 10%;
}
.testimonial-thumb img {
    border-radius: 210px;
    border: 5px solid #fff;
}

.testimonial-name {
    font-weight: bold;
    font-size: 24px;
    font-size: 2.4rem;
    margin: 1rem 0;
}

.testimonial-excerpt {
    font-size: 16px;
    font-size: 1.6rem;
}

/* TESTIMONIALS RESPONSIVE */

@media screen and (min-width: 650px) {
    .testimonials li {
        padding: 4rem 4rem;
    }
}

@media screen and (min-width: 950px) {
    .testimonials li {
        width: 33.3333333333%;
        padding: 2rem 4rem;
        float: left;
    }
    .testimonial-thumb {
        max-width: 210px;
        margin: 0 auto;
        float: none;
    }

    .testimonial-text {
        float: none;
        width: auto;
        margin: 0;
    }

    .testimonial-name {
        text-align: center;
    }
}

Contact Section

</pre>
<section id="contact">
<div class="indent clear"><!--?php  		$query = new WP_Query( 'pagename=contact' ); 		// The Loop 		if ( $query--->have_posts() ) {
 while ( $query->have_posts() ) {
 $query->the_post();
 echo '
<h2 class="section-title">' . get_the_title() . '</h2>
';
 echo '
<div class="entry-content">';
 the_content();
 echo '</div>
';
 }
 }

 /* Restore original Post Data */
 wp_reset_postdata();
 ?></div>
<!-- .indent --></section>
<pre>
<!-- #contact -->
/* CONTACT */

#contact {
    padding: 4rem 0;
}

#contact .section-lede {
    margin-top: 4rem;
}

@media screen and (min-width: 750px) {
    #contact .front-right {
        text-align: right;
    }
}

Adding a Custom Menu to the Front Page – header.php

<!--?php     if (is_front_page()){ 	wp_nav_menu( array( 'menu' =--> 'Front Page Menu' ) );
} else {
	wp_nav_menu( array( 'theme_location' => 'primary' ) );
}
?>

 

.main-navigation.sticky-header {
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0;
}

.shifted {
    margin-top: 54px;
}

Create a javascript (js) for menu action and enqueue to functions.php.

jQuery(document).ready(function($) {

	/* Stick navigation to the top of the page */
	var stickyNavTop = $('.main-navigation').offset().top;

	$(window).scroll(function(){
		var scrollTop = $(window).scrollTop();

		if (scrollTop > stickyNavTop) {
			$('.main-navigation').addClass('sticky-header');
			$('.site-header').addClass('shifted');
		} else {
			$('.main-navigation').removeClass('sticky-header');
			$('.site-header').removeClass('shifted');
		}

	});
});

Enqueue script to function.php


wp_enqueue_script( 'great-scripts', get_stylesheet_directory_uri() . '/js/yourscriptname.js', array('jquery'), '20140602', false);

Adding Smooth Scroll for the Scrolling Effect


/* Scroll to specific section on front page */
$(function() {
	$('a[href*=#]:not([href=#])').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				$('html,body').animate({
					scrollTop: (target.offset().top - 80)
				}, 1000);
				return false;
			}
		}
	});
});