How to Build a Single Page Portfolio Theme – Part 1 – Sticky Post Carousel

Posted on 25th August, 2014 Leave a Comment

I’m going to show you how easy it is to build a single page portfolio theme for WordPress. Something I’ve been meaning to do for a while now, I thought that since I’ve recently released my starter theme on GIT it would be a perfect time to finally complete this post! So without further ado lets begin by downloading my starter theme.

This is how it’s going to look, simple by design but it’ll make it so you can style this out how you want.

WPtricks Testing
If you’d like to take a look at the complete finished source code, I’ve published this to GITHUB. https://github.com/aaronsummers/wptricks-starter-singlepage-theme/

Pretty up our theme

Lets add a new logo, download this and replace the logo in the images folder in our theme.

Header.php

This theme is needing a slight makeover so let make those changes before we begin making this theme work as a single page portfolio.
Open up your header.php and remove the current navigation.

 
<!--
	REMOVE THIS NAV ITEM FROM THE HEADER.PHP
-->
               <nav>
                    <div class="wrapper">
                        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>
                    </div><!-- /.wrapper -->
                </nav>

Copy this revised navigation and place it beside the logo.

                    <nav>
                            <?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>
                    </nav>

Place it above the closing wrapper div, after the endif.

<hgroup id="logo">
						<a href='http://wptricks.o.uk' title='WPtricks' rel='home' target="new"><img src='<?php bloginfo('template_directory'); ?>/images/logo.png' alt='WPtricks Testing'></a>
							<h1><?php bloginfo('name'); ?></h1>
							<h2><small><?php bloginfo('description'); ?></small></h2>
					</hgroup> <!-- /#logo -->
						
						<?php endif; ?>
                    <nav>
                            <?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>
                    </nav>
            
				</div><!-- /.wrapper -->
			</header>
		</section> <!-- /.main-header -->

Style.css

Next we need to add some new styles to pretty this up a little.

/*
 * 12. New Nav Styles
 *************************************************/

.main-header hgroup {
    float: left;
    width: 25%;
}
.main-header nav {
    float: right;
    width: 75%;
	margin-top: 19px;
}


/* RESET SOME OF THE THEME STYLES */
header h2,
h1 {
	font-family: lobster;
	font-size: 3em;
	text-transform: capitalize;
}
body .main-header header,
body .main-header nav {
	background-color: #fff;
}
body .bx-wrapper .bx-viewport {
	box-shadow: none;
}
body a {
	color: #03A5FF;
}
body a:hover,
body a:active {
	color: #007DC3;
}
body a {
	-webkit-transition: all .25s ease .1s;
	-moz-transition: all .25s ease .1s;
	-o-transition: all .25s ease .1s;
	transition: all .25s ease .1s;
}

Fonts.css

Next we’ll include a new font to our library, open up the fonts/fonts.css and at the very top lets include a new font. The old faithful “Lobster” font, which will be used for the titles in our theme.

