PSD to WordPress Theme

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:

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’

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

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

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.