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.

Pretty up our theme

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


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.

                    <div class="wrapper">
                        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>
                    </div><!-- /.wrapper -->

Copy this revised navigation and place it beside the logo.

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

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

<hgroup id="logo">
						<a href='' 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; ?>
                            <?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>
				</div><!-- /.wrapper -->
		</section> <!-- /.main-header -->


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;

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;


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.

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.


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


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


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.

			// 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.


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


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”.

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


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

<section class="bxslider">

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

	$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">
                <a href="<?php the_permalink(); ?>">
                    <h1><?php the_title(); ?></h1>
                <?php the_content('Read more on "'.the_title('', '', false).'" &raquo;'); ?>
        </article> <!-- /.wrapper -->
    </section> <!-- /.sticky-post-carousel -->

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




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 {


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.

if (function_exists('register_sidebar')) {
		'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>'


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



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


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]