@font-face {
    font-family: 'lobster';
    src: url('lobster/lobster.eot');
    src: url('lobster/lobster.eot?#iefix') format('embedded-opentype'),
         url('lobster/lobster.svg#lobster_1.4regular') format('svg'),
         url('lobster/lobster.woff') format('woff'),
         url('lobster/lobster.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

Now download the font and add it inside that same fonts folder fonts/lobster/.


Now that’s given us a good base to work from, lets move on to the actual functionality and everything else…

Add the jQuery plugin for the slider

BX-slider – My personal favorite jQuery slider available, fully responsive and in my opinion a perfect development slider. http://bxslider.com/

Download the bxslider and include the jquery.bxslider.css in the /CSS folder and the jquery.bxslider.min.js in the /JAVASCRIPT folder.
Next we’ll open up the header.php to include the plugins css and we’ll open up the footer.php to add the js.

header.php

Under the <!– STYLESHEETS –> include our newly added css file within an if statement, because we’re creating a single page theme we only want to load the styles and scripts on the home page.

        
<?php if ( is_front_page() ) { ?>
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/jquery.bxslider.css" media="screen">        		
        <?php } ?>

footer.php

Open up your footer.php and include the call for the new bxslider.js file.

Under the <!– JAVASCRIPT –> comment add our sliders js file (also within an if statement).

        <?php if ( is_front_page() ) { ?>
			<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascript/jquery.bxslider.min.js"></script>       		
        <?php } ?>

wptricks-starter.js

Finally we want to action the bxslider, to do this is simple. In the /JAVASCRIPT folder open up the wptricks-starter.js.

The main document ready function allows us to use the $ symbol with WordPress, so we’ll pop this within that function.

To clarify add this Within the “jQuery(document).ready(function($) {” and this will activate our bxslider.

  $('.bxslider').bxSlider({
			// Make sure the slider has responsive height
			adaptiveHeight: true,
			// Create new prev and next icons. I'm using the fa-angle-left & fa-angle-right from the FontAwesome library, I just copied and pasted the actual icon so they show as dots in your code.
			nextText: '',
			prevText: ''
	});

So to stick with tradition, I want to put the slider at the top of the page in this theme, and rather than adding this straight into our index.php I’m going to create a new file – home-page-template.php, then we can create a new page in our site and select this template from the page attributes and then in settings/reading under “Home Page” select this page.

Adding the post carousel…

Add a new image size to our post thumbnails; Because this is going to be a full width slider the slides need to be about 1900px wide. Adding “true” to the “add_image_size” will crop a section from the center of the image, making it fit our carousel.

functions.php

To define a new image size; Go to line 70 and find the “ADD THEME SUPPORT FOR POST-THUMBNAILS” section.

// This will be used as a background image, which we'll be calling in some inline css for each of our slides.
	add_image_size( 'sticky-carousel-thumbnail', 1900, 400, true );

home-page-template.php

If you haven’t already the create a new file and save it in the main theme folder as home-page-template.php. Then add our first custom loop that only selects the “sticky posts”.

<?php
/*
	Template Name: Home Page Template
*/
?>
<?php get_header(); ?>

<?php
/*
	SINGLE PAGE PORTFOLIO CAROUSEL.
*/

// GET STICKY POSTS
$sticky = get_option('sticky_posts');
if (!empty($sticky)) {
    
	// Newest IDs first
    rsort($sticky);
    
	// Override the query
    $sticky_query = new WP_Query( array(
        'post__in' => $sticky
    ));
?>

<section class="bxslider">

<?php
    if ( $sticky_query->have_posts() ) : while ( $sticky_query->have_posts() ) : $sticky_query->the_post();
?>

<?php
	// GET THE THUMBNAILS URL
	$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'sticky-carousel-thumbnail' );
	$background = $thumb['0'];
?>

    <section class="sticky-post-carousel" style="background-image: url(<?php echo $background // Echo the thumbnail (1900px by 400px)  url to be used as a background image for each slide ?>);"> 
    
        <article id="post-<?php the_ID(); ?>" class="wrapper">
            <header>
                <a href="<?php the_permalink(); ?>">
                    <h1><?php the_title(); ?></h1>
                </a>
            </header>
            <section>
                <?php the_content('Read more on "'.the_title('', '', false).'" &raquo;'); ?>
        
            </section>
        </article> <!-- /.wrapper -->
        
    </section> <!-- /.sticky-post-carousel -->

<?php
    endwhile; endif; };
?>
<?php wp_reset_query(); ?>
    
</section> <!-- /.bxslider -->

<?php 

		/* END CAROUSEL SLIDER SECTION
		 *****************************************************/
?>

style.css

Now we’ll open our styles.css and add the styles for our new addition. Seeing as this is going to be responsive we’ll be using a percentage padding for the height of the sticky post carousel. Using a percentage padding will allow the slider to have responsive height which will respond to the width of the browser window.

Go to the bottom of the style.css (line: 500) and add some styles.

/*

/*
 * 12. Sticky Post Carousel
 *************************************************/
 
 /*  height: 0; padding-bottom: 6.6%; Makes our containing div height responsive. Percentage padding is the key here! */
.sticky-post-carousel {
	height: 0;
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 6.6%;	
	min-height: 280px;	

}
.sticky-post-carousel article {
	min-width: 280px;
	width: 80%;
	margin: 3% auto;
	padding: 2% 2.8%;
	background: rgba(0,0,0,.2);
	text-shadow: 0 0 1px #333, 0 0 3px #444;
	color: #fff;
	text-align: center;
}
/* Override some of the bxsliders default css*/
.home .bx-wrapper .bx-viewport {
	left: 0;
	border: 0;
}
/* Here we enable fontawesome font for the icons we're using in the slider */
body .bx-wrapper .bx-controls-direction a,
body .bx-wrapper .bx-controls-direction a:hover {
	font-family: FontAwesome;
	text-indent: 0;
	font-size: 3.8em;
	line-height: normal;
	text-decoration: none;
}
body .bx-wrapper .bx-controls-direction a {
	height: auto;
	width: auto;
	margin-top: -45px;
}
body .bx-wrapper .bx-prev,
body .bx-wrapper .bx-next {
	padding: .1em .1em;
}
/* Hide the controls till we need'em */
body .bx-wrapper .bx-prev {
	left: -43px;
}
body .bx-wrapper .bx-next {
	right: -43px;
}
/*  bring'em back on screen */
body .bx-wrapper:hover .bx-prev {
	left: 10px;
} 
body .bx-wrapper:hover .bx-next {
	right: 10px;
} 
/* Hover effects for the controls */
body .bx-wrapper .bx-prev:hover,
body .bx-wrapper .bx-next:hover {
	background: rgba(255,255,255,.8);
}
/* Adjust the pager slightly,
 *	make the circles bigger...
 **/
body .bx-wrapper .bx-pager.bx-default-pager a {
	width: 15px;
	height:  15px;
	border-radius: 8px;
}
/* Lower them by 10 more pixels */
body .bx-wrapper .bx-pager, body .bx-wrapper .bx-controls-auto {
	bottom: -40px;
}

/* Section Titles
-------------------------------------------------- */
section:not(.main-header) > header > .wrapper > h2 {
    text-align: center;
}
section:not(.main-header) > header {
    border-bottom: 4px solid #777;
    border-top: 4px solid #777;
    margin: 10% 0 12%;
    padding: 3% 0;
}

/* Strapline
-------------------------------------------------- */
.strapline {
	text-align:center;
}

Functions.php

If that wasn’t enough we’re going to add a strapline section which will hold a short description about the site and what we do. To do this open up your functions.php and add another widget area.

Within the register_sidebar function add this at the top.

	
/*
 * WIDGETS
 *************************************************************/
 
if (function_exists('register_sidebar')) {
	// ADD NEW SIDEBAR HERE
	register_sidebar(array(
		'name' => 'Strapline',
		'id' => 'srapline',
		'description' => 'The area that displays a brief description of your site',
		'before_widget' => '<article>',
		'after_widget' => '</article>',
		'before_title' => '<h1>',
		'after_title' => '</h1>'
		));

Home-page-template.php

Then we just need to pop this below our slider in the home-page-template.php

<?php 

		/* INCLUDE OUR STRAPLINE SECTION
		 *****************************************************/
?>

<section class="strapline">
	<div class="wrapper">
		<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('strapline')) : endif; ?>
	</div> <!-- /.wrapper -->
</section> <!-- /.strapline -->
<?php 

		/* END STRAPLINE SECTION
		 *****************************************************/
?>

About Us Section

Go there now… Click Here

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]