How to turn a PSD into a One-Page Theme for WordPress
I always wondered how to create a one page theme. It seemed like an easy endeavour at first but then I started to realize a few features that were important for a one page theme. Sure, anyone could just hard code a long list of sections together and manually edit all of the content, but I wanted something I could give to a client and let them edit the content, y’know, how WordPress is typically used. So my issue became clear. How would I stack together content sections that were all individually editable?
I came to the conclusion that by looping out pages I could create the effect I wanted. Each page would serve as a content-part that would have its own structure and styling. Each page would also have the benefit of utilizing the WYSIWYG editor. But this project I embarked on ended up being multifaceted. As I progressed through the development process I learned a lot about theme development. Here are just a few things I will talk about in my upcoming tutorial:
[bs_well size=”lg”]
[bs_row class=”row”]
[bs_col class=”col-sm-4″]
Very basics of a PSD File
How to setup WordPress on local environment
How to download and setup Underscores starter theme
How to set up functions.php
The ‘post-types’
[/bs_col]
[bs_col class=”col-sm-4″]
How pages and posts work
How to set up a one page base template
How to implement wp_query and pull in pages to the home-page by category
How to pull in page content via “get_template_part()” function
How to use content-pages for section structuring
How to style each section
[/bs_col]
[bs_col class=”col-sm-4″]
How to widgetize sections using widget areas and posts
How to query posts by ID
How to use post or page featured image as the element background
How to make navigation functional
Extra credit: Adding jQuery to increase user experience
[/bs_col]
[/bs_row]
[/bs_well]
The files:
The original PSD file is called “take” and can be downloaded for free here.
If you would like to see the PSD in action check out my demo right here.
Keep an eye open for my tutorial!
The tutorial will guide you in creating a one-page-theme from multiple pages and posts. Using WordPress functions we will display all of these separate pages, posts, and widgets in an organized fashion leaving us with a well design theme. The theme will be built from the Underscores starter theme to ensure a solid foundation. Later on in the tutorial we will discuss refactoring our CSS with Sass, compiling CSS and JS files with a task runner such as Grunt, and loading jQuery and other libraries a variety of hosted libraries. Our end goal is to create a theme that not only looks good, but runs amazingly.
